Project Overview: Full Stack Application

A full stack application combines everything you've learned into one cohesive system. The frontend handles what users see, the backend processes requests and business logic, and the database stores data persistently. Understanding how these pieces connect is fundamental to modern web development.

The Three Layers

Frontend runs in the user's browser. It displays information, accepts input, and sends requests to the backend. This is your HTML, CSS, and JavaScript — the user interface layer.

Backend runs on a server. It receives requests from the frontend, processes them (checking permissions, applying business rules), interacts with the database, and sends responses back. This is where your application logic lives.

Database stores data permanently. Unlike browser localStorage, database data persists on the server and can be accessed from any device. When users create accounts, post content, or save settings, that data lives in the database.

How Data Flows

When a user adds a todo item, here's what happens:

1. User types text and clicks "Add" in the frontend
2. Frontend sends an HTTP request to the backend API
3. Backend validates the data and writes to the database
4. Database confirms the write succeeded
5. Backend sends a success response to the frontend
6. Frontend updates the display to show the new item

This request-response cycle happens for every interaction that involves server data. Understanding this flow helps you debug issues — is the problem in the frontend, the API, or the database?

What We'll Build

We'll create a simple todo application that demonstrates all three layers working together. Users can add todos, mark them complete, and delete them. Data persists in a database, so refreshing the page or returning later shows the same todos.

The technologies are flexible. For the frontend, HTML/CSS/JavaScript works perfectly. For the backend, Python with Flask or Node.js with Express are popular choices. For the database, SQLite is simplest — it's just a file, no installation needed.

Why This Matters

Building a full stack app, even a simple one, teaches you how real applications work. Most professional software follows this pattern. Once you understand the three-layer architecture, you can work on any part of a larger system and know how your piece fits into the whole.

See More

• What Is a Web Application?
• Client and Server Roles
• Frontend and Backend: What's the Difference?
• What Is a Database?

Further Reading

• MDN: Server-side website programming