Full-Stack Basics: servers, databases and deployment

01

How a full-stack app fits together

In simple words

A restaurant has three parts. The dining room is the front end: what guests see. The kitchen is the server: it takes orders and cooks. The pantry is the database: where the food is stored. A guest never walks into the pantry. They ask the waiter, the kitchen gets what is needed, and a plate comes back.

Before this course: Front-End Development: responsive layouts and JavaScript apps (course 7.7.2). You should already be able to build a responsive page, write JavaScript that renders data, call an API with fetch, handle loading and error states, and publish a static site. Until now, someone else's server answered your fetch. In this course you build that server yourself, plus a database and a login. Our project is "Study Notes": people sign up, log in and keep private notes.

Key facts

Front end = HTML, CSS and JavaScript running in the browser. Back end = code running on a server. Database = where data is kept safely between visits. "Full stack" means you can work on all three.
The browser and server talk with HTTP. The browser sends a request (a method such as GET or POST, a path such as /api/notes, headers and sometimes a body). The server sends back a response (a status code, headers and a body).
Node.js runs JavaScript outside the browser. Its built-in node:http module can create a web server with no extra packages.
A server listens on a port. On your own computer, localhost:3000 means "this computer, port 3000".
An API that answers in JSON lets any front end (a web page, a phone app, a test script) use the same server.
Node.js 22.13 and newer include node:sqlite, a built-in SQLite database. The Node.js documentation still marks it as experimental in those versions, so Node prints an "ExperimentalWarning" when you use it. That is expected in this course.
Never trust the browser. Anyone can send any request to your server with tools other than your page. All checks that matter (input rules, who owns what) must run on the server.

Example (your first server, tested)

const http = require("node:http");

const server = http.createServer(function (req, res) {
 if (req.method === "GET" && req.url === "/health") {
  res.writeHead(200, { "Content-Type": "application/json" });
  res.end(JSON.stringify({ ok: true }));
  return;
 }
 res.writeHead(404, { "Content-Type": "application/json" });
 res.end(JSON.stringify({ error: "Not found" }));
});

server.listen(3000, function () {
 console.log("Open http://localhost:3000/health");
});

Test result: GET /health answered 200 with {"ok":true}; any other path answered 404 with {"error":"Not found"}.

Step by step

Install Node.js from nodejs.org (choose the LTS version), then type node --version in a terminal. You need 22.13 or newer.
Create a folder study-notes and open it in your code editor and in the terminal.
Create hello.js and paste the example code.
Run node hello.js. You should see "Open localhost:3000/health".
Open that address in your browser. You should see {"ok":true}.
Try localhost:3000/anything. You should get the "Not found" answer.
Stop the server with Ctrl+C in the terminal.
Check: in DevTools, Network tab, the /health request shows status 200 and the other shows 404 (names can differ by version).

Watch on YouTube

How to create a simple HTTP server in Node.jsProgrammingKnowledge · YouTube · youtube.com

Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.

LESSON 01How a full-stack app fits together

LESSON 01 / ANIMATED LESSON / AI VOICE00:00 / 01:00

Voice

Read the video script

[Host] "Front end is the dining room. The server is the kitchen. The database is the pantry."
[Screen: browser sends GET /health, server replies 200 with JSON] "The browser sends a request. The server sends a response with a status code and a body."
[Screen: hello.js running in a terminal] "Ten lines of Node.js and you have your own server on localhost."
[Text on screen: Never trust the browser] "One rule for the whole course: the server checks everything, because anyone can send it a request."

Try it now

Run the first server. Add a second route, GET /time, that answers with the current time as JSON. Then draw the restaurant picture for Study Notes: label the dining room, kitchen and pantry with the real parts (page, Node.js server, SQLite file).

ClaudeStuck? Copy a ready-made prompt for Claude

Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.

For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.

I'm learning "Full-Stack Basics: servers, databases and deployment" on The Future Market. Lesson 1: "How a full-stack app fits together".

What the lesson teaches:
- Front end = HTML, CSS and JavaScript running in the browser. Back end = code running on a server. Database = where data is kept safely between visits. "Full stack" means you can work on all three.
- The browser and server talk with HTTP. The browser sends a request (a method such as GET or POST, a path such as /api/notes, headers and sometimes a body). The server sends back a response (a status code, headers and a body).
- Node.js runs JavaScript outside the browser. Its built-in node:http module can create a web server with no extra packages.
- A server listens on a port. On your own computer,  means "this computer, port 3000".
- An API that answers in JSON lets any front end (a web page, a phone app, a test script) use the same server.
- Node.js 22.13 and newer include node:sqlite, a built-in SQLite database. The Node.js documentation still marks it as experimental in those versions, so Node prints an "ExperimentalWarning" when you use it. That is expected in this course.
- Never trust the browser. Anyone can send any request to your server with tools other than your page. All checks that matter (input rules, who owns what) must run on the server.

The exercise I'm working on:
Run the first server. Add a second route, GET /time, that answers with the current time as JSON. Then draw the restaurant picture for Study Notes: label the dining room, kitchen and pantry with the real parts (page, Node.js server, SQLite file).

I'm stuck. Please:
1. Explain the main idea in plain, simple words with one everyday example.
2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step.
3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.

I'm a parent helping my child (about 8 years old) with a lesson called "How a full-stack app fits together" from the course "Full-Stack Basics: servers, databases and deployment".

Here's what the lesson says:
A restaurant has three parts. The dining room is the front end: what guests see. The kitchen is the server: it takes orders and cooks. The pantry is the database: where the food is stored. A guest never walks into the pantry. They ask the waiter, the kitchen gets what is needed, and a plate comes back.

The activity:
Run the first server. Add a second route, GET /time, that answers with the current time as JSON. Then draw the restaurant picture for Study Notes: label the dining room, kitchen and pantry with the real parts (page, Node.js server, SQLite file).

Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words.
Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.

Open Claude

Sources

MDN Web Docs, an overview of HTTP: developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview
Node.js documentation, HTTP: nodejs.org/api/http.html
Node.js documentation, SQLite: nodejs.org/api/sqlite.html

My notes

I learned this

02