Angular Fullstack
14 semanas para llevar Angular del navegador al servidor, con pruebas y deploy automatizado.
Sobre este curso
Este curso te lleva del Angular moderno (standalone components, lazy loading, signals-friendly) hasta una app fullstack puesta en producción. Vas a construir un proyecto real que se conecta a un backend con autenticación JWT, maneja estado global, está cubierto por pruebas unitarias y E2E, y se despliega automáticamente con cada pull request.
No memorizas APIs: resuelves los problemas que enfrenta un equipo cuando una app pasa del prototipo a un producto que usa gente real.
Qué te llevas al terminar
- Diseñar arquitecturas Angular modernas con standalone components y lazy loading sin
@NgModule. - Dominar el ciclo de vida de un componente y pipes (incluidos los personalizados).
- Crear directivas personalizadas que reaccionan a observables.
- Construir formularios reactivos con validación y envío seguro a una API.
- Manejar streams de datos con RxJS (debounce, switchMap, observables anidados).
- Consumir APIs autenticadas con HttpClient, interceptores y JWT.
- Proteger rutas con Guards y Resolvers, y manejar errores de forma centralizada.
- Gestionar estado global con BehaviorSubject y NgRx básico.
- Escribir pruebas unitarias con Jasmine y pruebas E2E con Cypress.
- Configurar CI/CD con GitHub Actions y deploy automático en Netlify/Vercel con previews por PR.
- Integrar frontend Angular con un backend Node + MongoDB y optimizar el bundle final.
Estructura del curso
| Sprint | Semanas | Tema |
|---|---|---|
| Sprint 1 — Fundamentos modernos | 1–3 | Standalone, lazy loading, ciclo de vida, pipes y directivas |
| Sprint 2 — Datos y comunicación | 4–7 | Formularios reactivos, RxJS, HttpClient + JWT, guards y resolvers |
| Sprint 3 — Estado y calidad | 8–10 | State management, testing unitario, E2E con Cypress |
| Sprint 4 — Entrega y cierre | 11–14 | CI con GitHub Actions, deploy continuo, integración fullstack y demo final |
Detalle por semana
| Semana | Lección |
|---|---|
| 1 | Del @NgModule al Standalone + Lazy Loading |
| 2 | ngOnInit, ngOnChanges, ngOnDestroy y Pipes |
| 3 | Directivas personalizadas con observables |
| 4 | Formularios reactivos y validación |
| 5 | Introducción a RxJS: datos en movimiento |
| 6 | HttpClient, interceptores y JWT |
| 7 | Guards, Resolvers y manejo de errores |
| 8 | State Management con BehaviorSubject y NgRx básico |
| 9 | Testing unitario con Jasmine |
| 10 | Pruebas E2E con Cypress |
| 11 | CI con GitHub Actions: lint, test, build, coverage |
| 12 | Despliegue continuo: Netlify/Vercel con previews por PR |
| 13 | Integración front/back y optimización de bundles |
| 14 | Demo, revisión de código y buenas prácticas |
Prerrequisitos
- HTML, CSS y JavaScript moderno (ES2020+).
- TypeScript a nivel básico (tipos, interfaces, genéricos elementales).
- Angular básico recomendado: saber qué es un componente, cómo se renderiza una vista y cómo funcionan los
@Input/@Output. - Git y GitHub para abrir pull requests.
Cómo se trabaja cada semana
Cada lección semanal sigue el mismo ritmo:
- Hook narrativo — el problema real que vas a resolver esta semana.
- Video(s) — explicación grabada por un dev senior.
- Práctica guiada — código que tú escribes, no que solo lees.
- Recursos oficiales — link directo a
angular.devpara que profundices. - Quiz — valida que entendiste antes de avanzar.