Full-Stack Project

After this lesson, you will be able to: Build and deploy a complete full-stack application that connects a frontend, a backend API, and a database, and ship it to a real public URL.

This is the capstone of the Web Development track. You'll combine your frontend, backend, and database skills into one working application, and deploy it to Vercel so anyone in the world can use it. The app can be small; the win is shipping it.

Prerequisites:Databases and Data Storage

Project ideas, keep it small

Choose a project where the value is clear in one sentence: "a notes app", "a movie watchlist", "a study flashcard tool", "a class poll voting app". Avoid projects that need 5 different features to be useful. The goal is to ship, not to impress.

Architecture, the four parts

Every full-stack app has these four pieces.

1
Frontend: HTML/CSS/JS that runs in the browser. Calls the backend with fetch.
2
Backend: Express server that exposes routes (GET, POST, etc.) and talks to the DB.
3
Database: stores data permanently. PostgreSQL via a free service like Neon.
4
Deployment: a public URL where users can reach the app. Vercel for frontend; Render or Railway for backend.

Diagram coming soon!

Four-box architecture diagram: Browser → Vercel-hosted frontend → Render-hosted backend (Express) → Neon-hosted PostgreSQL

Calling your backend from the frontend

fetch is the browser's built-in way to make HTTP requests.

tsx

// In your frontend script.js
async function loadMessages() {
  const res = await fetch("/api/messages");
  const data = await res.json();
  const list = document.querySelector("#message-list");
  list.innerHTML = data.map((m) => `<li>${m.text}</li>`).join("");
}

async function addMessage(text) {
  await fetch("/api/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ text }),
  });
  loadMessages();
}

Deploy in 4 steps

Once your app works in your editor, deployment is straightforward.

1
Push your code to a GitHub repository
2
Sign up for Vercel.com (free tier) and Neon.tech (free Postgres)
3
In Neon, create a new project and copy the connection string
4
In Vercel, click "Import Project", connect your GitHub repo, and add DATABASE_URL as an environment variable
5
Click Deploy. Vercel gives you a public URL like myapp.vercel.app

Quick Check

What goes in environment variables vs. in your code?

Hint: think about who should be able to see what.

←Databases and Data Storage

Back to Web Development

Web Development Resources and Next Steps→