Full‑Stack TypeScript Capstone – React Front‑end + Express Back‑end

Overview

Build a Todo application with a React frontend (TypeScript) and an Express + TypeORM backend (also TypeScript). The project demonstrates:

• Shared type definitions (@myorg/common).
• End‑to‑end type safety (DTOs, API contracts).
• Authentication with JWT.
• Docker Compose for local dev.

Steps

1. Monorepo (packages/frontend, packages/backend, packages/common).
2. Common types (TodoDto, UserJwtPayload).
3. Backend – REST endpoints, JWT auth, TypeORM DB.
4. Frontend – React hooks for fetching, Context for auth state, form validation with zod.
5. Docker Compose:

services:
  api:
    build: ./packages/backend
    ports: ["4000:4000"]
    env_file: .env
  web:
    build: ./packages/frontend
    ports: ["3000:80"]
    depends_on: [api]

6. CI pipeline (GitHub Actions) – lint, test, build Docker images, push to registry.

Deliverables

• Source code on GitHub.
• README with setup instructions.
• Live demo (e.g., Render, Railway, or Fly.io).
• Test coverage > 80%.