Projeto base com arquitetura moderna usando Express para o backend, Next.js para o frontend, TypeScript em ambos, e Docker para containerização.
projetoaccte/
├── backend/ # API Express + TypeScript
│ ├── src/
│ │ └── index.ts
│ ├── package.json
│ ├── tsconfig.json
│ ├── Dockerfile
│ ├── .dockerignore
│ └── .env.example
├── frontend/ # Aplicação Next.js + TypeScript
│ ├── src/
│ │ ├── pages/
│ │ │ └── index.tsx
│ │ └── styles/
│ │ └── home.styles.ts
│ ├── package.json
│ ├── tsconfig.json
│ ├── next.config.js
│ ├── Dockerfile
│ ├── .dockerignore
│ └── .env.local.example
├── docker-compose.yml
├── .gitignore
└── README.md
- Backend: Express 4.18 + TypeScript
- Frontend: Next.js 14 + TypeScript + React 18
- Container: Docker + Docker Compose
- Node.js: 20 (Alpine)
src/
├── index.ts # Arquivo principal com configuração da API
Configuração TypeScript:
tsconfig.json- Configuração do compilador TypeScriptDockerfile- Imagem Docker multi-stage otimizada
src/
├── pages/
│ └── index.tsx # Página Home com integração com backend
└── styles/
└── home.styles.ts # Estilos centralizados (CSS-in-JS)
Configuração TypeScript:
tsconfig.json- Configuração do compilador TypeScripttsconfig.node.json- Configuração para Node (next.config.js)next.config.js- Configuração do Next.js com variáveis de ambiente
cd backend
npm install
npm run devBackend rodará em http://localhost:3001
cd frontend
npm install
npm run devFrontend rodará em http://localhost:3000
- Docker e Docker Compose instalados
# Build e inicia os containers
docker-compose up --build
# Apenas iniciar sem rebuild
docker-compose up
# Parar os containers
docker-compose down
# Parar e remover volumes
docker-compose down -vO projeto estará disponível em:
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001
- Health Check: http://localhost:3001/api/health
PORT=3001
NODE_ENV=development
NEXT_PUBLIC_API_URL=http://localhost:3001
npm run dev- Inicia modo desenvolvimento com ts-nodenpm run build- Compila TypeScript para JavaScriptnpm start- Executa a build compiladanpm run lint- Executa linter
npm run dev- Inicia modo desenvolvimentonpm run build- Build para produçãonpm start- Executa a build de produçãonpm run lint- Executa linter
Os estilos do frontend estão organizados de forma modular na pasta src/styles:
frontend/src/styles/
└── home.styles.ts # Estilos da página Home (CSS-in-JS com React.CSSProperties)
// Em qualquer componente
import { homeStyles } from '@/styles/home.styles';
// Usar os estilos
<div style={homeStyles.container}>
<h1 style={homeStyles.title}>Título</h1>
</div>Vantagens dessa abordagem:
- ✅ Estilos centralizados e reutilizáveis
- ✅ Type-safe com TypeScript
- ✅ Fácil manutenção e organização
- ✅ Separação de responsabilidades
- ✅ Escalável para múltiplos componentes
GET /api/health- Health check do backendGET /api/hello- Retorna mensagem de boas-vindas
O frontend está configurado para se comunicar com o backend via variável de ambiente NEXT_PUBLIC_API_URL. Quando rodando com Docker Compose, usa http://backend:3001 (DNS do Docker), e em desenvolvimento local usa http://localhost:3001.
# Verificar logs
docker-compose logs
# Verificar logs de um serviço específico
docker-compose logs backend
docker-compose logs frontend# Matar processo na porta
lsof -ti:3000 | xargs kill -9
lsof -ti:3001 | xargs kill -9MIT