O the.closet foi um projeto realizado por mim e pela Carla Valle, durante a última semana do "Módulo 3: back-end e MongoDB", do bootcamp da Driven Education. Trata-se de um e-commerce totalmente idealizado e desenvolvido por nós, desde o layout até os detalhes de cada funcionalidade. O front-end da aplicação foi inteiramente desenvolvido em React.js, utilizando tecnologias/ferramentas como styled-components, axios, ContextAPI e react-router-dom. Já o back-end foi feito em Node.js, utilizando express, para conexão do servidor; a lib JOI, para a validação de inputs; a lib bcrypt, para o armazenamento de dados sensíveis com segurança; e banco de dados NoSQL MongoDB, para armazenamento de dados dos usuários e de produtos.
Teste a aplicação através do link: https://projeto14-the-closet-front.vercel.app/
Essa aplicação foi desenvolvida para dispositivos móveis, através da qual é possível realizar quaisquer funcionalidades encontradas em aplicações similares. Friso que os produtos constantes da aplicação, bem como seus preços, são meramente ilustrativos e, portanto, não é possível realizar quaisquer transações financeiras. Listo, a seguir, as funcionalidades implementadas:
- Cadastro de usuário;
- Login;
- Listagem de todos os produtos existentes, bem como o agrupamento desses em categorias (Masculina, Feminina, Verão, Inverno e Calçados);
- Busca de produtos em página própria ou pela barra de pesquisa na página principal, viabilizada por meio de requisições feitas para o banco de dados (mongoDB);
- Página de produto com sua imagem, preço, cores e tamanhos disponíveis e comentários de usuários;
- Avaliação de produtos através de comentários realizados pelos usuários na página dos produtos;
- Inclusão/Remoção de itens na lista de desejos, através do ícone em formato de coração, presente nos cards de produtos ou em sua página;
- Inclusão/Remoção de itens no carrinho de compras, possibilitando ao usuário escolher a quantidade desejada de cada item;
- Checkout para finalização da compra, no qual são inseridos os dados pessoais/financeiros e o endereço de entrega. Ao fim, é exibida ao usuário uma janela com o resumo do pedido, cujos dados são salvos em banco de dados que serão utilizados, futuramente, na construção de uma página de histórico de compras.
As seguintes ferramentas, tecnologias e frameworks foram utilizadas na construção desse projeto:
- Clone o repositório front-end através do endereço: https://github.com/FilipeGarroteDev/the.closet-front
- Instale as dependências:
npm i- Rode o front-end através do comando:
npm start- Opcionalmente, a build do projeto pode ser feita através do comando:
npm run build- Clone o repositório back-end através do endereço: https://github.com/FilipeGarroteDev/the.closet-back
- Instale as dependências:
npm i- Adicionae, no arquivo .env, na raiz do projeto, a seguinte linha:
PORT = [PORTA DE SUA PREFERÊNCIA]- Rode o back-end através do comando:
node src/index.js- Finalmente, acesse http://localhost:3000 no seu browser favorito (a não ser que seja o Internet Explorer. Nesse caso, você precisa rever suas decisões)