Estrutura de pastas escalável, organização de componentes e configuração do ambiente de desenvolvimento profissional.
Uma boa arquitetura é fundamental para manter o código organizado, facilitar a manutenção e permitir que a equipe trabalhe de forma eficiente.
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
kebab-case
para pastasorder-details/
, user-settings/
kebab-case.tsx
para componentesorder-form.tsx
, user-avatar.tsx
camelCase.ts
para utilitáriosapiClient.ts
, authHelpers.ts
PascalCase
para componentesOrderForm
, UserAvatar
camelCase
para funçõeshandleSubmit
, formatCurrency
UPPER_CASE
para constantesAPI_BASE_URL
, ORDER_STATUS
{ "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/"] }
{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "lf" }
{ "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"] }
# 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
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": { "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" } }
# 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
Organize seu projeto seguindo a arquitetura proposta:
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
Configure ESLint, Prettier e variáveis de ambiente:
Implemente os primeiros componentes da arquitetura: