E-Commerce - Front-End

O projeto de aplicação front-end de E-Commerce, com design responsivo utilizando tecnologias como Tailwind CSS e algumas funcionalidades essenciais. As tecnologias base de sua construção foram React, Vite, TypeScript e Zustand.

Visão Geral

Este projeto é uma implementação simplificada de cliente para uma loja online. Ele oferece uma experiência de usuário fluida e interativa, desde a navegação e filtragem de produtos até o processo de checkout seguro. A arquitetura foi projetada para ser modular, escalável e de fácil manutenção.

Gerência de estado

A utilização do Zustand, por conta de adota uam forma simples sem a criar uma "store" (um contêiner de estado e ações), utilizando apenas a função create. Não há necessidade de Context.Providers, actions e reducers em arquivos separados, como é comum em outras bibliotecas como Redux. A forma simple de separar cada store de forma modular sendo fácil encontrar e modificar lógicas de estado, pois elas estão contidas em seus próprios módulos. E um ponto importante, são os middlewares como o persist é usado para sincronizar o estado da store com o localStorage. O uso do TailwindCss foi pela agilidade e também para testar a tecnologias em si, a configuração e bem simples e uso não é complexo e torna rapido a estilização, ainda cheguei a cogita o uso scss module, mas seria bem mais custoso. Não utilizei o reack-Hook-form por conta inicialmente não considerei adicionar as validações nos campos, mas depois vir a necessidade mas tinha feito de forma bem manual e tinha pouco tenho para refatoraçoões e deixei como está.

Detalhes do planejamento

✨ Funcionalidades Principais

• Autenticação de Usuário: Sistema completo de Login e Cadastro de novos usuários utilização tokem jwt.
• Navegação Protegida: Acesso a páginas restritas somente para usuários autenticados, com redirecionamento automático.
• Listagem de Produtos Dinâmica:
  • Busca por nome.
  • Filtros por faixa de preço minimo e maximo, origem do produto Brasileiro/Europeu e por desconto.
  • Ordenação por preço (menor para o maior e vice-versa).
  • Paginação para uma navegação eficiente entre os produtos.
• Carrinho de Compras Interativo: Adicione, remova e visualize produtos em um carrinho de compras que atualiza o valor total em tempo real. O estado do carrinho persiste mesmo se a página for recarregada.
• Painel de Favoritos: Salve seus produtos preferidos em um painel de acesso rápido.
• Histórico de Compras: Visualize todas as suas compras anteriores em um painel dedicado.
• Avaliação de Produtos: Deixe sua avaliação nos produtos comprados, na seção historico de comprar (apenas nota).