All roadmaps

09 · Engineering

The Full Stack Developer
roadmap.

Full stack developers build complete web applications — handling both the frontend (what users see) and backend (the data, APIs, and logic). It's the most versatile engineering role and consistently commands salaries above both pure frontend and backend specialists at the junior level.

Level

Advanced

Time

12–18 months

Steps

6

Why this path

Full stack development is difficult precisely because it requires depth in two domains that both take years to master independently. The developers who do it well aren't trying to be average at everything — they have a genuinely strong foundation in both layers.

The reward is real: full-stack developers have more leverage over product decisions, can build complete features without waiting for another team, and are valued at startups where one person needs to cover multiple surfaces. The learning timeline is long. The career ceiling is high.

01

Skills you'll need

HTML, CSS & JavaScriptReact or Next.jsTypeScriptNode.js + Express or FastifySQL (PostgreSQL)REST API DesignAuthenticationGit & GitHubDocker basicsCloud Deployment
02

The roadmap

  1. 01

    Build a solid frontend foundation

    Do not try to learn everything simultaneously. Start with the Frontend Developer roadmap and get genuinely proficient: HTML, CSS, JavaScript, and React with TypeScript. Build 2–3 frontend-only projects that call public APIs. The mistake most full-stack beginners make is jumping to databases before they can build a working UI. Frontend proficiency gives you the confidence to connect layers properly.

  2. 02

    Learn backend fundamentals

    Work through the Backend Developer roadmap foundations: Node.js with Express or Fastify, PostgreSQL with an ORM (Prisma is the best choice for TypeScript projects), and REST API design. Build a standalone backend API with authentication that could theoretically serve any frontend. Separating frontend and backend during learning helps you understand each layer independently before connecting them.

  3. 03

    Connect frontend and backend

    Build your first full-stack app: a React frontend that calls your own Node.js API, which reads from and writes to a PostgreSQL database. Handle authentication end-to-end: registration, login, JWT storage, and protected routes on both frontend and backend. This integration layer is where most full-stack beginners struggle — CORS configuration, token management, and keeping schemas in sync are all specific full-stack challenges.

  4. 04

    Learn Next.js for production-ready full stack

    Next.js is the dominant full-stack React framework. Its App Router combines frontend and backend in one project — server components, API routes, server actions, and middleware all in one codebase. Learn server components vs. client components, data fetching patterns, and how Next.js handles authentication. Most full-stack job listings at startups now expect Next.js specifically — it's worth the investment.

  5. 05

    Add real-time features and third-party integrations

    Production full-stack apps integrate with external services: Stripe for payments, Cloudinary or S3 for file uploads, SendGrid for email, and Pusher or WebSockets for real-time features. Learn to work with Webhooks (how Stripe notifies your server of payment events). These integrations are common in job interviews and demonstrate that you can build production-grade features, not just toy projects.

  6. 06

    Build and ship a complete product

    Build one full-stack app that has real users or solves a real problem. Ideas: a job application tracker, a project management tool, an invoice generator, a booking system. Deploy it completely — Vercel for the frontend, Railway for the API and database. Write a README that explains the architecture, the database schema, and the authentication approach. This is the portfolio piece that opens senior full-stack conversations.

03

Tools of the trade

Next.js

Free

Full-stack React framework — frontend + API routes in one project

PostgreSQL + Prisma

Free

Database + type-safe ORM — the standard TypeScript full-stack combo

TypeScript

Free

Shared types across frontend and backend reduce entire categories of bugs

Tailwind CSS

Free

Utility-first styling for React — most full-stack projects use this

NextAuth.js / Lucia

Free

Authentication for Next.js apps — handles sessions, OAuth, and JWT

Vercel

Free

Deploy Next.js apps — built by the Next.js team, best integration

Railway

Free

Deploy PostgreSQL databases and Node.js APIs with a free tier

Stripe

Free

Payments — most production apps need payment processing eventually

04

A day on the job

  • 01Building end-to-end features: database schema, API endpoint, and frontend UI in a single pull request
  • 02Writing and debugging SQL queries and Prisma schema migrations
  • 03Building and consuming REST APIs between frontend and backend layers
  • 04Implementing authentication flows and protecting routes on both layers
  • 05Debugging issues that span the full stack — tracing a bug from browser to database
  • 06Reviewing architectural decisions with teammates and discussing tradeoffs
  • 07Deploying new features and monitoring for regressions in production
05

What it pays

Entry

$70,000–100,000 / yr

Mid-level

$100,000–150,000 / yr

Senior

$150,000–220,000+ / yr

USD, salaried

06

Where to find work

  • Wellfound (AngelList)

    Startups — most full-stack roles are at companies under 100 people

  • LinkedIn

    Broader market — filter for companies over 50 employees

  • We Work Remotely

    Remote full-stack roles at established companies

  • Toptal

    Vetted freelance network — premium rates once you're senior

  • Y Combinator job board

    High-growth startups actively hiring generalist engineers

  • Direct outreach to early-stage startups

    Many don't post publicly — LinkedIn message the CTO

07

Mistakes to avoid

No. 01

Trying to learn frontend and backend simultaneously

The most common full-stack beginner mistake. Learning two complex domains in parallel means progressing slowly in both. Pick frontend first, reach a working React competency, then add backend. The layers connect more naturally when you already understand one side.

No. 02

Building without considering the data model first

Full-stack apps live and die by their database schema. Design your tables, relationships, and constraints before writing any code. A poorly designed schema causes cascading problems through every layer — API shapes, frontend state management, and future migrations all reflect early schema decisions.

No. 03

Forgetting backend security on full-stack projects

When you own the whole stack, it's tempting to trust your own frontend. Never trust client-side data. Validate all inputs on the server, enforce authentication middleware on every protected route, and never expose sensitive data in API responses just because 'only your frontend calls it'.

No. 04

Never shipping

Full-stack projects are complex enough that 'almost done' can last months. Pick scope that you can actually ship in 4–6 weeks. Launch with limited features. The experience of running a live app — real users, real errors, real data — teaches more than any amount of localhost development.

No. 05

Skipping TypeScript across the full stack

Using TypeScript on only the frontend or only the backend misses the biggest benefit: shared types. Define your API response types once (in a shared package or via Zod schemas), and use them on both sides. This eliminates an entire class of runtime errors that come from frontend/backend schema mismatches.

08

Where to learn

  • Next.js Documentation — official, comprehensive, the best framework docs availableReading
  • Prisma Documentation — database ORM with excellent guidesReading
  • Josh tried coding (YouTube) — practical Next.js full-stack tutorialsCourse
  • T3 Stack (create.t3.gg) — opinionated full-stack starter: Next.js + TypeScript + Prisma + tRPCTool
  • The Odin Project — free full-stack curriculum covering both frontend and backendCourse
  • Stripe Documentation — best-in-class API docs for payment integration learningReading
  • Fireship (YouTube) — concise, high-quality web development explanationsCourse
  • Vercel — deploy full-stack Next.js apps for freeTool
09

Questions, answered

Should I learn full stack or specialise in frontend or backend?
Specialise first, then expand. Trying to become full-stack from the start spreads your learning too thin. Reach genuine frontend or backend competency (able to build and deploy a working app in that layer), then add the other. The full-stack label means more when you have real depth on both sides.
Is Next.js the right framework to learn for full-stack?
Yes, for JavaScript/TypeScript developers. Next.js is the dominant full-stack React framework and what most startups and scale-ups use. The App Router, server components, and server actions make it a complete full-stack solution. Alternative: SvelteKit (if you prefer Svelte) or Remix (React, more server-focused).
What database should full-stack developers learn?
PostgreSQL with Prisma is the standard combination for TypeScript full-stack projects. Prisma gives you type-safe database queries, automatic migration management, and excellent documentation. SQLite with Prisma is good for local development and simple deployed apps. MongoDB is worth learning later if you work with unstructured data.
How long does it take to become a full-stack developer?
12–18 months of consistent practice for most self-taught developers who start from zero. The timeline shortens significantly if you already have frontend or backend experience. The bottleneck is usually understanding how authentication, state management, and data fetching work across the complete request lifecycle — from browser to database and back.
Do full-stack developers earn more than specialists?
At the junior level, full-stack roles at startups often pay slightly more because one hire covers more surface area. At the senior level, deep specialists (Staff Frontend, Principal Backend) typically earn more than generalist full-stack developers. The full-stack path optimises for versatility and startup environments; the specialist path optimises for technical depth at larger companies.

Estimated commitment

12–18 months

Consistent daily practice beats long, infrequent sessions. An hour a day is enough.

10

Where it leads

  • Frontend Developer

    Natural next step

  • Backend Developer

    Natural next step

  • Software Engineer

    Natural next step

11

Other roadmaps