O projeto é um E-Commerce chamado ShopEasy que simula um site de vendas a qual possui roupas masculinas, femininas, joalherias e eletrônicos. Nele foi consumido uma API com Axios, a qual possui alguns produtos de cada categoria acima para representar uma loja verídica.
A API utilizada é a Fake Store API que é facilmente encontrada no Google através de uma pesquisa ou no GitHub do criador que está devidamente explicado. Ela possui algumas opções:
-
Produtos: São 20 produtos disponíveis. Ela dá a disponibilidade de visualizar todos os produtos, visualizar um produto em específico, limitar resultado dos produtos, classificar os resultados conforme o que escolher, adicionar novos produtos, atualizar valores dos produtos e deletar algum produto.
-
Categorias: Sâo 4 categorias no total, sendo elas: men's clothing, women's clothing, electronics e jewelery. Ela dá a disponibilidade de filtrar uma categoria em específico ou visualizar todas.
Consumo da API chamada Fake Store, onde as os produtos e suas informações são chamados
Ao clicar em um dos produtos a pessoa terá a opção de selecionar quantos produtos serão adicionados e um botão para adicionar o(s) produto(s) no carrinho.
Ao enviar um produto no carrinho (Fica na parte superior direita do Header) onde ele ficara salvo por meio do LocalStorage, você pode diminuir a quantidade dos produtos, aumentar a quantidade e excluir.
Registro/Login: O visitante tem como criar uma conta no site a qual será armazenada no Firebase e terá a opção de logar depois. A conta é criada com o nome, email, senha e confirmação de senha que possui um sistema de validação dos campos, ou seja, necessita colocar um email válido, colocar um nome que não possua números, senha de no mínimo 6 dígitos e a confirmação de senha deve ser igual em ambos campos.
Componente de busca para procurar um produto especifico, listando os produtos relacionados a busca.
Utilização de UseContext para usuario e adicionar os produtos ao carrinho.
Pagina de Error404 que acontece ao acessar uma rota inexistente.
Responsividade em todos os componentes.
https://shopeasy-ecommerce.vercel.app/
No diretório do projeto, você pode executar:
Instalar as dependências listadas no arquivo package.json do projeto.
Executa o aplicativo em modo de desenvolvimento. Abra http://localhost para visualizá-lo no navegador. A página será recarregada quando você fizer alterações. Você também pode ver quaisquer erros de lint no console.
Inicia o executor de teste no modo de observação interativo. Consulte a seção sobre executando testes para obter mais informações.
Compila o aplicativo para produção na pasta build. Ele agrupa corretamente o React no modo de produção e otimiza a construção para obter o melhor desempenho.
Esse projeto está sob licença. Veja o arquivo LICENÇA para mais detalhes.