Cómo se relaciona esto con tu app
Ahora superpón todo este panorama sobre una app hecha con vibe coding, porque cada pieza que construirás vive en un lado del baile:
- El es todo lo que corre en el navegador: los botones, formularios y el diseño que el usuario ve y sobre los que hace clic. Es el cliente. Sobre todo envía solicitudes y muestra respuestas.
- El es tu código corriendo en un servidor: la lógica que decide qué hacer con una solicitud, habla con la y construye la respuesta. Es el servidor.
Aquí está todo el recorrido de un registro en una sola imagen; cada palabra en negrita del capítulo está en el lugar que le corresponde:
FRONTEND (browser = client) BACKEND (server)
┌────────────────────────┐ ┌────────────────────────┐
│ user clicks "Sign up" │ POST /signup │ create the account │
│ │ ──────────────▶ │ set a cookie │
│ │ over HTTPS │ │
│ show welcome screen ◀──│ ─────────────── │ ◀── send back 200 OK │
└────────────────────────┘ └────────────────────────┘
Una interacción real cose todo esto junto. Un usuario hace clic en "Registrarse" (frontend). El navegador envía una solicitud POST por a una ruta como /api/signup, llevando los datos del formulario. Tu backend la recibe, crea la cuenta, establece una cookie para que el usuario permanezca con la iniciada, y devuelve un 200. El frontend ve el éxito y muestra una pantalla de bienvenida. Cada palabra en negrita ahí es algo que acabas de aprender, y esa es la forma completa de casi todo lo que construirás.
No tienes que retener todo esto en la cabeza a la vez. Pero cuando un capítulo posterior diga "la solicitud llegó al servidor pero volvió con un 500", o "configura este encabezado", o "esta ruta maneja el POST", ahora sabrás exactamente a qué parte del baile se refiere. Ese modelo mental es el verdadero prerrequisito, y ya lo tienes.