Map every request from browser to frontend, API, database, and back before adding abstractions.
Course navigationPhase 00⌄
V01 · Engineering Foundation00Full-Stack Architecture & Orientation01Windows Development Environment & Professional Tooling02Monorepo, pnpm Workspaces & Repository Foundation
V02 · Frontend + Backend Foundations03Next.js Fundamentals04NestJS + Fastify Fundamentals05HTTP, REST & API Engineering06Next.js <-> NestJS Communication
V03 · Database Engineering07PostgreSQL Fundamentals08Supabase PostgreSQL09Prisma 7.9.1 Architecture, Configuration & Migrations10Relational Data Modeling11Persistent Task CRUD API
V04 · Professional Backend12DTOs, Zod & Input Validation13Professional Error Handling14Service & Business Logic Architecture15Filtering, Search, Sorting & Pagination
V05 · Authentication & Security16Authentication Fundamentals17Supabase Authentication18NestJS Authentication Guards19Authorization, Ownership, RBAC & Permissions
V06 · Professional Frontend20Production Application UI21Forms with React Hook Form + Zod22TanStack Query23Professional Frontend State Architecture
V07 · Advanced Application Architecture24Repository Pattern25Optimistic Updates26Realtime27File Uploads & Supabase Storage
Volume 01 · Phase 00
Full-Stack Architecture & Orientation
Explain the complete TaskFlow request path and identify which layer owns presentation, transport, business rules, persistence, identity, and operations.
10lessons + labs
6klesson words
0source references
What you will ship
Phase outcome and project increment
Learning outcome
Explain the complete TaskFlow request path and identify which layer owns presentation, transport, business rules, persistence, identity, and operations.
Concrete deliverable
A one-page architecture map plus an ADR-style note describing the responsibilities of Next.js, NestJS, Prisma, PostgreSQL/Supabase, and supporting infrastructure.
Figure 0.1 — Where this phase lives in TaskFlow
Browser interaction
Next.js presentation boundary
HTTP request
NestJS controller/guard
Service/business rules
Prisma persistence
PostgreSQL
HTTP response
UI update
Instructor mental model
Principles to keep while coding
Keep presentation, business rules, and persistence responsibilities intentionally separated.
Treat TaskFlow as one continuous system so each phase extends an architecture you already understand.
Use version locks as a reproducibility contract, not as a reason to ignore underlying concepts.
Code-along path
Guided phase lab
Do these in order. Each step should end with evidence before the next one starts.
- 01
Draw TaskFlow as boxes and arrows before opening an IDE.
- 02
Label every arrow with what crosses it: props, HTTP JSON, verified identity, Prisma calls, SQL results.
- 03
Write one responsibility and one non-responsibility for each layer.
- 04
Trace create-task from click to database commit and back to the screen.
- 05
Trace one failure: invalid input, missing authentication, forbidden action, database outage.
- 06
Record the architecture decisions that should remain stable through later phases.
Debugging studio
Failures you should know how to diagnose
Failure drill 1
Putting business rules in React components
Predict the symptom, capture evidence at the nearest boundary, change one variable, and verify the same reproduction after the fix.
Failure drill 2
Letting controllers call the database directly everywhere
Predict the symptom, capture evidence at the nearest boundary, change one variable, and verify the same reproduction after the fix.
Failure drill 3
Treating Supabase as one undifferentiated magic backend
Predict the symptom, capture evidence at the nearest boundary, change one variable, and verify the same reproduction after the fix.
Failure drill 4
Choosing infrastructure before defining responsibilities
Predict the symptom, capture evidence at the nearest boundary, change one variable, and verify the same reproduction after the fix.
Watch-order style
Lessons
The source chapters come first. Every phase now ends with a guided build, a debugging workshop, and an independent challenge so reading turns into transferable skill.
015 min023 min035 min043 min052 min064 minLAB3 minLAB2 minLAB2 minLAB2 min
Full Stack Mental Model
TaskFlow Blueprint
2026 Version Manifest
Engineering Workflow
Architecture Atlas
Exercises and Phase Exit
Guided Build Lab
Purpose Explain the complete TaskFlow request path and identify which layer owns presentation, transport, business rules, persistence, identity, and operations.
Debugging Workshop
Goal Learn to diagnose this phase's failures systematically instead of reinstalling packages, changing random configuration, or copying a fix without understanding it.
Phase Synthesis & Independent Challenge
Mission Rebuild the capability of Phase 00 without following the exact code line-by-line. The goal is transfer: can you use the ideas when the variable names, UI, or route shape changes?
Mastery Capstone Lab
Integrate Phase 00 without following a transcript.
Practice ladder
Exercises that increase independence
Guided
Draw TaskFlow as boxes and arrows before opening an IDE.
Practice
Write one responsibility and one non-responsibility for each layer.
Debug
reproduce and diagnose — Putting business rules in React components.
Independent
deliver A one-page architecture map plus an ADR-style note describing the responsibilities of Next.js, NestJS, Prisma, PostgreSQL/Supabase, and supporting infrastructure.
Explain-back
Can trace a request without skipping a layer and Can explain why the API owns rules.
Mastery gate
Do not leave the phase only because you reached the bottom
Phase exit criteria
Knowledge check
Scenario and concept quiz
These questions test engineering choices rather than whether you remember a lesson title.
01Which practice best matches Phase 00's engineering goal?
02Which practice best matches Phase 00's engineering goal?
03Which practice best matches Phase 00's engineering goal?
04Which practice best matches Phase 00's engineering goal?
05You are working through the Phase 00 lab. Which next action is the most disciplined step?
06You are working through the Phase 00 lab. Which next action is the most disciplined step?
07You are working through the Phase 00 lab. Which next action is the most disciplined step?
08You are working through the Phase 00 lab. Which next action is the most disciplined step?