Full Stack Introduction

What you'll learn

Understand the difference between frontend and backend responsibilities

Learn how client and server communicate over HTTP

Build a simple API endpoint that serves JSON data

Connect a frontend form to a backend API with fetch

Understand the request-response lifecycle end to end

Deploy a full-stack application to production

Full stack development covers both frontend (UI) and backend (server, database, APIs). This section covers the skills needed to build complete web applications.

Architecture Overview

A typical full stack application has three layers:

┌──────────────────┐
│   Frontend UI    │  React / Next.js → User interface
├──────────────────┤
│   API Layer      │  REST / GraphQL → Data exchange
├──────────────────┤
│   Backend        │  Server logic → Business rules
├──────────────────┤
│   Database       │  PostgreSQL / SQLite → Data storage
└──────────────────┘

Backend Integration

Frontend applications communicate with backends through APIs:

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("/api/users")
  if (!res.ok) throw new Error("Failed to fetch")
  return res.json()
}

// In Next.js, you can use server components for direct DB access
// instead of going through an API route

Authentication

Common auth patterns for web apps:

Session-based: Server stores session, client gets a cookie
JWT (JSON Web Tokens): Server signs a token, client stores it
OAuth: Delegate auth to a provider (Google, GitHub)

// JWT example flow
// 1. User logs in → server returns a signed token
// 2. Client stores token (httpOnly cookie or localStorage)
// 3. Client sends token with every request via Authorization header
// 4. Server verifies token before responding

Databases

Type	Examples	Use Case
Relational	PostgreSQL, SQLite	Structured data with relations
Document	MongoDB, Firebase	Flexible schemas
Key/Value	Redis	Caching, sessions
ORM	Prisma, Drizzle	Type-safe DB access

Deployment

# Build for production
npm run build

# Start production server
npm start

# Or deploy to platforms like:
# Vercel, Netlify, Railway, Fly.io, AWS

Best Practices

Keep business logic separate from framework code
Validate all user input (frontend + backend)
Use environment variables for configuration
Implement proper error handling everywhere
Write automated tests for critical paths
Use HTTPS in production

Next Steps

Backend Integration — Connect frontend to APIs
Authentication — Secure your app
Deployment — Ship to production

Key Takeaways

The frontend handles UI rendering and user interaction; the backend handles data, auth, and business logic

HTTP requests consist of a method (GET/POST/PUT/DELETE), URL, headers, and optional body

REST APIs organize endpoints around resources (/users, /posts) with standard HTTP methods

The fetch API is the modern native way to make HTTP requests from the browser

A full-stack request flows: browser → API route → database → API response → browser render

Architecture Overview

A typical full stack application has three layers:

┌──────────────────┐
│   Frontend UI    │  React / Next.js → User interface
├──────────────────┤
│   API Layer      │  REST / GraphQL → Data exchange
├──────────────────┤
│   Backend        │  Server logic → Business rules
├──────────────────┤
│   Database       │  PostgreSQL / SQLite → Data storage
└──────────────────┘

Backend Integration

Frontend applications communicate with backends through APIs:

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("/api/users")
  if (!res.ok) throw new Error("Failed to fetch")
  return res.json()
}

// In Next.js, you can use server components for direct DB access
// instead of going through an API route

Authentication

Common auth patterns for web apps:

Session-based: Server stores session, client gets a cookie

JWT (JSON Web Tokens): Server signs a token, client stores it

OAuth: Delegate auth to a provider (Google, GitHub)

// JWT example flow
// 1. User logs in → server returns a signed token
// 2. Client stores token (httpOnly cookie or localStorage)
// 3. Client sends token with every request via Authorization header
// 4. Server verifies token before responding

Type

Examples

Use Case

Relational

PostgreSQL, SQLite

Structured data with relations

Document

MongoDB, Firebase

Flexible schemas

Key/Value

Redis

Caching, sessions

ORM

Prisma, Drizzle

Type-safe DB access