How frontend, backend and database work together

The architecture at a glance

• The browser renders the user interface and sends HTTP requests.
• The backend API applies business rules, checks who the user is and what they may do, and reads or writes data.
• The database stores the data permanently.

In production there are usually a few more pieces: a CDN that serves static files quickly from servers near the user, a reverse proxy or load balancer that spreads traffic across several backend servers, and services for email, payments or file storage.

Tracing one action: marking a lesson complete

A learner clicks Mark as completed on a lesson. Here is what happens:

1. Browser: a click handler sends PUT /api/me/lessons/42/complete. The session cookie travels with the request automatically.
2. Backend, authentication: the server reads the session cookie and identifies the learner. If the session has expired it replies 401 Unauthorized.
3. Backend, validation: it checks that lesson 42 exists and is published. If not, it replies 404 Not Found.
4. Backend, database: it runs a query that records the completion. Using a unique key on (learner, lesson) means clicking twice does not create a duplicate.
5. Backend, response: it replies 200 OK with the learner's updated progress as JSON.
6. Browser: the interface shows a tick and updates the progress bar.

Where each concern lives

Handling failure gracefully

Networks drop, servers restart and users double-click. Good full-stack applications plan for it:

• Show a loading state while waiting, and a clear error message with a Try again option when a request fails.
• Disable a submit button while its request is in progress to avoid duplicate submissions.
• Make important operations idempotent, so repeating the same request produces the same result.
• Log errors on the server with enough detail to investigate, without logging passwords or personal data.

What a full-stack developer does day to day

A typical feature, such as "learners can bookmark lessons", touches every layer: a database table for bookmarks, API endpoints to add, remove and list them, and frontend components for the bookmark button and a list page. Being able to design and connect all of these pieces is what makes full-stack skills valuable.