Programming & Development

Full Stack Web Development

Intermediate 12 modules • 40 hours •89 € VAT included

Curso orientado a entender y construir una aplicacion web completa, conectando frontend, backend, persistencia, autenticacion, APIs, pruebas, seguridad y despliegue. El objetivo no es aprender un framework concreto de memoria, sino comprender como se coordinan las piezas de una app moderna.

Desarrollo full stack significa poder razonar sobre toda la cadena de entrega: interfaz, comunicacion cliente-servidor, reglas de negocio, datos, observabilidad y operacion. Un buen perfil full stack no tiene que ser especialista maximo en cada capa, pero si entender sus contratos, dependencias y limites.

The first module is free. Request information about full-course access.

Please note: the course material (modules, exam, glossary and labs) is written in Spanish. Only the site interface is available in English. A good reading level of Spanish is required.

On sale soon. The first module is free: sign up and start.

hola@itlabcert.com

Request received. We will reply to your email within 48 working hours. No need to send it again.

For myself For my company or team

I have read and accept the privacy policy. We will only use your data to reply to you.

hola@itlabcert.com

Modulo 01. Arquitectura de una aplicacion web moderna

Objetivo del modulo

Entender las capas principales de una aplicacion web moderna y las responsabilidades que deben mantener separadas para que el sistema siga siendo evolucionable.

Resultados esperados

Explicar el papel de frontend, backend, base de datos y servicios auxiliares.
Diferenciar renderizado, API, logica de negocio y persistencia.
Reconocer contratos y acoplamientos entre capas.
Entender que significa pensar una aplicacion de extremo a extremo.

Desarrollo teorico

Una aplicacion web moderna no es una sola pieza de codigo, sino un sistema formado por varias capas que colaboran. La interfaz de usuario vive en el navegador, donde renderiza componentes, gestiona estado local y reacciona a eventos. El backend expone APIs, valida entrada, ejecuta reglas de negocio y habla con bases de datos o servicios externos. Por debajo aparecen persistencia, cache, colas, almacenamiento de ficheros, observabilidad y despliegue.

Una arquitectura sana separa responsabilidades. El frontend no deberia decidir reglas criticas de negocio ni confiar ciegamente en que los datos recibidos son validos. El backend no deberia conocer detalles concretos del DOM ni asumir como se pintara una pantalla. La base de datos no es el lugar para esconder toda la logica de dominio por comodidad. Cuando esas fronteras se mezclan, la app sigue funcionando durante un tiempo, pero se vuelve mas costosa de cambiar y probar.

Monolito web frente a SPA con API

En el modelo clasico de monolito web, el servidor genera HTML completo y lo envuelve con algo de JavaScript para interactividad. En el modelo SPA (Single Page Application), el navegador recibe una aplicacion JavaScript que consume una API REST o GraphQL. Ambos enfoques son validos; la decision depende del tipo de producto, el equipo y los requisitos de rendimiento.

Un monolito web con plantillas del servidor puede ser suficiente para paneles internos o sitios con poca interactividad. Una SPA con API separada encaja mejor cuando la interfaz es rica, hay multiples clientes (web, movil, integraciones) o los equipos de frontend y backend necesitan autonomia.

Monolito web:
  Navegador  -->  Servidor (rutas + plantillas + negocio + BD)

SPA + API:
  Navegador (React/Vue)  -->  API REST  -->  Servicios  -->  BD

Ejemplo de contrato entre capas

El contrato entre frontend y backend se materializa en la estructura de las peticiones y respuestas. Un ejemplo tipico para un listado de tickets:

GET /api/v1/tickets?status=open&page=1&limit=20
Accept: application/json
Authorization: Bearer eyJhbGci...

HTTP/1.1 200 OK
Content-Type: application/json

{
  "data": [
    {
      "id": "TK-1042",
      "title": "Error en el login con SSO",
      "status": "open",
      "priority": "high",
      "createdAt": "2026-03-15T10:30:00Z"
    }
  ],
  "total": 87,
  "page": 1,
  "pageSize": 20
}

Si el backend cambia la estructura de esta respuesta sin avisar, el frontend se rompe. Por eso el contrato debe ser explicito, documentado y versionado.

Capas tipicas y sus responsabilidades

En una aplicacion full stack moderna, cada capa tiene un papel definido:

Capa              Responsabilidad principal               Ejemplo
---------------------------------------------------------------------------
Frontend          Renderizado, estado local, UX           React, Vue, HTML/CSS
API Gateway       Routing, autenticacion, rate limiting   Nginx, Express
Logica negocio    Reglas de dominio, validacion           Servicios en Node/Python
Persistencia      Almacenamiento, consultas, integridad   PostgreSQL, MongoDB
Servicios aux.    Email, cache, colas, ficheros           Redis, S3, RabbitMQ
Observabilidad    Logs, metricas, trazas                  Prometheus, Grafana

Ejemplo de acoplamiento inadecuado

Un error frecuente es que el backend construya respuestas pensadas para una vista concreta del frontend:

// MAL: el endpoint devuelve datos formateados para una tabla especifica
app.get('/api/dashboard-table', async (req, res) => {
  const rows = await db.query(`
    SELECT CONCAT(first_name, ' ', last_name) AS "Nombre completo",
           DATE_FORMAT(created_at, '%d/%m/%Y') AS "Fecha",
           CASE status WHEN 'open' THEN 'Abierto' END AS "Estado"
    FROM tickets
  `);
  res.json(rows);
});

// MEJOR: el endpoint devuelve datos de dominio y el frontend formatea
app.get('/api/v1/tickets', async (req, res) => {
  const tickets = await ticketService.list(req.query);
  res.json({ data: tickets, total: tickets.length });
});

En el segundo caso, el backend expone datos de dominio y el frontend decide como mostrarlos. Si manana se necesita otra vista, otro cliente o un export CSV, la API sigue siendo valida.

Pensar de extremo a extremo

Disenar una aplicacion full stack significa considerar que pasa desde que el usuario pulsa un boton hasta que el resultado se persiste y se confirma. Ese recorrido atraviesa navegador, red, servidor, base de datos y vuelta. En cada paso pueden ocurrir errores, latencia o estados intermedios. Una arquitectura madura contempla todos esos puntos, no solo el camino feliz.

Contenido ampliado

Cliente, servidor y almacenamiento.
Monolito web frente a SPA + API.
Acoplamiento entre capas y contratos.

Puntos clave

Full stack significa comprender el sistema completo, no mezclarlo todo.
Cada capa tiene una responsabilidad dominante.
Los contratos entre capas son tan importantes como el codigo dentro de cada una.
La complejidad aparece cuando las fronteras se difuminan.

Checklist operativa

Identificar claramente capas y responsabilidades.
Revisar donde se valida y donde se persiste.
Comprobar que los contratos entre frontend y backend son explicitos.
Evitar que una capa asuma detalles internos de otra.

Errores frecuentes

Meter reglas de negocio importantes en el frontend.
Acoplar la API al detalle exacto de una vista.
Usar la base de datos como si fuera el dominio entero.
Diseñar sin pensar en pruebas ni despliegue futuro.

Practica sugerida

Dibuja la arquitectura de una app de tickets y marca que componentes residen en navegador, backend, base de datos y servicios externos.

Preguntas de autoevaluacion

Que responsabilidad principal tiene cada capa.
Por que una frontera clara simplifica cambios futuros.
Que problemas genera el acoplamiento excesivo entre frontend y backend.

Cierre

La arquitectura web moderna empieza por una idea simple: separar bien para poder evolucionar, probar y operar sin romper todo cada vez.

Organizar la capa de interfaz con componentes reutilizables y un manejo de estado comprensible.

What you will learn

Diferenciar presentacion, estado local y estado remoto.
Entender composicion de componentes.
Evitar props drilling y acoplamientos innecesarios.
Diseñar UI mas mantenible.

Module contents

Composicion de componentes en React
Estado local frente a estado compartido
Gestion de estado remoto
Composicion en Vue 3
Representar estados de carga y error en la UI