← Volver / roadmaps / fullstack
RUTA · 24 SEMANAS · 6 FASES
— roadmap

Full-Stack Hero.

Todo junto. React arriba, Node.js + PostgreSQL abajo, Docker en medio. Un portfolio completo que un recruiter sí va a abrir.

Empezar esta ruta Descargar PDF →
// RESUMEN
24 semanas
6 fases
12 proyectos
0€ para empezar
// STACK
React TypeScript Next.js Node.js PostgreSQL Docker AWS JWT Redis Kubernetes
// VISTA GENERAL
01 · WK 01–03
Páginas modernas
02 · WK 04–06
Servidor sólido
03 · WK 07–08
Conectando todo
04 · WK 09–16
Proyectos complejos
05 · WK 17–20
Despliegue
06 · WK 21–24
Portfolio + pulido
Semana 01 Tu progreso: Páginas modernas Semana 24
— fase a fase

Qué construyes cada semana.

01
WK 01–03
EMPIEZA AQUÍ

Páginas web modernas

React + TypeScript + Next.js. El frontend profesional que luego vas a conectar con tu propio servidor.

// SEMANAS 1–2
React + TypeScript desde cero
  • TypeScript: tipos básicos, interfaces, generics — por qué hace el código más robusto
  • Componentes tipados: props con interfaces, events tipados
  • useState y useEffect con TypeScript
  • Zustand para estado global: alternativa simple a Redux
// MINI PROYECTO
Gestor de tareas con TypeScript
CRUD tipado, filtros por estado, persistencia en localStorage. Tu primer React en TypeScript sin errores de tipos extraños.
// SEMANA 3
Next.js 14 + Tailwind
  • App Router: layouts, páginas, loading y error boundaries
  • Server Components vs Client Components — cuándo cada uno
  • Tailwind CSS con Next.js: utilities y dark mode
  • Routing avanzado: grupos, slots, interceptors
// PROYECTO FASE
Panel de administración
Login con NextAuth, dashboard con gráficos (recharts), tablas con paginación, sidebar colapsable. Responsive. La base visual de todo lo que viene.
02
WK 04–06

Servidor sólido

Node.js + Express + TypeScript + PostgreSQL con Prisma. El backend que va a recibir las peticiones de tu panel de admin.

// SEMANAS 4–5
Node.js + Express + Prisma
  • Express con TypeScript: middlewares tipados, manejo de errores global
  • Prisma: schema, migraciones, queries y relaciones
  • Validación con Zod: mismos schemas en front y back
  • bcrypt para passwords: nunca guardar en claro
// MINI PROYECTO
API REST tipada con Prisma
CRUD completo con TypeScript estricto, validación Zod y errores descriptivos. La primera API que no devuelve 500 cuando algo falla.
// SEMANA 6
JWT + auth completa + tests
  • JWT con refresh tokens: sesiones seguras y de larga duración
  • Roles y permisos: middleware de autorización por role
  • Vitest para tests unitarios de servicios
  • Supertest para tests de endpoints con base de datos real
// PROYECTO FASE
Servidor completo con auth y tests
CRUD de recursos, registro + login + refresh, roles de usuario, Swagger automático y suite de tests. El primer backend sin vergüenza.
03
WK 07–08

Conectando todo

Frontend conectado con tu propio servidor, tiempo real con WebSockets y subida de archivos. El momento en que todo empieza a tener sentido.

// SEMANA 7
Integración front-back + CORS + cookies
  • CORS: por qué el navegador bloquea tus peticiones y cómo configurarlo bien
  • Cookies httpOnly vs localStorage para tokens — cuál es más seguro
  • React Query (TanStack): caché, refetch, estados de carga y error
  • Subida de archivos con Multer y almacenamiento en S3 o Cloudinary
// MINI PROYECTO
Panel conectado a tu API
El panel de admin de la fase 1 conectado al servidor de la fase 2. Login real, datos reales, subida de avatar. Front y back hablando.
// SEMANA 8
WebSockets en tiempo real
  • Socket.io: rooms, eventos, broadcast y autenticación de sockets
  • Reconexión automática en el cliente
  • Escalar WebSockets con Redis adapter
  • Tipado de eventos Socket.io con TypeScript
// PROYECTO FASE
App de chat en tiempo real
Mensajería en tiempo real, salas privadas, indicador de escritura, historial de mensajes. Tu primera app full-stack que alguien puede usar de verdad.
04
WK 09–16

Proyectos complejos

Tienda online + plataforma social. La fase donde realmente aprendes a pensar como full-stack developer, no como alguien que copia tutoriales.

// SEMANAS 9–12
Tienda online completa
  • Catálogo con búsqueda full-text en PostgreSQL y filtros por precio/categoría
  • Carrito con Redis: persistencia entre sesiones sin base de datos relacional
  • Pagos con Stripe: checkout, webhooks para confirmar pagos, reembolsos
  • Emails transaccionales: confirmación de pedido, cambio de estado
// PROYECTO
Tienda online funcional
Catálogo, carrito, checkout con Stripe, gestión de pedidos y panel de admin. El tipo de app que las empresas pagan bien por construir.
// SEMANAS 13–16
Plataforma social
  • Feed paginado con cursor-based pagination (no offset)
  • Sistema de likes y comentarios sin race conditions
  • Notificaciones en tiempo real con Socket.io y colas Bull
  • Búsqueda de usuarios con índices y trigrams en PostgreSQL
// PROYECTO FASE
Red social básica
Perfiles, follow, feed, likes, comentarios y notificaciones. Dos proyectos que juntos demuestran más que 20 tutoriales de YouTube.
05
WK 17–20

Despliegue + Docker + CI/CD

Dockerizar todo, GitHub Actions y deploy en AWS. El salto a producción real donde la mayoría de cursos te dejan tirado.

// SEMANAS 17–18
Docker + Docker Compose
  • Dockerfile para Next.js: build de producción optimizado
  • Dockerfile para Express: multi-stage para imagen pequeña
  • Docker Compose: frontend + backend + PostgreSQL + Redis + Nginx
  • Variables de entorno por entorno: dev, staging y producción
// MINI PROYECTO
Stack completo dockerizado
Todos los servicios corriendo con un docker compose up. Nginx enrutando al front y al back. Funciona igual en tu máquina que en el servidor.
// SEMANAS 19–20
AWS + GitHub Actions
  • EC2 para el backend, S3 + CloudFront para el frontend estático
  • RDS PostgreSQL gestionado: backups automáticos y failover
  • GitHub Actions: test → build → deploy automático en cada push a main
  • SSL con ACM y dominio con Route 53
// PROYECTO FASE
App completa en producción
Despliegue automático en AWS con SSL, CDN y pipeline CI/CD. Monitoreo con CloudWatch. Tu primera app que el mundo puede usar de verdad.
06
WK 21–24

Proyecto final y documentación

Cuatro semanas para pulir lo construido, optimizar el rendimiento y documentar las decisiones técnicas. El código que escribiste en 20 semanas merece que se entienda.

// SEMANAS 21–22
Performance y optimización
  • Lighthouse: identificar y corregir problemas reales de rendimiento
  • Image optimization, lazy loading y code splitting en Next.js
  • Revisar queries lentas en PostgreSQL con EXPLAIN ANALYZE
  • Monitoreo básico con logs estructurados en producción
// ENTREGABLE
Proyectos optimizados
Al menos uno de los proyectos anteriores con mejoras medibles de rendimiento documentadas: antes y después con métricas reales.
// SEMANAS 23–24
Documentación técnica real
  • READMEs con arquitectura, decisiones técnicas y cómo ejecutar el proyecto
  • Diagramas de la arquitectura: qué servicio habla con cuál y por qué
  • Escribir un artículo técnico sobre algo que aprendiste construyendo
  • Repasar todos los proyectos: arreglar bugs conocidos, actualizar dependencias
// ENTREGABLE FINAL
5 proyectos full-stack documentados
Cada proyecto con README completo, desplegado y con el código limpio. El resultado de 24 semanas de trabajo real.
— al terminar

Acabas con 6 proyectos en tu portfolio público.

01 WK 01–03

Panel de administración

Interfaz moderna con login seguro, gráficos y tablas dinámicas. Base visual completa y responsive.

ReactTypeScriptNext.js
02 WK 04–06

Servidor completo

CRUD, login, validación, documentación automática y tests. El primer backend que no da vergüenza enseñar.

Node.jsPostgreSQLJWT
03 WK 07–08

App de chat completa

Mensajería en tiempo real, salas privadas y compartir archivos. Tu primera app full-stack funcional.

WebSocketReactNode.js
04 WK 09–16

Tienda online completa

Catálogo, carrito, pagos con Stripe y gestión de pedidos. El proyecto que más valoran los recruiters.

ReactNode.jsStripe
05 WK 17–20

App completa en producción

Despliegue automático, SSL, CDN y monitoreo. La app que el mundo puede usar de verdad.

DockerAWSGitHub Actions
06 WK 21–24

Portfolio nivel senior

5 proyectos full-stack desplegados con documentación técnica real, blog con un artículo propio y código optimizado.

Todo lo anterior
— las otras rutas

¿No es la tuya? Sin problema.

RUTA · 16 SEMANAS

Frontend Master

HTML, CSS y JavaScript de base, luego React con hooks y estado. Despliegue real en Vercel desde la semana 1. Sin tutoriales infinitos.

HTML CSS JavaScript React Vercel
Ver roadmap →
RUTA · 20 SEMANAS

Backend Pro

El motor de cualquier app. APIs REST, bases de datos y autenticación. Elige tu lenguaje y despliega en VPS real.

Node.js Java PostgreSQL Docker
Ver roadmap →
// EMPIEZA AQUÍ

La primera fase
es gratis.

Crea tu cuenta y arranca por la primera fase. Si te engancha, pasas a Pro por 5€/mes. Si no, no pasa nada.

12 personas ya dentro · sin tarjeta · sin spam