Anatomy of a full-stack app

From bottom to top

A full-stack application has three layers. The most solid way to build it is from the bottom up, securing each layer before the next:

1. Database: where the data lives permanently (the tasks).
2. Backend (API): the logic and the endpoints that read and modify that data.
3. Frontend: the interface the user sees, which consumes the API.

The project: a task manager

You are going to build the pieces of a task manager. A task is an object:

{ id: 1, title: "Study SQL", done: false }

In the following exercises you will build, in order:

• the query that lists the pending tasks (SQL),
• the backend that completes a task (JavaScript),
• the HTML structure of the list,
• a React component that paints it,
• and the connection of the frontend with the API (fetch).

Each piece is small; together they form a real app. Let's go!