Track · ~10 months · 42 nodes

Full-Stack.

Frontend + Backend depth, with the seams that connect them.

Foundations

What full-stack means and the request lifecycle end to end.

  1. What is full-stack?The role, the stack, and what 'owning a feature' means.
  2. Request lifecycle end to endFollowing one request from a click to the database and back.
  3. The client-server contractHTTP, JSON, and the agreement both halves must honor.
  4. Dev environment setupRunning client, server, and database together locally.
  5. Git workflowBranches, PRs, and shipping across frontend and backend.

Frontend essentials

Enough frontend to build the client half well.

  1. HTML & CSS foundationsSemantic markup and layout, the client's visible half.
  2. JavaScript & TypeScriptThe one language that runs both ends of your stack.
  3. React fundamentalsComponents, props, and state for the client.
  4. UI state & formsControlled inputs, validation, and form UX on the client.
  5. Client-side data fetchingCalling your API, loading states, and caching with TanStack Query.

Backend essentials

Enough backend to build the server half well.

  1. Node & the runtimeThe server-side JS runtime and the event loop.
  2. Building an APIRoutes, handlers, and returning JSON from the server.
  3. DatabasesRelational basics and storing your app's data.
  4. ORMs & queriesPrisma or Drizzle: typed database access from TypeScript.
  5. Server-side validationNever trusting the client — validating at the boundary.

The seam

Where frontend meets backend — the full-stack core.

  1. End-to-end TypeScriptOne type system from database row to React prop.
  2. Shared types & validationOne source of truth for shapes on client and server, via Zod.
  3. Contracts with tRPCTypesafe client-server calls with no schema duplication.
  4. SSR & data flowServer vs client rendering and where data is fetched.
  5. Errors across the stackOne error reaching from server failure to client UI.
  6. Monorepos with TurborepoOne repo for client, server, and shared packages.

Data layer

Modeling, migrations, uploads, and realtime across the stack.

  1. Data modelingDesigning schemas your whole app can live with.
  2. Migrations & seedingEvolving the schema safely and seeding dev data.
  3. Caching strategiesWhere to cache across the stack, and invalidation.
  4. File uploads end to endFrom a file picker to object storage and back.
  5. Realtime full-stackWebSockets and live updates from server to UI.

Auth & sessions

Identity that spans client and server.

  1. Full-stack auth flowLogin from form to session to protected data, end to end.
  2. Sessions & cookiesKeeping a user logged in across requests, securely.
  3. OAuth & social loginLog in with Google/GitHub using a library, done right.
  4. Authorization & rolesWho can do what, enforced on the server every time.

Production

Ship, test, monitor, and tune the whole app as one.

  1. Deployment as one unitShipping client, server, and database together.
  2. Environment & configEnv vars, secrets, and dev/staging/prod parity.
  3. E2E testing with PlaywrightTesting the whole app the way a user actually uses it.
  4. Monitoring full-stackErrors and metrics from the browser through the server.
  5. Performance end to endFrom Core Web Vitals to slow queries, the whole chain.
  6. CI/CD for full-stackTest, build, and deploy both halves on every push.

Beyond the basics

Next.js depth, system design, and the job hunt.

  1. Next.js full-stackServer actions, route handlers, and the all-in-one frame.
  2. Working with AI toolsBuilding across the stack with AI without shipping bugs.
  3. Full-stack system designDesigning a whole app: data, API, client, and deploy.
  4. Scaling considerationsWhere a full-stack app strains first, and what to do.
  5. Portfolio projectsShipping full apps that prove you can own a feature.
  6. Get hired (full-stack)Portfolio, resume, and interviews spanning both halves.

Outcomes

When you finish this track:

Schedule

~272 hours total.

At 8–10 hours a week, that’s about 10 months. Each stage has its own pace.

  1. Foundations5 nodes1722h
  2. Frontend essentials5 nodes4862h
  3. Backend essentials5 nodes3647h
  4. The seam6 nodes3951h
  5. Data layer5 nodes2634h
  6. Auth & sessions4 nodes2330h
  7. Production6 nodes3039h
  8. Beyond the basics6 nodes5369h