Angular y NestJS: Crea un CRUD Full Stack con JWT

Aprende a construir una aplicación web completa con Angular, conectada a una API REST desarrollada con NestJS, autenticación mediante JWT y persistencia de datos en MySQL.

En este curso desarrollaremos paso a paso un sistema administrativo para gestionar productos. La aplicación contará con inicio de sesión, registro de usuarios, cierre de sesión, rutas protegidas, persistencia de la sesión y todas las operaciones fundamentales de un CRUD: listar, crear, editar y eliminar productos.

No construiremos únicamente pantallas aisladas. Aprenderás a organizar un proyecto Angular utilizando una estructura profesional y escalable, separando correctamente las configuraciones, modelos, servicios, guards, interceptores, layouts y funcionalidades principales. Esta arquitectura te permitirá mantener el proyecto ordenado y reutilizar lo aprendido en futuros sistemas administrativos, inventarios, aplicaciones empresariales o paneles de gestión.

Trabajaremos con Angular standalone y TypeScript, utilizando componentes modernos y las herramientas principales del ecosistema Angular. Para la interfaz emplearemos Bootstrap 5, Bootstrap Icons y SweetAlert2, con los que construiremos formularios responsive, tablas, botones, mensajes de confirmación y alertas profesionales.

La aplicación consumirá diferentes endpoints de una API REST. Implementaremos un servicio de autenticación encargado del login, registro, logout y almacenamiento de la sesión. Cuando el usuario inicie sesión correctamente, el frontend guardará el token JWT y los datos básicos del usuario para mantenerlo autenticado durante la navegación.

También crearemos un interceptor HTTP que agregará automáticamente el token mediante el encabezado Authorization: Bearer TOKEN en las peticiones protegidas. De esta manera, no será necesario repetir manualmente la configuración del token en cada servicio o petición.

Para controlar la seguridad de la navegación implementaremos un AuthGuard, encargado de impedir el acceso a las pantallas privadas cuando no exista una sesión activa, y un GuestGuard, que evitará que un usuario autenticado regrese a las pantallas de login o registro. Ante un error 401, un token inválido o una sesión expirada, la aplicación limpiará los datos almacenados y redirigirá automáticamente al login.

Durante el desarrollo construiremos una pantalla de inicio de sesión, un formulario de registro, un dashboard administrativo, un layout privado con barra de navegación y las diferentes pantallas necesarias para administrar los productos. El usuario podrá consultar el listado obtenido desde la API, registrar nuevos productos, cargar un producto por su identificador, actualizar sus datos y eliminarlo después de aceptar una confirmación visual. Los endpoints utilizados permiten gestionar autenticación y todas las operaciones del CRUD de productos.

Los formularios serán desarrollados con Reactive Forms, permitiéndonos controlar las validaciones desde TypeScript. Validaremos campos obligatorios, correos electrónicos, contraseñas, nombres de productos, precios, cantidades y descripciones opcionales. Cuando un formulario tenga datos incorrectos, mostraremos mensajes claros debajo de los campos correspondientes para mejorar la experiencia del usuario.

También aprenderás a consumir una API REST con HttpClient, crear interfaces y modelos con TypeScript, centralizar la URL del backend, gestionar respuestas asíncronas con RxJS, crear servicios reutilizables, utilizar rutas hijas, controlar estados de carga, formatear precios y manejar errores HTTP como 400, 401, 404, 409, 500 y problemas de conexión con el servidor.

A lo largo del curso utilizaremos ChatGPT como asistente de desarrollo. Aprenderás a apoyarte en la inteligencia artificial para analizar requerimientos, planificar funcionalidades, entender errores, proponer estructuras, documentar decisiones y mejorar fragmentos del proyecto. ChatGPT será una herramienta de apoyo durante el proceso, pero cada implementación será revisada, explicada y adaptada para que comprendas realmente cómo funciona la aplicación.

El curso está orientado completamente a la práctica. Comenzaremos con la instalación y configuración del proyecto, continuaremos con la arquitectura, los modelos, los servicios y la autenticación, y posteriormente construiremos cada una de las operaciones del CRUD hasta obtener un sistema completamente integrado con el backend.

Este curso está dirigido a estudiantes y desarrolladores que desean aprender Angular mediante un proyecto real, a personas que ya conocen HTML, CSS o JavaScript y quieren dar el siguiente paso, a desarrolladores backend que necesitan construir una interfaz para sus APIs y a quienes desean comprender cómo implementar autenticación JWT, guards, interceptores, formularios reactivos y una arquitectura organizada.

Al finalizar tendrás una aplicación web funcional, responsive y conectada a una API NestJS, con autenticación, registro de usuarios, rutas protegidas, validaciones, manejo de errores y administración completa de productos. Además, contarás con una base sólida que podrás reutilizar para crear sistemas más grandes y agregar nuevas funcionalidades en el futuro.