Project Build Roadmap
A hands-on project-building journey from simple static pages to production-ready distributed systems. The goal is not to complete projects — it is to develop independent engineering ability.
DSA
8 phases
Java
11 phases
SQL
9 phases
Frontend
14 phases
Backend
20 phases
MERN
18 phases
System Design
11 phases
Projects
11 levels
Your Progress
Complete all 11 levels to master full-stack engineering
Skill Progression
Each level builds on the previous. Hover to see what you will learn.
Developer Foundations
BeginnerSet up your dev environment, learn version control, and build your first static sites and simple JS apps.
Beginner Projects
BeginnerBuild interactive apps with progressive enhancement — same project, 4 versions, each adding a new layer of complexity.
Early Intermediate
IntermediateYour first full-stack apps. Blog with rich text, URL shortener with analytics, notes with collaboration.
Intermediate Full-Stack
IntermediateProduction-grade apps with multiple features — multi-phase e-commerce and drag-and-drop project management.
Advanced Full-Stack
AdvancedComplex social and messaging platforms with real-time features, feeds, and advanced architecture patterns.
Production-Ready
AdvancedTreat projects like real production systems. Add testing, containerization, monitoring, and security hardening.
Advanced Backend
AdvancedBuild backend infrastructure — notification delivery systems and background job processing with retries.
Distributed Systems
AdvancedDesign distributed systems with multiple components, eventual consistency, and graceful failure handling.
Scalable Production
AdvancedBuild systems that handle millions of users — video streaming pipelines and real-time ride matching.
Enterprise / Senior
AdvancedEnterprise-grade systems with advanced RBAC, reporting, admin controls, and complex business requirements.
Senior Capstone
AdvancedIndependently design and build a complex system from business requirements alone. No provided architecture.
All Levels
Click any project to start building. Each phase contains hands-on guided projects.
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.
Ready to start building?
Each project teaches you something the previous one did not. Start from Level 0 if you are new, or jump to the level that matches your current skills.