RiffHouse Client é o front-end moderno e responsivo da plataforma de e-commerce RiffHouse. Desenvolvido com React 19, TypeScript e Vite, o projeto oferece uma SPA (Single Page Application) de alta performance focada na experiência do usuário.
Além das funcionalidades tradicionais de e-commerce, este projeto se diferencia pela integração nativa com um Agente de IA e RAG (Retrieval-Augmented Generation), transformando a navegação em uma experiência de compra assistida e personalizada.
🌐 Back-end: Este projeto consome a RiffHouse API.
🎥 Serviço de AI: O projeto utiliza o agente de IA Service AI
A grande inovação da RiffHouse é o seu Assistente Virtual Integrado, projetado não apenas para suporte, mas para conversão de vendas.
- RAG Especializado (Busca Semântica): O chat utiliza RAG para consultar a base de dados de produtos em tempo real. O usuário pode perguntar "Qual a melhor guitarra para tocar metal iniciante?" e o agente analisará as especificações técnicas do catálogo para recomendar o produto ideal.
- Contexto Autenticado: Quando o usuário está logado, o agente reconhece sua identidade, permitindo consultas sobre:
- Status detalhado de pedidos recentes.
- Histórico de alertas de estoque.
- Persuasão Ética: O prompt do sistema foi desenhado para atuar como um vendedor especialista, ajudando a quebrar objeções de compra e destacar os benefícios dos instrumentos.
O front-end foi construído visando manutenibilidade, tipagem estrita e separação de responsabilidades.
- 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,useCartetc.), 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.
- 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.
- 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.
- 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.
- 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.
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- Node.js (v18+)
- RiffHouse API rodando localmente ou em ambiente de homologação.
- RiffHouse AI rodando localmente ou em ambiente de homologação.
- Clone o repositório
git clone https://github.com/DarkMatter015/client-ecommerce.git
cd client-ecommerce- Instale as dependências
npm install- 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- Execute em modo de desenvolvimento
npm run dev👉 Acesse: http://localhost:5173/
|
Lucas Matheus de Camargo Desenvolvedor Full Stack | QA 
|
Feito com ⚛️ e React por Lucas Matheus.