DropoutDeveloper
Tools/Roadmap Generator/Full Stack Developer
Free curated roadmap

Full Stack Developer Roadmap

Own the whole request: React on the front, Node and a database on the back, then Next.js.

21 Week252 h11 projects

Four free learning paths, ordered so nothing is used before it is taught. GitHub for three weeks. The MERN stack path for eight, covering React fundamentals, a Node and Express and MongoDB API, a MongoDB deep dive, and a task manager built end to end. The Next.js path for five weeks on routing, rendering, styling, and a CMS-backed blog you deploy. SQL for five weeks so you are not relational-illiterate. By the end you can take a feature from a database column to a rendered page and explain every layer it passed through.

This is the longest of the web roadmaps at twenty one curated weeks. At ten hours a week, expect twenty six to thirty weeks. At twenty hours a week, fifteen to eighteen. Full stack from zero to job ready is typically nine to twelve months, because you are learning two halves and the seam between them. The upside is that once you can do the whole loop, small teams and early startups value you highly, since you unblock yourself.

Follow the order exactly. React before the API work, because the MERN path assumes you can already manage component state when it starts wiring endpoints. The API before Next.js, because Next.js rewards people who already understand client and server as separate machines. SQL last is fine here, but do not drop it, since interviewers will ask and most real systems are relational underneath the ORM. Build the task manager and the blog to a finish you are willing to demo, not to the point where they compile.

This suits people who get bored owning only one layer, who like the phrase "I will just do it end to end", and who want the flexibility to move toward frontend or backend later once they know which they prefer. It is a poor fit if you are short on time, since spreading across the whole stack is slower than going deep on one side, or if you dislike context switching, because full stack work is context switching as a job description.

What this roadmap covers

GitHub

3 Week

Go from your first commit to a real open-source contribution: Git and GitHub fundamentals, branches and issues, then actually open a pull request on a real project.

Start the free learning paths →

MERN Stack

8 Week

Build the MERN stack (MongoDB, Express, React, Node) layer by layer, then ship real full-stack apps: a task manager, a blog, a social app, and an e-commerce store, ending in a deployed capstone.

Start the free learning paths →

Next JS Path

5 Week

Learn Next.js from routing and rendering through styling, then ship real projects: a CMS-backed blog, a full-stack app with a database, and a capstone built on Server Actions and API routes.

Start the free learning paths →

SQL

5 Week

Go from your first SELECT to real analytics: joins, subqueries, window functions, designing your own schema, and a full analytics project on a real public dataset.

Start the free learning paths →

The week-by-week plan

  1. Week 1: GitHub Basics

    GitHub

    Understand what GitHub is, how it fits with Git, and get comfortable with the core workflow.

    Watch

    Milestone What GitHub is and why developers use it

  2. Week 2: Branches, Issues & Collaboration

    GitHub

    Go beyond the basics: branch your work, track tasks with Issues, and understand how forking works.

    Watch

    Milestone What forking a repository means

  3. Week 3: Project: Contribute a Pull Request to a Real Open-Source Repo

    GitHub

    Put everything together: fork a real project, make a small improvement, and open your first pull request.

    Watch

    Milestone Finding a real repo and a beginner-friendly issue to work on

    Project checkpoint Put everything together: fork a real project, make a small improvement, and open your first pull request.

  4. Week 4: React Fundamentals

    MERN Stack

    Learn React components, props, and state: the front end of the MERN stack.

    Watch

    Milestone Components, JSX, and props

  5. Week 5: Node, Express & MongoDB API Fundamentals

    MERN Stack

    Build a REST API with Node, Express, and Mongoose backed by MongoDB.

    Watch

    Milestone Setting up an Express server and routes

  6. Week 6: MongoDB Deep Dive

    MERN Stack

    Go deeper on MongoDB itself: documents, queries, and updates, before building bigger apps.

    Watch

    Milestone Documents, collections, and BSON data types

  7. Week 7: Project: Task Manager (MERN CRUD App)

    MERN Stack

    Build and deploy a full CRUD task manager using React, Node, Express, and MongoDB.

    Watch

    Milestone Connecting a React front end to an Express API

    Project checkpoint Build and deploy a full CRUD task manager using React, Node, Express, and MongoDB.

  8. Week 8: Project: Blog Web App

    MERN Stack

    Build a full-stack blog with posts, a database, and a React front end.

    Watch

    Milestone Modeling blog posts in MongoDB

    Project checkpoint Build a full-stack blog with posts, a database, and a React front end.

  9. Week 9: Project: Social Media App

    MERN Stack

    Build a social app with user profiles, posts, and interactions using React hooks and Context API.

    Watch

    Milestone User registration and login flows

    Project checkpoint Build a social app with user profiles, posts, and interactions using React hooks and Context API.

  10. Week 10: Project: E-commerce App

    MERN Stack

    Build a full e-commerce app with products, secure auth, and real payment integration.

    Watch

    Milestone Modeling products, carts, and orders in MongoDB

    Project checkpoint Build a full e-commerce app with products, secure auth, and real payment integration.

  11. Week 11: Capstone: Deploy Your MERN App

    MERN Stack

    Ship a complete MERN project live using Render, Vercel, and MongoDB Atlas.

    Watch

    Milestone Preparing a React app for a production build

    Project checkpoint Ship a complete MERN project live using Render, Vercel, and MongoDB Atlas.

  12. Week 12: Next.js Fundamentals: Routing & Rendering

    Next JS Path

    Get the mental model right first: SSR vs SSG, file-based routing, data fetching, and the App Router.

    Watch

    Milestone SSR and SSG explained

  13. Week 13: Styling Next.js Apps: Sass & Material UI

    Next JS Path

    Two practical styling toolkits for real Next.js projects: Sass for custom design systems, Material UI for fast, polished components.

    Watch

    Milestone Sass variables, nesting and mixins

  14. Week 14: Project: Build a CMS-Backed Blog

    Next JS Path

    Ship your first real Next.js project: a blog that pulls content from Markdown and from a headless CMS.

    Watch

    Milestone Reading and parsing Markdown files as content

    Project checkpoint Ship your first real Next.js project: a blog that pulls content from Markdown and from a headless CMS.

  15. Week 15: Project: Full-Stack App with a Database

    Next JS Path

    Go beyond content sites: build and deploy a full-stack Next.js app backed by a real database.

    Watch

    Milestone Structuring a full-stack Next.js app

    Project checkpoint Go beyond content sites: build and deploy a full-stack Next.js app backed by a real database.

  16. Week 16: Capstone: Deploy a Full-Stack App with Server Actions

    Next JS Path

    Bring it all together in a production-style capstone: a deployed full-stack Next.js app built on modern Server Actions and API routes.

    Watch

    Milestone Building full-stack features with Server Actions

    Project checkpoint Bring it all together in a production-style capstone: a deployed full-stack Next.js app built on modern Server Actions and API routes.

  17. Week 17: SQL Fundamentals: Queries & Databases

    SQL

    Learn to query a relational database: SELECT, WHERE, GROUP BY, and aggregate functions.

    Watch

    Milestone Write SELECT statements with filtering and sorting

  18. Week 18: Joins & Subqueries

    SQL

    Combine data across multiple tables with joins, and nest queries with subqueries.

    Watch

    Milestone Understand INNER, LEFT, RIGHT, and FULL joins

  19. Week 19: Window Functions for Analytics

    SQL

    Learn window functions to rank, partition, and run running totals over result sets.

    Watch

    Milestone Understand the OVER() clause and PARTITION BY

  20. Week 20: Project: Design a Relational Database Schema

    SQL

    Design a normalized schema from scratch: entities, relationships, and an ER diagram.

    Watch

    Milestone Model entities and relationships as an ER diagram

    Project checkpoint Design a normalized schema from scratch: entities, relationships, and an ER diagram.

  21. Week 21: Project: Analyze a Real Public Dataset

    SQL

    Ship a full SQL analytics project: joins, aggregation, and window functions, against a real-world public dataset.

    Watch

    Milestone Explore a real, messy public dataset with SQL

    Project checkpoint Ship a full SQL analytics project: joins, aggregation, and window functions, against a real-world public dataset.

Resources and structure are drawn from the free Dropout Developer learning paths.

Get this as a dated plan

Run the same roadmap through the generator with your weekly hours and a target date to get a dated schedule you can copy, download, or print.

Open the roadmap generator Start the free learning paths

FAQ

Is full stack too much to learn as a first role?

It is more, not impossible. Expect nine to twelve months rather than six. Many people start full stack, take a job that leans one way, and specialise on the job. Learning both first makes that first job easier to get at a small company.

MERN, MEAN, or something else?

This roadmap uses MERN because React has the most job listings and the largest free learning ecosystem. The architecture, a JavaScript frontend calling a JavaScript API calling a database, is identical across MEAN and the LAMP stack. Pick by local demand.

Do I need Next.js, or is plain React enough?

Plain React is enough to get hired. Next.js is included because server rendering, routing, and data fetching patterns are increasingly the default in job listings, and the blog project gives you something deployed and real to show.

How do I show full stack ability in a portfolio?

One project where the same repository holds the frontend, the API, and the schema, deployed with a real database and a login. Reviewers can see in five minutes that you understand the whole request, which a pile of frontend-only demos cannot show.

What comes after this roadmap?

Authentication and authorization done properly, testing on both sides, one cloud provider, and CI that runs your tests on every push. Then system design reading, which is the interview between junior and mid level for full stack roles.

Compare with the static roadmap on roadmap.sh →