Live Coding Boilerplate — Fullstack (TypeScript, React, Node)

Este repositório contém um boilerplate para um live coding fullstack usando:

• Backend: TypeScript, Node, Express, CORS
• Frontend: TypeScript, React, Vite

Estrutura

backend/
  src/
    data/products.ts       # mock de produtos
    utils/paginate.ts      # função de paginação já pronta
    index.ts               # servidor Express + CORS e healthcheck
  package.json
  tsconfig.json

frontend/
  src/
    components/Pagination.tsx  # componente de paginação pronto
    services/products.ts       # service de produtos (chamadas à API)
    App.tsx                    # ponto de entrada da UI
    main.tsx
  index.html
  package.json
  tsconfig.json
  vite.config.ts

.gitignore
README.md

Objetivo do live-coding

Implementar uma listagem de produtos com paginação.

Backend (Express + TS)

• Criar uma rota GET /api/products que retorna produtos mockados com paginação.
• Observações:
  • Use o mock de produtos em backend/src/data/products.ts.
  • A função de paginação já está implementada em backend/src/utils/paginate.ts e recebe (page, limit).
  • A rota deve aceitar query params page e limit.
  • Retorne no formato:

    {
      "data": [
        /* produtos */
      ],
      "page": 1,
      "limit": 10,
      "total": 30,
      "totalPages": 3
    }

Frontend (React + Vite + TS)

• Integrar a listagem consumindo a rota criada no backend.
• Exibir uma listagem simples dos produtos (nome, imagem, preço, descrição).
• Usar o componente de paginação pronto em frontend/src/components/Pagination.tsx para controlar a página atual.
• O service frontend/src/services/products.ts já está criado para chamar a rota do backend.

Como rodar

Em dois terminais separados:

1. Backend:

cd backend
npm install
npm run dev
# Servirá em http://localhost:3000

2. Frontend:

cd frontend
npm install
npm run dev
# Abrirá em http://localhost:5173

Certifique-se de que o backend esteja rodando com CORS liberado para http://localhost:5173

Dicas rápidas

• A função paginate<T>(items, page, limit) já faz o slice da lista mockada e retorna { data, page, limit, total, totalPages }.
• Evite overengineering; foque em entregar a listagem com paginação funcional.