Project Build Roadmap
A hands-on project-building journey from simple static pages to production-ready distributed systems.
Your Progress
Complete all 11 phases to master this track
Hands-on project-building roadmap — 11 phases from static pages to full-stack apps with auth, APIs, real-time features, and production deployment.
Phase 1: Developer Foundations
Set up your development environment, master Git workflows, build responsive sites with HTML/CSS, write vanilla JavaScript, and deploy to GitHub Pages. 6 projects, ~9 hours.
Personal Developer Profile
Build your first HTML page from scratch — a developer profile with bio, skills, and contact info. Deploy to GitHub Pages.
Static Portfolio
Build a multi-section portfolio with CSS Grid, Flexbox, and responsive design. Includes hero, projects, about, and contact sections.
Responsive Landing Page
Build a marketing landing page with CSS custom properties, mobile-first design, and smooth scroll navigation.
Git/GitHub Project
Practice branching, pull requests, code review, and merge conflict resolution.
Simple JavaScript Application
Build a Pomodoro Timer with vanilla JavaScript — DOM manipulation, event listeners, interval timers, and persistent state with localStorage.
API Consumption Project
Build a GitHub User Search app with Fetch API, async/await, error handling, loading states, and debounced search.
Phase 2: Beginner Projects
Build your first interactive apps through progressive enhancement. The same Todo app rebuilt 4 times — vanilla JS, React, Node/Express, then with auth. Plus Weather and Expense Tracker. 7 projects, ~14 hours.
Todo App — Version 1 (HTML/CSS/JS)
Build a todo app with vanilla JavaScript — add, delete, complete, filter, and persist data with localStorage.
Todo App — Version 2 (React)
Rebuild the todo app with React — components, hooks, state management, and component composition patterns.
Todo App — Version 3 (Node/Express/MongoDB)
Add a REST API backend with Express, MongoDB persistence, CRUD endpoints, and connect the React frontend.
Todo App — Version 4 (Authentication)
Add user accounts with JWT authentication, protected routes, and user-specific data isolation.
Weather Application
Build a weather app with real API integration — search by city, display forecasts, loading states, and error handling.
Expense Tracker — Version 1 (React/LocalStorage)
Build a personal finance tracker with charts, categories, budget alerts, and localStorage persistence.
Expense Tracker — Version 2 (Full-Stack)
Add backend persistence with Node/Express, user accounts, CSV export, and recurring expense support.
Phase 3: Early Intermediate
Your first real full-stack applications. Blog platform with rich text editing, URL shortener with analytics and Redis caching, and notes app with real-time collaboration. 3 projects, ~10 hours.
Blog Platform
Build a complete blog with posts, comments, search, pagination, rich text editing, and user authentication.
URL Shortener
Build a URL shortening service with analytics dashboard, Redis caching, rate limiting, and Docker containerization.
Notes Application
Build a note-taking app with folders, tags, sharing, permissions, and real-time collaboration with WebSockets.
Phase 4: Intermediate Full-Stack
Production-grade full-stack apps with multiple features, user roles, and deployment. Multi-phase e-commerce with cart/payments and a Jira-style Kanban board with drag-and-drop. 2 projects, ~10 hours.
E-Commerce Application
Build a multi-phase e-commerce platform with product catalog, shopping cart, checkout flow, order management, and inventory tracking.
Project Management Platform
Build a Jira/Trello-style Kanban board with drag-and-drop, real-time updates, team workspaces, and task assignments.
Phase 5: Advanced Full-Stack
Complex applications with real-time features, media handling, and advanced architecture. Social media with fan-out feeds and a chat app with WebSocket, typing indicators, and multi-instance scaling. 2 projects, ~11 hours.
Social Media Platform
Build a social media platform with user profiles, posts, feeds, follows, likes, comments, and fan-out-on-write architecture.
Real-Time Chat Application
Build a messaging platform with WebSocket connections, typing indicators, message history, read receipts, and multi-instance scaling with Redis.
Phase 6: Production-Ready
Treat projects like real production systems. Add testing, Docker, CI/CD, security hardening, and monitoring. Production e-commerce with full DevOps and a multi-tenant SaaS with RBAC, API keys, and audit logging. 2 projects, ~13 hours.
Production E-Commerce Platform
Add testing (unit, integration, e2e), Docker containerization, CI/CD pipelines, security hardening, rate limiting, and monitoring dashboards.
SaaS Project Management Platform
Build a multi-tenant SaaS with RBAC, API keys, usage limits, audit logging, billing integration, and tenant isolation.
Phase 7: Advanced Backend
Build backend infrastructure systems. Message queues, workers, retry logic, and distributed processing. Notification platform with dead-letter queues and a background job system with scheduling and priorities. 2 projects, ~10 hours.
Notification Platform
Build a notification delivery system with message queues, retry logic, dead-letter queues, delivery tracking, and multi-channel support (email, SMS, push).
Background Job Platform
Build a job processing system with scheduling, priorities, retries, monitoring dashboard, and graceful failure handling.
Phase 8: Distributed Systems
Design and build distributed systems with multiple components, eventual consistency, and failure handling. Distributed rate limiter with Redis and fault tolerance, plus event-driven e-commerce with saga pattern. 2 projects, ~10 hours.
Distributed Rate Limiter
Implement token bucket and sliding window rate limiting with Redis, distributed coordination, and fault tolerance.
Event-Driven E-Commerce
Decompose e-commerce into microservices with event-driven architecture, saga pattern for distributed transactions, and event sourcing.
Phase 9: Scalable Production Systems
Build systems that handle millions of users. Video streaming with upload/processing pipeline and CDN, plus ride sharing with real-time location, geospatial queries, and driver matching. 2 projects, ~13 hours.
Video Streaming Platform
Build a simplified YouTube with video upload, transcoding pipeline, CDN integration, adaptive streaming, and recommendation engine.
Ride Sharing Platform
Build a simplified Uber with real-time location tracking, geospatial queries, driver matching algorithm, and trip management.
Phase 10: Enterprise / Senior
Build enterprise-grade systems with multi-tenancy, RBAC, audit logging, and complex business requirements. Multi-tenant SaaS with advanced reporting and a marketplace with sellers, search, and recommendations. 2 projects, ~13 hours.
Multi-Tenant Enterprise SaaS
Build enterprise SaaS with advanced RBAC, custom reporting, admin controls, disaster recovery, and compliance features.
Marketplace Platform
Build a marketplace with seller onboarding, product catalog, full-text search, recommendation engine, and analytics dashboard.
Phase 11: Senior Capstone
Independently design and build a complex system from business requirements alone. No provided architecture — you make all technical decisions. Design and build a globally scalable marketplace. 1 project, ~10 hours.