A FSW Store é uma plataforma de e-commerce de alto desempenho, desenvolvida com o objetivo de demonstrar padrões de arquitetura modernos no ecossistema Full Stack Next.js. O projeto foca em escalabilidade, responsividade impecável e uma experiência de usuário (UX) fluida, integrando pagamentos resilientes e autenticação segura.
Este projeto utiliza o que há de mais moderno no ecossistema React:
- Next.js 15 (App Router): Aproveitamento total de React Server Components (RSC) para performance superior e SEO otimizado, mantendo a interatividade apenas onde necessário.
- Data Fetching Strategy: Uso de Server Effects e Prisma ORM para comunicação direta com o banco de dados, reduzindo a latência de rede e simplificando a lógica de backend.
- Design System com Shadcn/UI: Componentes acessíveis (Radix UI) e estilização modular com Tailwind CSS, garantindo um código limpo e manutenível.
- Padrão de Responsividade: Layouts fluidos baseados no sistema de grades (CSS Grid) e flexbox, com estratégias específicas para Mobile, Tablet e Desktop de alta resolução.
- Catálogo Dinâmico: Renderização híbrida para carregamento instantâneo.
- Carrinho Inteligente: Gerenciamento de estado global via Context API com persistência.
- Checkout Resiliente: Integração nativa com Stripe, tratando estados de sucesso e erro.
- Autenticação SSO: Login social via Google utilizando NextAuth.js.
- Histórico de Pedidos: Visualização detalhada de transações passadas.
- Dashboards: Interface administrativa para monitoramento de vendas e inventário.
A organização segue o padrão de Clean Architecture mínima para Next.js:
fsw-store/
├── prisma/ # Schema e Migrações (Single Source of Truth)
├── public/ # Ativos estáticos e Banners
├── src/
│ ├── app/ # Core da aplicação (Router, Layouts, Pages)
│ │ ├── (shop)/ # Grupo de rotas voltadas ao cliente final
│ │ ├── (admin)/ # Painel administrativo protegido
│ │ └── api/ # Endpoints de API (Webhooks, etc)
│ ├── actions/ # Server Actions para mutações de dados segura
│ ├── components/ # Componentes de UI (Atômicos e Moleculares)
│ │ └── ui/ # Componentes base do Shadcn/UI
│ ├── constants/ # Configurações globais e enums
│ ├── helpers/ # Funções utilitárias e cálculos puros
│ ├── lib/ # Instâncias de clientes e libs externas (Prisma, Stripe)
│ ├── providers/ # Contextos de estado global (Cart, Auth, Theme)
│ └── types/ # Definições de tipos TypeScript compartilhadasPara simular transações no ambiente de desenvolvimento, utilize os seguintes dados:
| Campo | Valor |
|---|---|
| Cartão | 4242 4242 4242 4242 |
| Vencimento | Qualquer data futura (ex: 12/30) |
| CVC | 123 |
| CEP | 12345-678 |
git clone https://github.com/tonelopes/fsw-store.git
cd fsw-store
npm installConfigure o arquivo .env na raiz do projeto:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/fsw_store"
# Stripe
NEXT_PUBLIC_STRIPE_PUBLIC_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET_KEY="whsec_..."
# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="seu_secret_aqui"
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."# Sincronizar o schema com o banco de dados
npx prisma db push
# Popular o banco de dados (Seed) - OBRIGATÓRIO para ver os produtos e categorias
npm run db:seed
# Iniciar o servidor de desenvolvimento
npm run dev- Implementação de Busca Full-Text com filtros avançados.
- Sistema de Avaliação de Produtos (Reviews) com estrelas.
- Modo Escuro (Dark Mode) completo baseado em sistema/preferência do usuário.
- Internacionalização (i18n) para múltiplos idiomas e moedas.
Confira a demonstração ao vivo: FSW Store Production
Desenvolvido com ❤️ por Tonelopes