Step 29 of 29
Build and ship a task manager with React, NestJS, MongoDB, JWT auth, tests, and Docker deployment
Workshop: TaskFlow — fullstack task manager ครบทุกอย่างที่เรียนมา (auth, CRUD, tests, Docker)
Build and ship TaskFlow, a fullstack task management app: React frontend, NestJS API, MongoDB persistence, JWT auth — running on Bun, tested, and deployable with Docker.
This workshop uses everything from the path. There is no starter code; every decision is yours.
JwtAuthGuard; users see only their own datatitle (1–200 chars), priority (low | high), optional dueDate?priority=/login — login + signup forms (react-hook-form + Zod) with field-level errors/ — task list: add form, filter tabs, complete/delete actions, loading and empty states via useQueryRequireAuth wrapper redirects unauthenticated users to /login (remembering the origin), sends them back after loginlocalStorage; mutations invalidate ['tasks']Design the schema yourself. Minimum shape:
users { email (unique), passwordHash, name }
tasks { title, priority, dueDate, completed, user (ref → users), timestamps }
Justify one embed-vs-reference decision in your README (e.g., why user is a reference, not embedded).
DTOs with class-validator — the Validation Pipe (whitelist: true) is required:
| Method | Path | Auth | Notes |
|---|---|---|---|
| POST | /auth/signup | no | 201 + token, 409 if email exists |
| POST | /auth/login | no | 200 + token, or 401 |
| GET | /tasks | yes | mine only, ?priority= |
| POST | /tasks | yes | 201, 400 on invalid |
| PATCH | /tasks/:id | yes | complete/reopen; 404 if not mine |
| DELETE | /tasks/:id | yes | 404 if not mine |
server/ — feature modules (auth/, tasks/, users/) each owning controller, service, DTOs, schema, repository; MongooseModule.forRootAsync from ConfigService; config via getOrThrow onlyfrontend/ — lib/api.ts typed fetch wrapper with token injection, query keys module, features organized by domain/api in development; nginx /api proxy in production — no CORS in either environment/tasks returning fixtures + Vite React app, Mongo via Compose → verify: both dev servers running, one endpoint round-tripRequireAuth → verify: signup → refresh → still signed in; task routes 401 without token/api proxy and history fallback, root Compose file → verify: docker compose up --build gives a working app on :80server/ + frontend/, each starting with one commandbunx vitest run and the supertest suite)docker compose up --build serving the full app.env.example committed), your embed-vs-reference justification, what you would build nextany on the API boundary (DTOs in, response shapes out)docker compose up --build → working appPrevious
Deployment with Docker
Final step