• Status detalhado de pedidos recentes.
• Histórico de alertas de estoque.

🏗️ Arquitetura e Decisões Técnicas

O front-end foi construído visando manutenibilidade, tipagem estrita e separação de responsabilidades.

📐 Destaques Arquiteturais

• Context API para Gestão de Estado: Optou-se por não utilizar Redux/Zustand para manter a arquitetura leve. O estado global é segmentado em Contextos específicos (AuthContext, CartContext), suficientes para a complexidade atual da aplicação.
• Camada de Serviço (Service Layer Pattern): Toda a comunicação com a API (Axios) é isolada em serviços (/services). Os componentes de UI desconhecem as URLs ou a lógica HTTP, recebendo apenas dados tipados.
• Custom Hooks: Lógica repetitiva (como verificação de autenticação ou manipulação de formulários complexos) foi abstraída em hooks (useAuth, useCart etc.), mantendo os componentes visuais limpos.
• Interceptor de Autenticação: O Axios foi configurado com interceptors para anexar automaticamente o Token JWT em requisições protegidas e tratar expiração de sessão globalmente.

🛠️ Tecnologias Principais

• Core: React 19 + TypeScript.
• Build & Tooling: Vite.
• UI/UX: PrimeReact (Componentes) + PrimeFlex (Layout System).
• Forms: React Hook Form (Gerenciamento de formulários performático).
• Integração: Axios.

🚀 Funcionalidades

🛒 Jornada de Compra

• Catálogo Dinâmico: Listagem, filtros e busca de instrumentos.
• Carrinho Persistente: Adição/remoção de itens e resumo financeiro em tempo real.
• Checkout Inteligente: Integração com APIs externas para validação automática de endereço via CEP e cálculo de frete em tempo real antes da finalização.

👤 Identidade e Segurança

• Autenticação JWT: Login seguro e rotas protegidas (RequireAuth).
• Recuperação de Acesso: Fluxo de "Esqueci minha senha" com envio de código via e-mail.
• Gestão de Credenciais: Troca de senha e edição de dados cadastrais.

📦 Painel do Usuário

• Meus Pedidos: Acompanhamento de status e histórico detalhado de compras.
• Gestão de Endereços: CRUD completo com implementação de Soft Delete (endereços antigos usados em pedidos não somem, apenas são arquivados).
• Alertas de Estoque: Usuários podem gerenciar seus alertas. Quando um produto volta ao estoque, o sistema dispara notificações automáticas.

📁 Estrutura do Projeto

A organização de pastas favorece a escalabilidade modular:

  /src
  │-- /commons       # Tipos TypeScript compartilhados (Interfaces)
  │-- /components    # Componentes reutilizáveis e específicos (Cards, Buttons etc...)
  │-- /context       # Estado Global (Auth, Cart, Toast)
  │-- /hooks         # Lógica encapsulada (useFreight, useProduct)
  │-- /lib           # Configurações de libs de terceiros (Axios instance)
  │-- /pages         # Views principais (Home, Checkout, Profile)
  │-- /routes        # Definição de rotas e Guardas de Rota
  │-- /services      # Chamadas HTTP para a API Java
  │-- /styles        # CSS Modules e temas globais

⚡ Como Rodar o Projeto

Pré-requisitos

• Node.js (v18+)
• RiffHouse API rodando localmente ou em ambiente de homologação.
• RiffHouse AI rodando localmente ou em ambiente de homologação.

Passo a Passo

1. Clone o repositório

  git clone https://github.com/DarkMatter015/client-ecommerce.git
  cd client-ecommerce

2. Instale as dependências

 npm install

3. Configure as Variáveis de Ambiente Crie um arquivo .env na raiz (baseado no .env.example) apontando para sua API:

 ## localhost:8080
 VITE_API_URL=https://riffhouse-api.onrender.com
 ## localhost:8000
 VITE_API_CHAT_URL=https://riffhouse-chat.onrender.com

4. Execute em modo de desenvolvimento

  npm run dev

👉 Acesse: http://localhost:5173/

👨‍💻 Autor