TrybeMarket é um projeto de e-commerce desenvolvido com o objetivo de desafiar e reforçar o meu conhecimento em React e tecnologias relacionadas.
O projeto foi projetado para fornecer aos usuários uma experiência de compra online fácil e agradável.
TrybeMarket
Navegação: React-Router foi usado para facilitar a navegação entre as diferentes páginas do website.
Elemento 3D: Um elemento 3D chamativo foi implementado usando a biblioteca Three.js na página inicial para chamar a atenção dos usuários.
Autenticação: O banco de dados do Firebase foi usado para autenticar usuários via Google. Um sistema de login e cadastro será implementado no futuro.
Carrossel dinâmico: A API fornecida pelo Mercado Livre foi usada para popular a página inicial com itens, e um carrossel dinâmico foi implementado para exibir itens em promoção com base na pesquisa ou categoria do usuário.
Filtros e ordenação: Os usuários podem aplicar filtros para ordenar os itens por ordem alfabética, preço e exibir apenas itens com frete grátis. Os usuários também podem adicionar itens ao carrinho.
Detalhes do produto: Ao clicar na imagem ou título do item na página inicial, o usuário é direcionado para a página de detalhes do produto. Aqui, o usuário pode ver mais detalhes sobre o produto e adicionar ou remover a quantidade do produto. Um sistema de avaliação também foi implementado, onde os usuários podem escrever um comentário sobre o produto, que é salvo com a data e descrição da avaliação e renderizado na página. Os usuários também podem compartilhar o produto no Whatsapp, Facebook e Linkedin.
Carrinho: Os usuários podem ir para a página do carrinho de compras, onde podem modificar a quantidade do item e remover itens. Os usuários também podem ver o preço total de cada item e o preço final da compra.
Pagamento: Os usuários podem ir para a página de pagamento, onde são apresentados com um formulário para inserir seus dados. Uma API é usada para preencher automaticamente os campos de cidade, estado e endereço com base no código postal correto inserido.
Perfil: Os usuários podem ver os detalhes de sua conta e os itens que favoritaram na página de perfil.
Design responsivo: Toda a aplicação foi desenvolvida como 100% responsiva, garantindo a melhor experiência do usuário em dispositivos móveis.
Clone o repositório em sua máquina local.
Instale as dependências necessárias com o comando npm install.
Execute o comando npm start para iniciar o projeto.
Abra o navegador em http://localhost:3000 para visualizar o projeto.
TrybeMarket é um projeto de e-commerce projetado para fornecer uma experiência de compra online fácil e agradável. Ele utiliza diversas tecnologias e ferramentas para fornecer aos usuários recursos como carrosséis dinâmicos, filtros e ordenação, sistemas de avaliação e um design responsivo.