Lasso é uma loja virtual full stack completa onde os usuários podem criar conta e fazer login, adicionar produtos ao carrinho, fazer compras, filtrar produtos por categoria, nome, marca, ver a lista de pedidos e etc. O projeto conta com uma dashboard Admin, onde a conta de adiminstrador selecionada pode adicionar novos produtos ao banco de dados, editar e remover produtos.
- Usuários podem criar conta, fazer login e recuperar a senha perdida
- Usuários podem adicinar produtos ao carrinho e alterar a quantidade de produtos desejada
- O Usuário pode ver a lista de pedidos, status do pedido, dar nota ao pedido e fazer uma avaliação
- Sistema de paginação automático
- Filtro de produtos por marca, relevância, nome, ordem, preço e etc.
- O administrador pode adicionar novos produtos pela dashboard, com upload de imagens para o armazenamento do Firebase
- O administrador pode ver a lista completa dos produtos, e atualizar o status do pedido.
- O administrador pode modificar os produtos como desejar, incluindo alterar a imagem, que remove a imagem antiga do banco de dados e substitui por outra nova, e remover produtos da lista.
| Nome | Descrição |
|---|---|
| React | Maior framework JavaScript, criada pelo grupo Facebook |
| Firebase | Serviço de back end na nuvem da Google |
| Firestore | Serviço de banco de dados e armazenamento na nuvem da Google |
| Redux | Biblioteca para armazenamento global de estados de componentes JavaScript. |
| Stripe | Serviço de pagamentos online com uma API de pagamentos back end |
| Nodejs | Ambiente de execução para back end em JavaScript |
| Express | Uma das mais populares frameworks para Nodejs |
| Nome | Descrição |
|---|---|
| EmailJS | Ferramenta para envio e recebimento de emails pelo front-end |
| Módulos Sass | Uma forma de escrever Sass que simplifica o código e ajuda da refatoração |
| Notiflix | Biblioteca de notificações em formato de 'popups' |
| React toastify | Biblioteca de caixa de notificações e informações |
O Stripe provê um cartão de crédito teste para comprar os produtos, que você pode usar para testar a função de checkout.
Use uma data futura válida, como 12/34.
Use qualquer CVC de três dígitos.
Use qualquer valor nos outros campos do formulário.
Para ter uma cópia do site funcionando locamente no seu computador, siga esses passos simples:
Passo 1:
- Faça um fork desse repositório e clone no seu computador, ou baixe o código em formato de zip e extraia.
- Tenha instalado em seu sistema os requisitos globais de uso: Node e npm.
- Abra a pasta do projeto com o terminal ou pelo vscode e execute o comando npm i para instalar todas as dependências.
Passo 2:
- Crie uma conta no serviço Firebase da google e inicie um novo projeto para ter acesso ás chaves de acesso necessárias.
- Inicie um serviço de Firestore pela sua conta da Firebase.
Passo 3:
- Crie um arquivo chamado .env na pasta principal do site, 'pasta root'.
- Adicione o trecho de código substituindo 'sua-chave-aqui' pelas respectivas chaves que foram passadas para você após a criação da conta do Firebase
REACT_APP_API_KEY=sua-chave-aqui
REACT_APP_APP_ID=sua-chave-aqui
REACT_APP_AUTH_DOMAIN=sua-chave-aqui
REACT_APP_MESSAGING_SENDER_ID=sua-chave-aqui
REACT_APP_PROJECT_ID=sua-chave-aqui
REACT_APP_STORAGE_BUCKET=sua-chave-aqui
Isso será o que vai te dar acesso á sua conta da Firebase e o serviço da Firestore.
Passo 4:
- Crie uma conta de testes grátis no Stripe para ter acesso ás chaves para o serviço de pagamento.
- Na dashboard do Stripe, revele e copie as chaves 'publicável' e 'secreta'.
- No seu arquivo .env criado no passo anterior, adicione o trecho de código abaixo substituindo 'sua-chave-aqui' pelas respectivas chaves do Stripe.
REACT_APP_STRIPE_PUBLIC_KEY=sua-chave-aqui
REACT_APP_STRIPE_SECRET_KEY=sua-chave-aqui
Passo 5:
- Para iniciar o servidor, digite npm run start:server no seu terminal dentro da pasta do projeto.
- Para iniciar o front end, digite npm run start:front, recomendo que inicie o servidor primeiro e espere o primeiro iniciar antes de iniciar o segundo.
Para acessar a Dashboard de administrador crie uma conta no site normalmente com o email de sua escolha para ser o email do Admin, depois adicione mais uma linha de código no seu arquivo .env substituindo 'sua-conta-admin' pelo email que você criou.
REACT_APP_ADMIN_EMAIL=sua-conta-admin
Recomendo que use um email real para ter a funcionalidade de recuperação de senha
O formulário de contato foi construído usando o EmailJS, um conjunto de ferramentas de envio e recebimento de emails que usa o front-end, sem a necessidade de um servidor. Para começar, acesse o site do EmailJS e crie uma conta gratúita. Após isso siga os seguintes passos:
- Na dashboard do EmailJS, clique em 'Add New Service', escolha o provedor de email de sua preferência e conecte, nesse caso, eu ultilizei o Gmail.
- Anote a Service ID.
- Ainda na dashboard, vá até 'Email Templates', clique em 'Create New Template' e faça um modelo de email de sua preferencia, esse será o modelo que você irá receber com as informações que o cliente passar no formulário, as referências precisam ser iguais ao atributo name='valor' dos inputs, vou deixar um exemplo de como eu fiz o meu abaixo:
- Após feito isso, anote o Template ID
- Agora a última chave que você vai precisar, vá no menu de navegação, clique no seu nome de usuário para entrar nas configurações, na aba 'General', anote sua Public Key.
- No seu arquivo .env, adicione o trecho de código abaixo substituindo 'sua-chave-aqui' pelas respectivas chaves do EmailJS, na seguinte ordem: Pública, Service e Template.
REACT_APP_EMAILJS_PUBLIC_KEY=sua-chave-aqui
REACT_APP_EMAILJS_SERVICE_ID=sua-chave-aqui
REACT_APP_EMAILJS_TEMPLATE_ID=sua-chave-aqui
Criado e distribuído sob a licença MIT, veja LICENSE.txt para mais informações.
Este é um projeto em construção!
As contribuições são o que torna a comunidade de código aberto um lugar incrível para aprender, se inspirar e criar. Qualquer contribuições que você fizer são muito apreciadas.
Se você tiver uma sugestão para melhorar o projeto, faça um fork do repositório e crie uma solicitação pull. Você também pode simplesmente abrir uma issue com a tag "melhoria". Se puder, por favor, dê para dar uma estrela ao projeto! Obrigado.
