Anatomia de um app full-stack

De baixo para cima

Uma aplicação full-stack tem três camadas. A forma mais sólida de construí-la é de baixo para cima, garantindo cada camada antes da seguinte:

1. Banco de dados: onde os dados vivem de forma permanente (as tarefas).
2. Backend (API): a lógica e os endpoints que leem e modificam esses dados.
3. Frontend: a interface que o usuário vê, que consome a API.

O projeto: um gerenciador de tarefas

Você vai construir as peças de um gerenciador de tarefas. Uma tarefa é um objeto:

{ id: 1, titulo: "Estudar SQL", feita: false }

Nos exercícios a seguir você vai construir, em ordem:

• a consulta que lista as tarefas pendentes (SQL),
• o backend que conclui uma tarefa (JavaScript),
• a estrutura HTML da lista,
• um componente React que a desenha,
• e a conexão do frontend com a API (fetch).

Cada peça é pequena; juntas formam um app real. Vamos lá!