Full Stack Web Development Roadmap 2026: From Zero to Job-Ready Developer

FULL STACK WEB DEVELOPMENT — 2026 TECHNOLOGY MAP

LAYER 1: BROWSER (Frontend)
├── Structure:    HTML5, Semantic HTML, Accessibility (ARIA)
├── Styling:      CSS3, Flexbox, Grid, CSS Variables, Animations
├── Language:     JavaScript (ES2022+), TypeScript
├── Framework:    React 19, Next.js 15
├── State:        React Context, Zustand, TanStack Query
├── Styling Lib:  Tailwind CSS, CSS Modules
└── Testing:      Jest, React Testing Library, Playwright

LAYER 2: SERVER (Backend)
├── Runtime:      Node.js 22 LTS
├── Framework:    Express.js, Fastify, Hono
├── Language:     TypeScript
├── Auth:         JWT, OAuth 2.0, Passport.js, NextAuth
├── ORM:          Prisma, Drizzle ORM
└── Testing:      Jest, Supertest

LAYER 3: DATA
├── Relational:   PostgreSQL 16
├── Document:     MongoDB Atlas
├── Cache:        Redis
├── Search:       Elasticsearch, pgvector
└── File Store:   AWS S3, Cloudflare R2

LAYER 4: INFRASTRUCTURE
├── Version Ctrl: Git, GitHub
├── Containers:   Docker, Docker Compose
├── CI/CD:        GitHub Actions
├── Deploy:       Vercel, Railway, AWS, Google Cloud Run
└── Monitoring:   Sentry, Datadog (basics)

LAYER 5: AI INTEGRATION (2026 Addition)
├── LLM APIs:     OpenAI, Anthropic, Google Gemini
├── Orchestration: LangChain, Vercel AI SDK
└── Embeddings:   OpenAI Embeddings, pgvector, Pinecone

/* The CSS properties that matter most — learn these first */

/* Layout — the big two */
display: flex;            /* Flexbox — one-dimensional layouts */
display: grid;            /* CSS Grid — two-dimensional layouts */

/* Box model */
box-sizing: border-box;   /* Always set this globally */
margin, padding, border, width, height

/* Positioning */
position: relative | absolute | fixed | sticky;

/* Typography */
font-family, font-size, font-weight, line-height, letter-spacing

/* Modern features */
CSS Custom Properties (variables): --color-primary: #6366f1;
CSS Animations & Transitions
Media Queries for responsive design
clamp() for fluid typography

// Level 1: Callback (old pattern — avoid)
fetchUser(id, function(err, user) {
  if (err) handleError(err);
  fetchOrders(user.id, function(err, orders) {
    // "Callback hell"
  });
});

// Level 2: Promises
fetchUser(id)
  .then(user => fetchOrders(user.id))
  .then(orders => renderOrders(orders))
  .catch(err => handleError(err));

// Level 3: async/await (modern standard — use this)
async function loadUserDashboard(userId) {
  try {
    const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id);
    renderOrders(orders);
  } catch (err) {
    handleError(err);
  }
}

// Level 4: Parallel async operations
async function loadDashboardData(userId) {
  // Fetch simultaneously, not sequentially
  const [user, notifications, analytics] = await Promise.all([
    fetchUser(userId),
    fetchNotifications(userId),
    fetchAnalytics(userId),
  ]);
  return { user, notifications, analytics };
}

// 1. Basic Types
let name: string = 'Alice';
let age: number = 28;
let isActive: boolean = true;
let tags: string[] = ['react', 'typescript'];

// 2. Interfaces — shape of objects
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'moderator';  // Union type
  createdAt: Date;
  avatar?: string;  // Optional property
}

// 3. Generic Types — reusable type-safe functions
interface ApiResponse<T> {
  status: 'success' | 'error';
  data: T;
  message?: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  return res.json();
}

// Usage — TypeScript knows the exact shape of data
const response = await fetchData<User>('/api/users/123');
console.log(response.data.email); // ✅ Auto-complete works

// 4. Type Guards
function isUser(obj: unknown): obj is User {
  return typeof obj === 'object' && obj !== null && 'email' in obj;
}

// 5. Utility Types
type PartialUser = Partial<User>;           // All props optional
type UserPreview = Pick<User, 'id' | 'name'>; // Select props
type UserInput = Omit<User, 'id' | 'createdAt'>; // Exclude props
type ReadonlyUser = Readonly<User>;          // No mutations

// 1. Functional Components with TypeScript
interface ProductCardProps {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
  onAddToCart: (id: string) => void;
}

export const ProductCard: React.FC<ProductCardProps> = ({
  id, name, price, inStock, onAddToCart
}) => {
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p className="price">${price.toFixed(2)}</p>
      <button
        onClick={() => onAddToCart(id)}
        disabled={!inStock}
        aria-label={`Add ${name} to cart`}
      >
        {inStock ? 'Add to Cart' : 'Out of Stock'}
      </button>
    </div>
  );
};

// 2. useState — component state
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// 3. useEffect — side effects & data fetching
useEffect(() => {
  const controller = new AbortController();
  
  async function fetchUser() {
    try {
      const res = await fetch(`/api/users/${userId}`, {
        signal: controller.signal
      });
      const data = await res.json();
      setUser(data);
    } catch (err) {
      if (err instanceof Error && err.name !== 'AbortError') {
        setError(err.message);
      }
    }
  }
  
  fetchUser();
  return () => controller.abort(); // Cleanup on unmount
}, [userId]);

// 4. useCallback & useMemo — performance optimization
const handleSearch = useCallback((query: string) => {
  setSearchQuery(query);
}, []); // Stable function reference

const filteredProducts = useMemo(() => {
  return products.filter(p => 
    p.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
}, [products, searchQuery]); // Recompute only when deps change

// 5. Custom Hooks — reusable stateful logic
function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue] as const;
}

// App Router (Next.js 13+) — file-based routing
// app/
// ├── page.tsx          → /
// ├── about/page.tsx    → /about
// ├── blog/
// │   ├── page.tsx      → /blog
// │   └── [slug]/
// │       └── page.tsx  → /blog/:slug
// └── api/
//     └── users/
//         └── route.ts  → /api/users

// Server Component (default in App Router — runs on server)
// Data fetches happen on server — no client-side loading state needed
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: revalidate every hour
  }).then(r => r.json());

  return (
    <main>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </main>
  );
}

// Client Component (add 'use client' for interactivity)
'use client';
export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '❤️' : '🤍'}</button>;
}

// API Route Handler (app/api/users/route.ts)
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const page = searchParams.get('page') ?? '1';
  
  const users = await db.user.findMany({
    skip: (parseInt(page) - 1) * 20,
    take: 20,
  });
  
  return Response.json({ users });
}

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  role      Role     @default(USER)
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id          String   @id @default(cuid())
  title       String
  slug        String   @unique
  content     String
  published   Boolean  @default(false)
  author      User     @relation(fields: [authorId], references: [id])
  authorId    String
  tags        Tag[]
  viewCount   Int      @default(0)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  @@index([slug])        // Index for fast slug lookups
  @@index([authorId])    // Index for author queries
}

enum Role {
  USER
  ADMIN
  MODERATOR
}

// Prisma queries in your service layer
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

// Complex query with relations, filtering, pagination
const posts = await prisma.post.findMany({
  where: {
    published: true,
    author: { role: 'ADMIN' },
    createdAt: { gte: new Date('2026-01-01') },
  },
  include: {
    author: { select: { id: true, name: true } }, // Only fetch needed fields
    tags: true,
    _count: { select: { comments: true } },
  },
  orderBy: { createdAt: 'desc' },
  skip: (page - 1) * limit,
  take: limit,
});

# Daily Git workflow every developer must know
git status                          # See what changed
git add -p                          # Stage changes interactively
git commit -m "feat: add user auth" # Conventional commits
git push origin feature/user-auth   # Push branch

# Collaboration patterns
git checkout -b feature/new-feature # Create feature branch
git pull origin main --rebase        # Keep up to date
git merge --no-ff feature/branch     # Merge with history
git log --oneline --graph            # Visualize history

# Essential git operations
git stash                            # Save work-in-progress
git cherry-pick <commit-hash>        # Apply specific commit
git bisect                           # Find bug-introducing commit
git rebase -i HEAD~3                 # Interactive rebase to clean commits

# Dockerfile for a Next.js application
FROM node:22-alpine AS base
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies
FROM base AS deps
COPY package*.json ./
RUN npm ci

# Build
FROM base AS builder
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production runner
FROM base AS runner
ENV NODE_ENV=production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]

# docker-compose.yml — local development stack
version: '3.9'
services:
  app:
    build: .
    ports: ["3000:3000"]
    environment:
      DATABASE_URL: postgresql://postgres:dev@db:5432/myapp
      REDIS_URL: redis://cache:6379
    depends_on: [db, cache]
    volumes:
      - .:/app
      - /app/node_modules  # Prevent overwriting container's node_modules
      - /app/.next

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: dev
      POSTGRES_DB: myapp
    volumes: [pgdata:/var/lib/postgresql/data]
    ports: ["5432:5432"]

  cache:
    image: redis:7-alpine
    ports: ["6379:6379"]

volumes:
  pgdata:

# .github/workflows/ci.yml
name: CI Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:16
        env:
          POSTGRES_PASSWORD: test
          POSTGRES_DB: testdb
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-retries 5

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - run: npm ci
      - run: npm run typecheck
      - run: npm run lint
      - run: npm run test:ci
        env:
          DATABASE_URL: postgresql://postgres:test@localhost:5432/testdb

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

// lib/ai.ts — AI utilities for your Next.js app
import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

// 1. Basic chat completion
export async function generateContent(prompt: string): Promise<string> {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      {
        role: 'system',
        content: 'You are a helpful assistant for a software company.',
      },
      { role: 'user', content: prompt },
    ],
    max_tokens: 1000,
    temperature: 0.7,
  });
  return completion.choices[0].message.content ?? '';
}

// 2. Streaming response (for real-time UI)
export async function streamChatResponse(
  messages: OpenAI.ChatCompletionMessageParam[]
) {
  const stream = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    stream: true,
  });
  return stream; // Pipe to Response stream in Next.js API route
}

// 3. Text embeddings for semantic search
export async function generateEmbedding(text: string): Promise<number[]> {
  const response = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: text,
  });
  return response.data[0].embedding;
}

// app/api/chat/route.ts — Streaming chat API route
import { OpenAIStream, StreamingTextResponse } from 'ai'; // Vercel AI SDK
import OpenAI from 'openai';

const openai = new OpenAI();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    stream: true,
    messages: [
      {
        role: 'system',
        content: 'You are a helpful coding assistant.',
      },
      ...messages,
    ],
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

ALGORITHMS & DATA STRUCTURES (for FAANG/tier-1 interviews)
├── Arrays & Strings: Two pointers, sliding window
├── Linked Lists: Reversal, cycle detection
├── Trees: BFS, DFS, binary search trees
├── Hash Maps: Frequency counting, two-sum patterns
├── Recursion & Dynamic Programming: Memoization
└── Sorting: QuickSort, MergeSort, understanding Big O

SYSTEM DESIGN (for mid/senior roles)
├── URL Shortener (hashing, redirection, analytics)
├── Chat System (WebSockets, message queues, storage)
├── Rate Limiter (token bucket, sliding window)
├── CDN / Cache Design (TTL, eviction policies)
└── Database Scaling (sharding, replication, indexing)

JAVASCRIPT / REACT INTERNALS
├── Event loop and call stack
├── Closures and lexical scope
├── Prototype chain and inheritance
├── React reconciliation and virtual DOM
├── Rendering optimization (memo, useMemo, useCallback)
└── Common async patterns and error handling