Module 14 Web Engineering

Building Your First Full-Stack App

Generating individual pieces — a React component here, an API endpoint there — is one thing. Understanding how all those pieces connect into a working, deployed application is another. This module is the bridge: you'll build a complete full-stack application from scratch, connecting every layer from the database to the browser, and deploy it to a live URL that real users can access. You'll build a Node.js HTTP server, add Express routing and middleware, connect to a PostgreSQL database with Drizzle ORM, implement full CRUD operations with proper validation and error handling, and wire up a React frontend that consumes the API. You'll handle CORS, environment variables, and the twelve-factor app principles that make production deployments manageable. By the end, you'll have a deployed, working application and a thorough understanding of every part of it. This isn't a 'hello world' tutorial — it's a real application with real concerns: input validation, meaningful error messages, database migrations, environment-based configuration, and deployment automation. The skills you build here apply to every full-stack project you'll work on, whether it's a side project or a production system serving millions of users.

What You'll Learn

  • 1
    What Is a Server — Ports, the request-response cycle, and your first Node.js HTTP server
  • 2
    Express Hello World — app.listen, route handlers, req/res, and the middleware chain
  • 3
    Routing — HTTP methods, URL params, query strings, and organizing routes by resource
  • 4
    Connecting to a Database — Drizzle ORM, schema definition, migrations, and basic queries
  • 5
    CRUD Operations — List, create, read, update, delete with input validation and error responses
  • 6
    Connecting a Frontend to Your Backend — CORS, fetch, environment variables, reverse proxy
  • 7
    Environment Variables and Configuration — .env files, secrets, and the twelve-factor app
  • 8
    Deploying Your First App — Railway, Render, managed databases, and running migrations on deploy

Capstone Project: Build a Full-Stack Task Management App — Deployed Live

Build and deploy a complete task management application with a React frontend and Express/PostgreSQL backend — supporting user-specific task lists, due dates, priority sorting, filtering, and real-time updates via polling. The app must be deployed to a live URL with a managed database, CI/CD pipeline, and proper environment configuration — demonstrating every skill in the full-stack development lifecycle from schema design to production deployment.

Why This Matters for Your Career

The difference between a developer who can build features and a developer who can build and ship products is the full-stack deployment cycle. Understanding every layer — from database schema to HTTP response to frontend render — is what allows you to debug issues that cross layer boundaries, optimize the parts of the system that are actually slow, and make informed architectural decisions. Most vibe coders can generate code for individual layers but struggle when something goes wrong across layers. A CORS error means the frontend and backend disagree about something — but which setting, on which end? An API call is returning 500 — is the bug in the route handler, the database query, or the ORM mapping? Engineers who understand the full stack can isolate these issues in minutes rather than hours. Deployment is a skill that many developers avoid until they have to learn it. Understanding environment variables, database migrations, managed hosting, and deployment pipelines early means you can ship your own projects, contribute to deployment discussions in professional settings, and understand the DevOps concerns that affect every application you work on.