Las capas de una app full-stack

De katas sueltas a una app que arranca

Hasta ahora has resuelto piezas: una consulta SQL aquí, un componente allá, un validador por otro lado. Una app real es lo que ocurre cuando esas piezas se conectan y los datos fluyen entre ellas. En este capstone montas un gestor de tareas de punta a punta y lo ejecutas.

Una app full-stack se organiza en capas, y cada capa solo habla con su vecina:

[ UI / React ]      el formulario y la lista que ve el usuario
      │  llama a
      ▼
[ Cliente ]         pide datos a la API y guarda lo que recibe
      │  fetch(url, ...)
      ▼
[ API / rutas ]     traduce cada petición en una operación de datos
      │  store.crear(...)
      ▼
[ Datos / store ]   la "base de datos" (aquí, en memoria)

El flujo de una acción

Añadir una tarea recorre todas las capas y vuelve:

1. El usuario escribe y pulsa Añadir (UI).
2. La UI llama a cliente.agregar(texto).
3. El cliente hace fetch("/tareas", { method: "POST", body: { texto } }).
4. La API recibe la ruta, valida y llama a store.crear(texto).
5. El store guarda la tarea y la devuelve; la respuesta sube de vuelta.
6. El cliente recarga la lista y la UI se vuelve a pintar con la tarea nueva.

La clave: ninguna capa salta a otra que no sea su vecina. La UI no toca el store directamente; pasa por el cliente y la API. Eso es lo que hace una app mantenible, testable y... ejecutable de verdad.