Real-World Projects Roadmap

Where TaskFlow fits

TaskFlow is project #1 of a seven-project Real-World Projects series. Each project takes a different real application and rebuilds it from an empty repo, deliberately drawing on a different slice of the Learn Hub courses — so that, taken together, the seven cover almost the entire catalog. TaskFlow gives you a Rust backend, PostgreSQL, Redis, a WebSocket realtime layer, an Astro front end, and Docker Compose. The projects below take you across the rest of the map: other languages, other databases, message queues, mobile, micro-frontends, the offline web, and real cloud infrastructure.

All seven projects are live. TaskFlow is the place to start; the six below are where you go next.

DevBlog — headless CMS + blog ✅ live

A content platform: authors write posts in a headless CMS, and a fast public blog renders them. You’ll model content, expose it over a GraphQL API, and render it with server-side rendering and incremental static regeneration.

Stack: Node/NestJS + MongoDB + GraphQL + Next.js
Adapts: Node.js Deep Dive, MongoDB, GraphQL, Next.js, React, Design Patterns, Refactoring

ShopMicro — e-commerce microservices ✅ live

An online store split into independent services (catalog, orders, payments, notifications) that talk over gRPC and coordinate an order flow through event streaming. You’ll decompose a domain into services and run them on Kubernetes.

Stack: Go + gRPC + PostgreSQL + Kafka + RabbitMQ + Kubernetes
Adapts: Go Deep Dive, Go for TypeScript Developers, gRPC, Microservices, Kafka, RabbitMQ, Kubernetes

FitTrack — mobile-first fitness app ✅ live

A workout tracker with a native mobile app and a web companion, backed by a Python API and a managed Postgres/auth platform. You’ll build the same product for two clients and share one backend.

Stack: Python/FastAPI + Supabase + Flutter + Svelte
Adapts: Python Deep Dive, Python for TypeScript Developers, Supabase, Flutter (×2), Svelte

Mosaic — micro-frontend storefront ✅ live

A storefront composed of independently deployed micro-frontends: a React shell composes React, Svelte, and Astro remotes at runtime with Module Federation, Web Components are the universal boundary between frameworks, and each slice owns its UI and a thin BFF. You’ll build a shared design system, cross-slice communication, host-owned routing, resilience when a remote is down, and per-slice deployment — where ShopMicro split a backend into independent services, Mosaic splits a frontend into independent apps.

Stack: Module Federation 2.0 + React + Svelte + Astro + Web Components + Hono
Adapts: Astro Deep Dive, Astro for React Developers, React Deep Dive, Svelte Deep Dive, Svelte for React Developers, Web Components

OfflineNotes — offline-first PWA ✅ live

A note-taking app that works with no network at all: notes live in the browser and sync when you come back online. You’ll build reusable Web Components, store data in IndexedDB, speed up a hot path with WebAssembly, and ship it as an installable PWA.

Stack: TypeScript + Web Components + IndexedDB + WebAssembly + Astro
Adapts: TypeScript, Web Components, Browser Storage, PWA, WebAssembly, Web for Designers

CloudDeploy — infra capstone ✅ live

The capstone: take ShopMicro, the microservices system from project #3, and deploy it for real. You’ll provision cloud infrastructure as code across three clouds, run it on Kubernetes, add authentication, feature flags, and observability.

Stack: Terraform/Terragrunt (AWS/GCP/Azure) + Kubernetes + Datadog + Keycloak + GrowthBook
Adapts: Terraform (×3), Kubernetes, Datadog, Keycloak, GrowthBook

Start here

All seven are live, so you can build them in any order — but if you’re new to the series, start with TaskFlow: head to the Overview and start from an empty repo.