next e commerce

Site de comércio eletrônico

Demo: https://next-e-commerce-example.vercel.app/

Um exemplo de site de comércio eletrônico construído com o Next.js que fiz em 1 semana como um desafio próprio. Existem alguns problemas que vou lidar mais tarde. Usando o FireBase como back -end.

Entre em contato comigo · Relatório Bug · Recurso de solicitação

Índice

• Sobre o projeto
  • Construído com
• Capturas de tela
  • Home (notícias em)
  • Categorias
  • Produto
  • Carrinho
  • Conta
• Começando
  • Pré -requisitos
  • Instalação
• Problemas / planos de recursos
• Contribuindo
• Perguntas e respostas
• Licença
• Contato

Sobre o projeto

Vi um design de interface do usuário no Dribbble de Anton Mikhaltsov. E eu queria codificar esse design. Por isso, decidi torná -lo um site completo com o NextJS, mas em apenas 1 semana como desafio. Algumas questões ainda estão lá, mas vou conferi -las mais tarde.

• Os botões filtrar e classificar ainda não estão funcionando.
• O site não é responsivo %100 por causa do tempo não foi suficiente. Estou trabalhando nisso atualmente. Agora, é responsivo.
• Funções de Firebase podem ser melhores
• Os cartões de página inicial (notícias em) não têm redirecionamentos. Eles são apenas espaços reservados.

Construído com

• Reagir
• NextJs
• Firebase
• React fort fort
• data-fns
• Sass

Capturas de tela

Notícias em

• Os cartões não têm links e são estáticos, são apenas espaços reservados.

Categorias

Produto

Carrinho

Conta

Começando

Pré -requisitos

• Node.js versão 10.13 ou posterior
• Git (usei 2.20.1)

Instalação

1. Você precisa criar um projeto de Firebase

2. Clonar o repositório e alterar o diretório

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. Instale os pacotes NPM

npm install

4. Crie seu arquivo .env.local na pasta root (Next-e-Commerce) com este conteúdo. Coloque suas chaves de Firebase.

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. Executar no modo de desenvolvimento

npm run dev

Questões - Planos futuros

• Botões de filtro e classificação
• Otimize funções de consulta de Firestore
• Na página do carrinho, o botão Diminuir o item não está funcionando
• O site será %100 Responsivo
• Substitua algumas tags HTML por tags semânticas

Contribuindo

As contribuições são o que tornam a comunidade de código aberto um lugar tão incrível para aprender, inspirar e criar. Quaisquer contribuições que você faz são muito apreciadas .

1. Bifurcar o projeto
2. Crie seu ramo de recursos ( git checkout -b feature/AmazingFeature )
3. Comprometa suas mudanças ( git commit -m 'Add some AmazingFeature' )
4. Empurre para o ramo ( git push origin feature/AmazingFeature )
5. Abra um pedido de tração

Q&A

• Pergunta: Eu criei o Firebase Project, mas não estou familiarizado com ele. O que devo fazer então? RESPOSTA : Você pode entrar em contato comigo sobre definir seu projeto Firebase, eu ficaria feliz em ajudá -lo.

• Pergunta: Criei o Firebase Project, mas não tenho estrutura de banco de dados. O que devo fazer então? Resposta : Entre em contato comigo para obter a estrutura do banco de dados que eu criei.

• Pergunta: Por que você não compartilhou sua estrutura de banco de dados? Resposta : Eu só quero saber se alguém é interesse neste projeto: D

• Pergunta: Como posso contribuir? Resposta : Isso me deixa feliz mesmo se você apenas estrelar este projeto. Para o código contribui, você pode gastar o repositório e abrir uma solicitação de tração após suas alterações. Qualquer feedback também é importante para mim. Você pode abrir o problema ou me enviar uma mensagem.

• Pergunta: Você projetou a interface do usuário? Resposta : Não, eu não projetei na verdade. Encontrei design de página inicial no Dribbble de Anton Mikhaltsov. Exceto a página inicial, outras opções da interface do usuário são minhas. Enquanto eu fiz este site em tempo limitado, não pensei muito na UI/UX. Então você também pode me dar um comentário sobre o design.

Licença

Distribuído sob a licença GPL. Consulte LICENSE para obter mais informações.

Contato

@anilsenay

Link do projeto: https://github.com/anilsenay/next-e-commerce