🚀 Oferta especial: 60% OFF no CrazyStack - Últimas vagas!Garantir vaga →
Voltar ao Curso
MÓDULO 1
AULA 3

Arquitetura do Projeto

Estrutura de pastas escalável, organização de componentes e configuração do ambiente de desenvolvimento profissional.

30 min
Arquitetura
Organização
🏗️ Arquitetura Escalável

Uma boa arquitetura é fundamental para manter o código organizado, facilitar a manutenção e permitir que a equipe trabalhe de forma eficiente.

Princípios

  • Separação de responsabilidades: Cada pasta tem um propósito
  • Reutilização: Componentes modulares
  • Escalabilidade: Estrutura que cresce bem
  • Manutenibilidade: Fácil de encontrar e modificar
  • Testabilidade: Código fácil de testar

Benefícios

  • Produtividade: Desenvolvimento mais rápido
  • Colaboração: Equipe trabalha melhor
  • Qualidade: Menos bugs e problemas
  • Performance: Otimizações automáticas
  • DX: Melhor experiência do desenvolvedor
Estrutura Completa do Projeto

Árvore de diretórios do Restaurantix Frontend

restaurantix-frontend/
├── public/                          # Arquivos estáticos
│   ├── icons/                      # Ícones da aplicação
│   ├── images/                     # Imagens e logos
│   └── favicon.ico                 # Favicon
├── src/
│   ├── app/                        # App Router (Next.js 14)
│   │   ├── (auth)/                # Grupo de rotas de autenticação
│   │   │   ├── login/             # Página de login
│   │   │   └── layout.tsx         # Layout para auth
│   │   ├── (dashboard)/           # Grupo de rotas do dashboard
│   │   │   ├── dashboard/         # Página principal
│   │   │   ├── orders/            # Gestão de pedidos
│   │   │   ├── products/          # Gestão de produtos
│   │   │   ├── settings/          # Configurações
│   │   │   └── layout.tsx         # Layout do dashboard
│   │   ├── api/                   # API Routes (se necessário)
│   │   ├── globals.css            # Estilos globais
│   │   ├── layout.tsx             # Layout raiz
│   │   ├── loading.tsx            # Loading UI global
│   │   ├── error.tsx              # Error UI global
│   │   ├── not-found.tsx          # 404 page
│   │   └── page.tsx               # Página inicial
│   ├── components/                # Componentes reutilizáveis
│   │   ├── ui/                    # Componentes base (shadcn/ui)
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   └── ...
│   │   ├── layout/                # Componentes de layout
│   │   │   ├── header.tsx
│   │   │   ├── sidebar.tsx
│   │   │   ├── footer.tsx
│   │   │   └── navigation.tsx
│   │   ├── forms/                 # Componentes de formulário
│   │   │   ├── login-form.tsx
│   │   │   ├── order-form.tsx
│   │   │   └── product-form.tsx
│   │   ├── charts/                # Componentes de gráficos
│   │   │   ├── revenue-chart.tsx
│   │   │   ├── orders-chart.tsx
│   │   │   └── metrics-card.tsx
│   │   └── features/              # Componentes específicos
│   │       ├── auth/              # Componentes de autenticação
│   │       ├── orders/            # Componentes de pedidos
│   │       └── dashboard/         # Componentes do dashboard
│   ├── lib/                       # Utilitários e configurações
│   │   ├── utils.ts               # Funções utilitárias
│   │   ├── api.ts                 # Cliente da API
│   │   ├── auth.ts                # Configuração de auth
│   │   ├── validations.ts         # Schemas de validação
│   │   └── constants.ts           # Constantes da aplicação
│   ├── hooks/                     # Custom hooks
│   │   ├── use-auth.ts            # Hook de autenticação
│   │   ├── use-orders.ts          # Hook para pedidos
│   │   ├── use-local-storage.ts   # Hook para localStorage
│   │   └── use-debounce.ts        # Hook de debounce
│   ├── store/                     # Estado global (Zustand)
│   │   ├── auth-store.ts          # Store de autenticação
│   │   ├── orders-store.ts        # Store de pedidos
│   │   └── ui-store.ts            # Store da UI
│   ├── types/                     # Definições de tipos
│   │   ├── index.ts               # Tipos gerais
│   │   ├── auth.ts                # Tipos de autenticação
│   │   ├── orders.ts              # Tipos de pedidos
│   │   └── api.ts                 # Tipos da API
│   └── styles/                    # Estilos adicionais
│       └── components.css         # Estilos de componentes
├── .env.local                     # Variáveis de ambiente locais
├── .env.example                   # Exemplo de variáveis
├── .gitignore                     # Arquivos ignorados pelo Git
├── .eslintrc.json                 # Configuração ESLint
├── .prettierrc                    # Configuração Prettier
├── components.json                # Configuração shadcn/ui
├── next.config.js                 # Configuração Next.js
├── package.json                   # Dependências e scripts
├── tailwind.config.ts             # Configuração Tailwind
├── tsconfig.json                  # Configuração TypeScript
└── README.md                      # Documentação do projeto
Convenções de Nomenclatura

Arquivos e Pastas

kebab-casepara pastas
Ex: order-details/, user-settings/
kebab-case.tsxpara componentes
Ex: order-form.tsx, user-avatar.tsx
camelCase.tspara utilitários
Ex: apiClient.ts, authHelpers.ts

Componentes

PascalCasepara componentes
Ex: OrderForm, UserAvatar
camelCasepara funções
Ex: handleSubmit, formatCurrency
UPPER_CASEpara constantes
Ex: API_BASE_URL, ORDER_STATUS
Configurações de Desenvolvimento

.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn",
    "prefer-const": "error",
    "no-var": "error",
    "object-shorthand": "error",
    "prefer-template": "error"
  },
  "ignorePatterns": ["node_modules/", ".next/", "out/"]
}

.prettierrc

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

tsconfig.json (paths configurados)

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/hooks/*": ["./src/hooks/*"],
      "@/store/*": ["./src/store/*"],
      "@/types/*": ["./src/types/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
Variáveis de Ambiente

.env.example

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3333
NEXT_PUBLIC_APP_NAME=Restaurantix
NEXT_PUBLIC_APP_VERSION=1.0.0

# Authentication
NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:3000

# Database (se usar Prisma)
DATABASE_URL="postgresql://user:password@localhost:5432/restaurantix"

# External Services
RESEND_API_KEY=your-resend-api-key
UPLOADTHING_SECRET=your-uploadthing-secret
UPLOADTHING_APP_ID=your-uploadthing-app-id

# Analytics (opcional)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_HOTJAR_ID=1234567

# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=false
NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true

src/lib/env.ts (validação de env)

import { z } from 'zod'

const envSchema = z.object({
  NEXT_PUBLIC_API_URL: z.string().url(),
  NEXT_PUBLIC_APP_NAME: z.string().min(1),
  NEXT_PUBLIC_APP_VERSION: z.string().min(1),
  NEXTAUTH_SECRET: z.string().min(1),
  NEXTAUTH_URL: z.string().url(),
})

export const env = envSchema.parse({
  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
  NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION,
  NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
  NEXTAUTH_URL: process.env.NEXTAUTH_URL,
})

// Uso: import { env } from '@/lib/env'
// const apiUrl = env.NEXT_PUBLIC_API_URL
Scripts Úteis

package.json (scripts)

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "clean": "rm -rf .next out node_modules/.cache",
    "analyze": "ANALYZE=true next build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

Comandos para desenvolvimento

# Desenvolvimento
npm run dev              # Iniciar servidor de desenvolvimento
npm run type-check       # Verificar tipos TypeScript
npm run lint            # Verificar problemas de código
npm run format          # Formatar código

# Build e Deploy
npm run build           # Build para produção
npm run start           # Iniciar servidor de produção
npm run analyze         # Analisar bundle size

# Manutenção
npm run clean           # Limpar cache e builds
npm audit fix           # Corrigir vulnerabilidades
npm outdated            # Verificar dependências desatualizadas
🎯 Exercício Prático

Organize seu projeto seguindo a arquitetura proposta:

1. Criar estrutura de pastas

Execute os comandos para criar toda a estrutura:

mkdir -p src/{components/{ui,layout,forms,charts,features/{auth,orders,dashboard}},lib,hooks,store,types,styles}
touch src/lib/{utils,api,auth,validations,constants,env}.ts
touch src/hooks/{use-auth,use-orders,use-local-storage,use-debounce}.ts
touch src/store/{auth-store,orders-store,ui-store}.ts
touch src/types/{index,auth,orders,api}.ts

2. Configurar ferramentas de desenvolvimento

Configure ESLint, Prettier e variáveis de ambiente:

  • • Copiar configurações do ESLint e Prettier
  • • Criar arquivo .env.local com suas variáveis
  • • Testar comandos de lint e format
  • • Configurar paths no tsconfig.json

3. Criar componentes base

Implemente os primeiros componentes da arquitetura:

  • • Header com navegação
  • • Sidebar para o dashboard
  • • Layout principal
  • • Componente de loading

💡 Dicas de arquitetura:

  • • Mantenha componentes pequenos e focados
  • • Use barrel exports (index.ts) para facilitar imports
  • • Documente decisões arquiteturais importantes
  • • Revise a estrutura regularmente conforme o projeto cresce