🚀 Projeto Final Avançado: E-commerce “TecLoja 04” (Enterprise Stack)
Bem-vindo à versão corporativa definitiva do nosso projeto e-commerce de tecnologia!
Na TecLoja 03, construímos uma base sólida utilizando NestJS no backend e React (Vite SPA) no frontend. Agora, na TecLoja 04, elevaremos a arquitetura do frontend ao padrão máximo da indústria utilizando Next.js (App Router).
Por que Next.js?
Em um E-commerce real, SEO (Search Engine Optimization) e tempo de carregamento inicial (LCP) são vitais para o negócio. Single Page Applications (como a TecLoja 03) não são indexadas eficientemente pelo Google. O Next.js resolve isso nativamente com Server-Side Rendering (SSR) e provê uma camada de segurança brutal agindo como um BFF (Backend-For-Frontend), ocultando os tokens de autenticação (JWT) em cookies inacessíveis pelo navegador.
🛠️ Stack Tecnológica Enterprise
- Backend (Repositório 1): NestJS, TypeScript, Prisma ORM, PostgreSQL (Neon).
- Frontend (Repositório 2): Next.js 14+ (App Router), React Server Components (RSC), TypeScript.
- Design & UI: TailwindCSS, Shadcn/UI (opcional), Lucide Icons.
- State Management: Zustand (Client-side) e Server Actions (Server-side).
- Segurança: NextAuth.js ou JWT nativo em HttpOnly Cookies, Bcrypt.
- DevOps: Jest, Docker Multi-stage (Standalone Node), GitHub Actions (Render / Vercel).
📚 Índice de Módulos (Passo a Passo)
Parte I: Arquitetura e Modelagem
- Módulo 00: Introdução, Arquitetura Multirepo SSR e Mermaid
- Módulo 01: Modelagem de Dados com Prisma ORM e PostgreSQL
Parte II: A API NestJS (Backend Core)
- Módulo 02: CRUD de Categorias e Arquitetura Limpa no NestJS
- Módulo 03: Catálogo de Produtos e Validação de DTOs
- Módulo 04: Transações ACID e Faturamento de Pedidos
- Módulo 05: Segurança Corporativa com JWT e Guards
Parte III: O Frontend Next.js (App Router)
- Módulo 06: Setup Next.js, Server Components e TailwindCSS vs CSS Puro
- Módulo 07: Autenticação Segura via BFF (Cookies HttpOnly) e Layout
- Módulo 08: Carrinho com Zustand, Checkout (Server Actions) e CRUD Admin
Parte IV: Entrega Contínua (DevOps)
Parte V: Expansão Mobile/PWA
- Módulo 10: Transformando Next.js em PWA (Progressive Web App)
- Módulo 11: Cache Offline com Service Workers, Tela Fallback e Sincronização
- Módulo 12: Notificações Push, Prompt de Instalação e Empacotamento TWA (Bubblewrap)
- Módulo 13: QA - Garantia de Qualidade com Testes E2E (Playwright) no Next.js e NestJS
[!TIP] Dica de Estudo: Este guia foi desenhado para ser percorrido sequencialmente. Certifique-se de compreender totalmente os diagramas de arquitetura e fluxo de dados que inserimos nas seções teóricas de cada módulo!