As camadas de um app full-stack

De katas soltos a um app que inicia

Até agora você resolveu peças: uma consulta SQL aqui, um componente ali, um validador em outro lugar. Um app real é o que acontece quando essas peças se conectam e os dados fluem entre elas. Neste capstone você monta um gerenciador de tarefas de ponta a ponta e o executa.

Um app full-stack se organiza em camadas, e cada camada só conversa com sua vizinha:

[ UI / React ]      o formulário e a lista que o usuário vê
      │  chama
      ▼
[ Cliente ]         pede dados à API e guarda o que recebe
      │  fetch(url, ...)
      ▼
[ API / rotas ]     traduz cada requisição em uma operação de dados
      │  store.criar(...)
      ▼
[ Dados / store ]   o "banco de dados" (aqui, em memória)

O fluxo de uma ação

Adicionar uma tarefa percorre todas as camadas e volta:

1. O usuário digita e clica em Adicionar (UI).
2. A UI chama cliente.adicionar(texto).
3. O cliente faz fetch("/tarefas", { method: "POST", body: { texto } }).
4. A API recebe a rota, valida e chama store.criar(texto).
5. O store guarda a tarefa e a devolve; a resposta sobe de volta.
6. O cliente recarrega a lista e a UI é repintada com a tarefa nova.

A chave: nenhuma camada pula para outra que não seja sua vizinha. A UI não toca o store diretamente; passa pelo cliente e pela API. É isso que torna um app manutenível, testável e... executável de verdade.