Fullstack Engineering
A 26-Week Project-Driven Curriculum
[Link] 15 · TypeScript · React 19 · Postgres · Edge & Serverless
Designed for: Rishav
Format: 6 phases · 26 weeks · 8 capstones · 1 production-grade SaaS
Course Overview
This curriculum takes you from solid TypeScript fundamentals all the way to shipping a production-
grade, multi-tenant SaaS application with payments, background jobs, real-time features, AI
integrations, and full observability. The course is structured around six phases, each building on the
previous and ending in a capstone project.
The philosophy is project-first. Every week ships code. Theory is introduced only when needed to
unblock the next build. By week 26 you will have a portfolio of 8 substantial projects and a deep working
knowledge of the modern fullstack ecosystem.
Who This Is For
• Builders who already know basic React and want to go deep on TypeScript, [Link] App Router,
and server-side architecture.
• Founders shipping real products who need to own the stack end-to-end (matches your
CalorieKilla, FlowForge, Coursiv work).
• Engineers transitioning from frontend or backend roles into true fullstack ownership.
Tech Stack
• Language: TypeScript 5.x (strict mode throughout)
• Framework: [Link] 15 (App Router, Server Components, Server Actions, Route Handlers)
• UI: React 19, Tailwind CSS, shadcn/ui, Framer Motion, Radix primitives
• Database: PostgreSQL via Supabase + Drizzle ORM (and a Prisma deep-dive for comparison)
• Auth: [Link] (NextAuth v5), Clerk as an alternative, custom JWT for APIs
• State & data: TanStack Query, Zustand, Server Actions, optimistic updates
• Validation: Zod everywhere — forms, API boundaries, env vars
• Background jobs: Inngest, BullMQ + Redis, cron via Vercel
• Realtime: Supabase Realtime, WebSockets, Server-Sent Events
• Payments: Stripe (subscriptions, usage-based, webhooks)
• AI: Vercel AI SDK, Anthropic SDK, streaming UIs, RAG with pgvector
• Testing: Vitest, Playwright, MSW, Testing Library
• DevOps: Vercel, Docker, GitHub Actions, Sentry, PostHog, OpenTelemetry
How to Use This Course
• Spend 10–15 hours per week. Most weeks have 3 learning days and 2 build days.
• Do not skip the capstones. They are the only thing that consolidates the week's concepts.
• Keep one main repo with branches per week. Deploy every capstone to a live URL.
• Write a short Friday journal — what broke, what surprised you, what you'd do differently.
Phase Summary
Phase Theme Weeks Capstone
1 TypeScript & Modern Weeks 1–3 Type-safe CLI task manager with persistence
JS
2 React 19 & [Link] Weeks 4–7 Markdown-powered personal blog with MDX, RSS,
Foundations search
3 Backend, Database & Weeks 8–12 Linktree-style link aggregator with analytics
Auth
4 Production Patterns Weeks 13–17 Real-time collaborative kanban (Trello-lite)
5 Scaling, Payments & AI Weeks 18–22 AI-powered SaaS with Stripe subscriptions and RAG
6 DevOps, Observability Weeks 23–26 Final: multi-tenant SaaS, fully observable, on custom
& Capstone domain
Phase 1 — TypeScript & Modern JavaScript Mastery
Weeks 1–3. The entire stack is TypeScript-first, so we start by making it second nature. We do not just
learn syntax — we learn how to model real domains with types, how to read library type signatures, and
how to use the type system as a design tool.
Week 1 — JS Foundations You Can't Skip
• Modern JS: ES2024 features, destructuring patterns, optional chaining, nullish coalescing,
spread/rest in depth
• Async deep-dive: promises internally, microtask queue, async/await pitfalls, [Link] vs
allSettled vs race
• Modules: ESM vs CommonJS, dynamic imports, side-effect imports
• Tooling: pnpm, tsx, Biome (or ESLint + Prettier), turborepo basics
• Build: REST client wrapper in pure JS — fetch with retries, timeout, exponential backoff
Week 2 — TypeScript: Beyond `any`
• Type system basics: primitives, literals, unions, intersections, narrowing, type predicates
• Advanced types: generics, conditional types, mapped types, template literal types, infer
keyword
• Utility types: Pick, Omit, Partial, Required, Record, ReturnType, Awaited — when each actually
helps
• Discriminated unions: modeling state machines and API responses correctly
• Build: Port the Week 1 REST client to TypeScript with full generic type inference for response
shapes
Week 3 — Capstone: Type-Safe CLI Task Manager
Build a CLI tool (using Commander or yargs) that manages tasks with categories, priorities, and due
dates. Persist to a local JSON file. The point is not the features — it is the type design.
• Goals: Zero `any`, strict mode on, every public function fully typed with inferred return types
• Skills: Zod for runtime validation of file I/O, exhaustive switch with `never`, branded types for
IDs
• Stretch: Add a `--watch` mode using chokidar; add Vitest unit tests with 90%+ coverage
Phase 2 — React 19 & [Link] Foundations
Weeks 4–7. We rebuild your React mental model around React 19 and Server Components. Most
developers carry React 17/18 habits that actively work against the App Router — we unlearn those first.
Week 4 — React 19 from First Principles
• Mental model: rendering, reconciliation, commit phase, why re-renders happen
• Hooks deep-dive: useState, useEffect (and when NOT to use it), useMemo, useCallback, useRef,
useReducer
• React 19 new: useActionState, useOptimistic, useFormStatus, use() hook, ref as prop
• Patterns: compound components, render props (still useful), controlled vs uncontrolled, lifting
state
• Build: Recreate a complex shadcn component (e.g., Combobox) from scratch using Radix
primitives
Week 5 — [Link] App Router Mental Model
• Routing: file-based routing, dynamic segments, route groups, parallel and intercepting routes
• Server vs Client Components: the actual boundary, what serializes, when to use which
• Data fetching: fetch in Server Components, caching layers, revalidation strategies, dynamic vs
static rendering
• Loading & error UI: [Link], [Link], Suspense streaming, not-found
• Build: Multi-page docs site with nested layouts, dynamic OG images, and ISR
Week 6 — Styling & Component Systems
• Tailwind in depth: design tokens, arbitrary values, plugin system, dark mode strategy
• shadcn/ui: not a library — a methodology. Why owning your components matters
• Animation: Framer Motion (variants, layout animations, gesture), View Transitions API
• Accessibility: semantic HTML, ARIA only when needed, keyboard nav, focus management,
contrast
• Build: Design-system starter — Button, Input, Dialog, Toast, DropdownMenu, DataTable with all
states
Week 7 — Capstone: Personal Blog with MDX
Build a fast, beautiful, content-driven blog. This is where you internalize SSG, streaming, and the content
layer.
• Features: MDX posts with syntax highlighting (Shiki), table of contents, reading time, view
counts
• Infra: RSS feed, sitemap, [Link], dynamic OG images per post, full-text search (Pagefind or
FlexSearch)
• Quality bar: Lighthouse 100 across all categories on mobile, Core Web Vitals all green
• Stretch: Newsletter signup via Resend, comments via Giscus, analytics via PostHog
Phase 3 — Backend, Database & Authentication
Weeks 8–12. Now we own data. Most fullstack developers are weak here — they treat the DB as a black
box behind an ORM. We fix that by writing real SQL first, then layering ORMs, then auth, then API
design.
Week 8 — SQL & PostgreSQL First
• SQL fundamentals: joins (inner, left, full, lateral), aggregates, GROUP BY, HAVING, window
functions
• Postgres specifics: JSONB, arrays, full-text search, generated columns, partial indexes, EXPLAIN
ANALYZE
• Schema design: normalization vs denormalization tradeoffs, soft deletes, audit columns, UUIDs
vs serial IDs
• Transactions: ACID, isolation levels, deadlocks, SELECT FOR UPDATE
• Build: Pure SQL — design and seed a 6-table schema for a marketplace; write 20 queries by
hand
Week 9 — Drizzle ORM & Database in [Link]
• Drizzle deep-dive: schema definition, type inference, relations, query builder vs raw SQL escape
hatches
• Migrations: drizzle-kit, generate vs push, deploying migrations safely, zero-downtime patterns
• Supabase: connection pooling, RLS (row-level security), realtime, storage
• Comparison: Prisma vs Drizzle vs raw SQL — when each wins
• Build: Migrate Week 8 schema to Drizzle; build a [Link] admin UI to CRUD the marketplace data
Week 10 — Server Actions & API Design
• Server Actions: mental model, when to use, security implications, validation with Zod,
revalidatePath/Tag
• Route Handlers: when you actually need REST, OpenAPI generation, versioning strategies
• Forms: progressive enhancement, useActionState, useOptimistic, error handling patterns
• REST vs RPC vs GraphQL: honest tradeoffs (we'll touch tRPC and explain why Server Actions
usually win in [Link])
• Build: Full CRUD admin panel — list, create, edit, delete with optimistic updates and proper
error states
Week 11 — Authentication & Authorization
• Auth concepts: sessions vs JWTs, OAuth 2.0 flow, PKCE, refresh tokens, CSRF
• [Link] v5: credentials, OAuth providers, magic links, session callbacks, middleware-based
protection
• Authorization: role-based (RBAC) vs attribute-based (ABAC), permission tables, middleware
patterns
• Security basics: OWASP top 10 in a [Link] context, rate limiting, CSP headers, secure cookies
• Build: Add full auth to the admin panel — Google + email login, protected routes, role-gated
actions
Week 12 — Capstone: Linktree-Style Link Aggregator
Public-facing product. Users sign up, customize a profile page, add links, see analytics. This integrates
everything from Phase 3.
• Features: username-based public pages, drag-and-drop link reordering, click tracking, basic
analytics dashboard
• Infra: Postgres + Drizzle, [Link], image upload to Supabase Storage, rate limiting on click
endpoint
• Stretch: Custom themes, link scheduling, A/B testing, QR code generation, custom domain
support
Phase 4 — Production Patterns
Weeks 13–17. The gap between a working app and a production app is enormous. This phase teaches
the patterns most tutorials skip: caching, background jobs, real-time, file handling, and testing.
Week 13 — Caching, Performance & Web Vitals
• [Link] caching: Request Memoization, Data Cache, Full Route Cache, Router Cache — the four
layers explained
• Revalidation: time-based, on-demand (revalidateTag, revalidatePath), webhook-driven
• Performance: bundle analysis, dynamic imports, next/image, next/font, Lighthouse
interpretation
• Edge runtime: when it helps, when it hurts, geographic routing
• Build: Take the Linktree app to Lighthouse 95+, measure with Vercel Speed Insights
Week 14 — File Uploads, Storage & Media
• Upload strategies: direct vs proxied uploads, presigned URLs, multipart for large files
• Image handling: Sharp for processing, blurhash placeholders, AVIF/WebP, CDN strategies
• Storage providers: Supabase Storage, Cloudflare R2, S3 — when to pick which
• UploadThing: type-safe file uploads in [Link] as a faster alternative
• Build: Image gallery with drag-and-drop upload, client-side compression, presigned URL flow
Week 15 — Background Jobs & Email
• Why background jobs: request/response is wrong for slow work — emails, AI calls, exports,
webhooks
• Inngest deep-dive: event-driven, durable execution, retries, fan-out, scheduled functions
• Email: Resend + React Email, transactional templates, deliverability basics (SPF, DKIM, DMARC)
• Cron: Vercel Cron, alternatives, idempotency keys
• Build: Newsletter system — weekly digest job, signup confirmation flow, unsubscribe handling
Week 16 — Realtime & WebSockets
• Realtime options: Supabase Realtime, Pusher, Ably, raw WebSockets, Server-Sent Events
• Patterns: presence, broadcast, postgres changes, optimistic UI for realtime
• CRDTs intro: Yjs and Liveblocks for collaborative editing — the right abstraction for collaboration
• Build: Live cursor demo — multiple users see each other's cursors on a shared canvas
Week 17 — Capstone: Real-Time Collaborative Kanban
Trello-lite with real-time multi-user editing. Cards move smoothly across boards even when 5 people are
dragging at once.
• Features: Boards, lists, cards, drag-and-drop, comments, labels, assignees, due dates
• Realtime: Live cursors, optimistic moves with rollback on conflict, presence indicators
• Polish: Keyboard shortcuts, undo/redo, mobile-responsive, offline-tolerant
• Testing: Playwright E2E for drag-and-drop, multi-tab sync test
Phase 5 — Scaling, Payments & AI
Weeks 18–22. SaaS economics. Multi-tenancy. Payments. And AI features that actually feel native, not
bolted-on.
Week 18 — Multi-Tenancy & Workspaces
• Tenancy models: shared DB shared schema (with tenant_id), shared DB separate schema,
separate DB — tradeoffs
• Postgres RLS: row-level security as a defense-in-depth layer
• Subdomains: tenant routing via middleware, wildcard domains on Vercel, custom domains per
tenant
• Invitations: team invites, role assignment, switching workspaces, audit logs
• Build: Convert the Kanban app to multi-workspace with invites
Week 19 — Stripe & Subscriptions
• Stripe concepts: Customers, Products, Prices, Subscriptions, Invoices, Payment Methods
• Checkout flows: Stripe Checkout vs Elements vs Payment Element, subscription vs one-time
• Webhooks: the only source of truth, signature verification, idempotency, replay handling
• Pricing models: flat, per-seat, usage-based metering, free trials, proration, dunning
• Build: Add 3-tier pricing (Free / Pro / Team) to a workspace app — full self-serve flow
Week 20 — AI Integration: Streaming UIs
• Vercel AI SDK: streamText, streamObject, useChat hook, tool calling, structured outputs
• Streaming UX: token-by-token rendering, skeleton states, cancellation, retry
• Provider abstraction: switching between Anthropic, OpenAI, local models without rewrites
• Cost control: token counting, rate limits per user/tier, prompt caching strategies
• Build: Streaming chatbot with tool use (search, calculator, custom function), full chat history
Week 21 — RAG, Embeddings & Vector Search
• Embeddings basics: what they are geometrically, what they're good for, what they're not
• pgvector: indexing strategies (HNSW, IVFFlat), hybrid search (vector + full-text)
• Chunking: semantic chunking, overlap, metadata filtering, recursive splitters
• Evaluation: you can't ship RAG without evals — building a simple eval harness
• Build: "Chat with your docs" feature on a documentation site, with citations
Week 22 — Capstone: AI-Powered SaaS
Production-style mini-SaaS. Pick one of: AI writing assistant, AI customer-support inbox, or AI document
Q&A. Ship it with subscriptions and usage metering.
• Stack: Everything from Phases 1–4 plus Stripe + AI SDK + pgvector
• Must include: Free trial, usage limits per tier, overage handling, billing portal
• Polish: Onboarding flow, empty states, error states, mobile design, marketing landing page
Phase 6 — DevOps, Observability & Final Capstone
Weeks 23–26. The last mile. The difference between a developer and a shipping engineer is everything
in this phase.
Week 23 — Testing Strategy
• Testing pyramid: unit (Vitest), integration (Testing Library + MSW), E2E (Playwright) —
proportions that make sense
• What to test: business logic always, UI behavior selectively, never implementation details
• Test data: factories, seeding, transactional rollback for DB tests
• CI: GitHub Actions, matrix builds, caching, parallel test runs, preview deployments
• Build: Add a real test suite (60%+ coverage on business logic) to the Phase 5 capstone
Week 24 — Observability & Production Readiness
• Logs: structured logging (Pino), log levels, what to log and what NOT to log (PII)
• Metrics: what matters — latency p50/p95/p99, error rate, saturation, business KPIs
• Tracing: OpenTelemetry basics, distributed traces across server actions
• Tools: Sentry for errors, PostHog for product analytics, Axiom or Datadog for logs
• Build: Instrument the capstone — error tracking, performance monitoring, custom event
tracking
Week 25 — Security, Compliance & Deployment
• Security review: auth audit, RLS verification, secret management, dependency scanning
• Headers: CSP, HSTS, X-Frame-Options, Permissions-Policy — what each does
• GDPR basics: data export, deletion, cookie consent, privacy policy essentials
• Self-hosting alternative: Docker, Coolify, Railway — when Vercel isn't the right answer
• Build: Security checklist pass on the capstone — Mozilla Observatory A+ rating
Week 26 — Final Capstone: Ship a Real SaaS
This is the integration of everything. Pick a real product idea (or extend the Phase 5 capstone). Take it
from idea to live, paid product on a custom domain in 7 days.
• Day 1: Scope, schema, design system
• Day 2: Auth, onboarding, core data model
• Day 3: Core feature loop — the one thing the product does well
• Day 4: Payments, usage limits, second-order features
• Day 5: Polish — empty states, error states, mobile, animations
• Day 6: Marketing site, observability, security pass
• Day 7: Deploy to custom domain, write launch post, ship to Product Hunt or X
Appendix A — Daily Schedule Template
A working week, optimized for retention and shipping:
• Monday: Read/watch the week's core material. Take notes in your own words.
• Tuesday: Type out (don't copy-paste) the example code. Break it on purpose, fix it.
• Wednesday: Start the week's build. Get a working skeleton end-to-end.
• Thursday: Deepen the build. Add the hard features.
• Friday: Polish, deploy, journal. What broke? What surprised you?
• Weekend: Optional — read related material, contribute to OSS, or rest.
Appendix B — Curated Resources Per Topic
TypeScript
• Total TypeScript by Matt Pocock (paid, worth every rupee)
• Type Challenges on GitHub for advanced practice
• TypeScript Handbook (official) — read it twice
React & [Link]
• React docs (the new ones at [Link]) — read cover to cover
• [Link] docs — the App Router section especially
• Lee Robinson's YouTube — short, current, accurate
Databases & SQL
• Use the Index, Luke — best free SQL performance resource on the internet
• Designing Data-Intensive Applications by Martin Kleppmann (the only DB book that matters
long-term)
System Design & Scaling
• Pragmatic Engineer newsletter
• High Scalability blog archives
• Theo's [Link] YouTube — opinionated but informed
Appendix C — Project Portfolio Output
By the end of this course you will have shipped, deployed, and documented:
• 1. Type-safe CLI task manager (Phase 1)
• 2. MDX-powered personal blog with 100/100 Lighthouse (Phase 2)
• 3. Full-stack admin panel with auth and RBAC (Phase 3 mid)
• 4. Linktree-style link aggregator with analytics (Phase 3 capstone)
• 5. Newsletter system with Inngest + Resend (Phase 4 mid)
• 6. Real-time collaborative Kanban (Phase 4 capstone)
• 7. AI-powered SaaS with Stripe and RAG (Phase 5 capstone)
• 8. Final multi-tenant production SaaS on a custom domain (Phase 6 capstone)
Each of these is portfolio-worthy. Three of them are good enough to charge real money for. One of them
might genuinely become a business — and that is the point.