🎥 Catálogo de Productos con Angular 20 + TailwindCSS + DaisyUI
¿Quieres aprender a construir una aplicación real desde cero con Angular 20? Te presento mi nueva serie gratuita donde te enseño a crear un Catálogo de Productos moderno, responsivo y dinámico, usando tecnologías ligeras y muy potentes del ecosistema frontend:
🎯 ¿Qué usamos?
* Angular 20 con buenas prácticas y arquitectura modular 🧱
* TailwindCSS + DaisyUI para diseño rápido y bonito 🎨
* JSON Server para simular el backend sin complicaciones 🔌
* RxJS, servicios, interfaces y rutas dinámicas con Angular 💡
📦 ¿Qué hacemos?
* Layout público reutilizable
* Navbar dinámico con categorías
* Listado paginado de categorías
* Vista por categoría de productos
* Página de detalle por producto
* Componentes reutilizables
* Manejo de observables y asincronía
* Todo 100% modular y escalable
🧠 Ideal para quienes están comenzando en Angular o quieren practicar estructurando una app tipo e-commerce desde cero. Cada video es claro, paso a paso, sin rodeos y con explicaciones al estilo colombiano 🇨🇴
Ng Product Catalog
Una aplicación de catálogo de productos desarrollada con Angular 20 que permite la visualización de productos organizados por categorías. La aplicación cuenta con un sistema de navegación intuitivo, paginación, y una interfaz moderna construida con Tailwind CSS y daisyUI.
Características principales
Catálogo de productos: Visualización de productos con detalles, precios e imágenes
Gestión de categorías: Organización de productos por categorías temáticas
Productos destacados: Sección especial para productos en promoción
Paginación: Navegación eficiente a través de grandes listas de productos
Diseño responsivo: Interfaz adaptable a diferentes dispositivos
Estados de carga: Componentes para mostrar estados de carga, error y contenido vacío
Tecnologías utilizadas
Angular 20: Framework principal para el desarrollo frontend
TypeScript: Lenguaje de programación tipado
Tailwind CSS: Framework de CSS utilitario para el diseño
daisyUI: Componentes de interfaz de usuario para Tailwind CSS
JSON Server: Simulación de API REST para desarrollo y pruebas
RxJS: Programación reactiva para manejo de datos asincrónicos
02 - Protege rutas, crea tu AuthService y usa Guards como un Pro
¡Ey parceros! En este segundo y último video del tutorial NgAuth0 vamos a llevar la seguridad de nuestra app al siguiente nivel. 🛡️
Ya tenemos layouts y páginas funcionando, ahora nos metemos de lleno con la lógica de autenticación real usando Auth0. En este capítulo implementamos paso a paso:
✅ Creación de un servicio de autenticación centralizado (`AppAuthService`)
✅ Exposición de los observables `user$`, `isAuthenticated$`, y `isLoading$`
✅ Implementación de `login()` y `logout()` usando `loginWithRedirect()`
✅ Creación de un Guard personalizado con `CanMatchFn` para proteger rutas
✅ Configuración de rutas públicas y privadas en `app.routes.ts`
✅ Lógica condicional en los navbars para mostrar Login, Logout y Perfil
✅ Buenas prácticas con Observables y flujo de autenticación
🔥 Todo esto con una arquitectura moderna, usando componentes `.ts` que incluyen template + lógica en un solo archivo, estilo Angular 20.
Este es el cierre perfecto de una mini-serie donde aprendiste a usar Auth0 de forma profesional y moderna con Angular. Ideal para proyectos reales o educativos.
💬 Si querés más videos de Angular, Typescript o autenticación, comentá abajo y suscribite. 🚀
14 - Guardar Productos en la Base de Datos y Utilidades Personalizadas en Angular
En este video número 14 del proyecto BasicNgFullStack, dimos un paso clave en el CRUD de productos: por fin estamos guardando los productos en la base de datos desde el frontend con Angular.
Eso sí, aún sin el manejo de imágenes, que viene más adelante. Lo importante era probar que toda la estructura ya está conectada y funcional.
Además, implementamos un par de utilidades personalizadas que nos van a servir bastante para manipular cadenas:
Conversión de strings separados por comas a arrays.
Limpieza de texto para valores dinámicos como etiquetas, atributos, etc.
🛠️ Este fue un video más técnico donde la mayor parte del código fue preparado fuera de línea, porque tenía bastante lógica y no quería que se alargara demasiado. Fue un proceso demorado pero muy necesario para avanzar con solidez.
08 - Refactorización de Código en Angular y Validaciones Avanzadas en Servicios.
En este octavo video del proyecto BasicNgFullStack nos enfocamos en mejorar la calidad del código y fortalecer la lógica del sistema, tanto en el frontend como en el backend.
Primero, en Angular, hicimos una importante refactorización para usar `withComponentInputBinding()` en lugar de `ActivatedRoute`, haciendo el acceso a parámetros de rutas más limpio y moderno.
También actualizamos los parámetros en las rutas para que sean más explícitos (por ejemplo, de `id` a `userId`, `categoryId`, etc.), lo cual mejora la legibilidad y mantiene el código más organizado.
En el backend, implementamos comprobaciones de seguridad como `forbiddenIds` en los servicios, para evitar que ciertos registros sensibles puedan ser actualizados o eliminados por accidente o abuso.
Todo esto sin romper la lógica existente del CRUD, manteniendo compatibilidad y ganando robustez.
Un video ideal para quienes ya tienen su sistema funcional pero quieren empezar a refinarlo y profesionalizarlo.
07 - CRUD de Marcas en el Frontend con Angular 19 - Reutilizando Estructura de Categorías. En este séptimo video del proyecto BasicNgFullStack, pasamos al frontend para implementar el CRUD completo de marcas (brands).
Tomamos como base la estructura ya desarrollada para las categorías y la reutilizamos eficientemente para construir toda la interfaz de gestión de marcas:
* Página de listado con tabla, paginación, ordenamiento y filtros
* Formulario reutilizable para crear y editar marcas
* Conexión con la API protegida mediante JWT
* Enrutamiento, servicios y manejo de errores
Este video es perfecto para entender cómo escalar módulos en Angular manteniendo buenas prácticas y sin duplicar lógica.
Todo sigue conectado con el backend en Express + TypeORM, usando PostgreSQL y tokens de autenticación.
06 - CRUD de Marcas en Backend con TypeScript, Express y TypeORM - Estructura Similar a Categorías.
En este sexto video del proyecto BasicNgFullStack dimos un paso estratégico antes de iniciar con los productos: implementar el módulo de marcas (brands).
A sugerencia de ChatGPT, decidimos crear una nueva entidad para manejar las marcas de los productos, lo cual da mayor organización y flexibilidad al sistema.
Clonamos la estructura existente de categorías, hicimos los ajustes necesarios y creamos el CRUD completo para marcas desde el backend, incluyendo controladores, rutas, validaciones, repositorio, DTOs y servicios.
Probamos todo en Postman, aprendiendo cómo extender la arquitectura sin duplicar código innecesario, y manteniendo el orden del proyecto.
Una clase ideal si querés aprender a escalar un backend con TypeScript, Express y TypeORM de forma limpia y ordenada.
🚀 ¡Finalicé mi serie sobre Express, TypeScript y Node.js! 🎉
Después de varias semanas de trabajo, pruebas y mucho aprendizaje, hoy cierro un ciclo importante en mi camino como desarrollador. Estoy emocionado de compartir contigo la lista de reproducción completa donde te enseño a construir un sistema de autenticación con gestión de usuarios y roles desde cero.
🛠️ Si alguna vez quisiste aprender a desarrollar un backend sólido, seguro y escalable, esta serie es para ti.
📌 ¿De qué trata esta serie?
Aquí exploramos a fondo cómo construir un backend bien estructurado usando Express, TypeScript y TypeORM, con un enfoque realista y práctico. Desde la configuración inicial hasta la implementación de seguridad avanzada, esta serie es una guía completa para cualquier desarrollador backend.
💡 ¿Qué aprenderás en estos videos?
✅ Configuración inicial de un servidor con Express + TypeScript.
✅ Implementación de TypeORM con MySQL/PostgreSQL.
✅ CRUD completo para gestión de usuarios y roles.
✅ Autenticación segura con JWT y Bcrypt.
✅ Protección de rutas con middleware para diferentes roles de usuario.
✅ Validaciones avanzadas con Class-Validator y DTOs.
✅ Uso del Repository Pattern para una mejor organización del código.
✅ Creación de seeders para datos iniciales de usuarios y roles.
✅ Refactorización y buenas prácticas en TypeScript.
✅ Colección de requests lista para Postman/Thunder Client.
🎯 Objetivo: Que al terminar esta serie, puedas construir cualquier backend con autenticación basada en roles y protección de rutas de manera profesional.
🔥 ¿Por qué deberías verla?
Si eres un desarrollador junior, esta serie te guiará desde los fundamentos hasta conceptos avanzados, explicando cada paso con claridad. Si eres un senior, encontrarás estrategias y patrones de diseño que pueden mejorar tu código o inspirarte en futuros proyectos.
🌟 Lo más importante:
Este proyecto no es solo un tutorial, es un proceso de aprendizaje en público. Implementé y mejoré mis habilidades mientras grababa estos videos, aplicando buenas prácticas para lograr un código limpio, mantenible y escalable.
💬 Déjame tus comentarios: ¿Te sirvió esta serie? ¿Qué temas te gustaría que cubriera en futuros videos?
📢 ¡Sigamos aprendiendo juntos!
Esto no termina aquí. Voy a seguir creando contenido sobre backend, seguridad, patrones de diseño y más. Si te gustó esta serie, suscríbete a mi canal, dale like y comparte esta publicación para que más desarrolladores la encuentren.
{ JEBC-DeV }
{ JEBC-DeV }
🚀 ¡Nueva Serie Completa Disponible!
🎥 Catálogo de Productos con Angular 20 + TailwindCSS + DaisyUI
¿Quieres aprender a construir una aplicación real desde cero con Angular 20? Te presento mi nueva serie gratuita donde te enseño a crear un Catálogo de Productos moderno, responsivo y dinámico, usando tecnologías ligeras y muy potentes del ecosistema frontend:
🎯 ¿Qué usamos?
* Angular 20 con buenas prácticas y arquitectura modular 🧱
* TailwindCSS + DaisyUI para diseño rápido y bonito 🎨
* JSON Server para simular el backend sin complicaciones 🔌
* RxJS, servicios, interfaces y rutas dinámicas con Angular 💡
📦 ¿Qué hacemos?
* Layout público reutilizable
* Navbar dinámico con categorías
* Listado paginado de categorías
* Vista por categoría de productos
* Página de detalle por producto
* Componentes reutilizables
* Manejo de observables y asincronía
* Todo 100% modular y escalable
🧠 Ideal para quienes están comenzando en Angular o quieren practicar estructurando una app tipo e-commerce desde cero. Cada video es claro, paso a paso, sin rodeos y con explicaciones al estilo colombiano 🇨🇴
🔗 Lista de reproducción completa aquí:
👉 youtube.com/playlist?list=PLe...
✨ ¡Dale play, suscríbete y acompáñame en este viaje de código y aprendizaje! 💪
#Angular #Angular20 #AngularSeries #TailwindCSS #DaisyUI #JsonServer #CatalogoDeProductos #FrontendDevelopment #AngularUI #RxJS #AngularRouting #AngularComponents #AngularApp #WebDev #DevColombia #JEBCDeV #ProgramaciónWeb #YouTubeDev #AngularProject #OpenSource #FullFrontend #AngularEcommerce #DesarrolladorWeb #AprendeAngular #DesarrolloWeb
3 months ago | [YT] | 6
View 0 replies
{ JEBC-DeV }
Ng Product Catalog
Una aplicación de catálogo de productos desarrollada con Angular 20 que permite la visualización de productos organizados por categorías. La aplicación cuenta con un sistema de navegación intuitivo, paginación, y una interfaz moderna construida con Tailwind CSS y daisyUI.
Características principales
Catálogo de productos: Visualización de productos con detalles, precios e imágenes
Gestión de categorías: Organización de productos por categorías temáticas
Productos destacados: Sección especial para productos en promoción
Paginación: Navegación eficiente a través de grandes listas de productos
Diseño responsivo: Interfaz adaptable a diferentes dispositivos
Estados de carga: Componentes para mostrar estados de carga, error y contenido vacío
Tecnologías utilizadas
Angular 20: Framework principal para el desarrollo frontend
TypeScript: Lenguaje de programación tipado
Tailwind CSS: Framework de CSS utilitario para el diseño
daisyUI: Componentes de interfaz de usuario para Tailwind CSS
JSON Server: Simulación de API REST para desarrollo y pruebas
RxJS: Programación reactiva para manejo de datos asincrónicos
3 months ago | [YT] | 1
View 0 replies
{ JEBC-DeV }
02 - Protege rutas, crea tu AuthService y usa Guards como un Pro
¡Ey parceros! En este segundo y último video del tutorial NgAuth0 vamos a llevar la seguridad de nuestra app al siguiente nivel. 🛡️
Ya tenemos layouts y páginas funcionando, ahora nos metemos de lleno con la lógica de autenticación real usando Auth0. En este capítulo implementamos paso a paso:
✅ Creación de un servicio de autenticación centralizado (`AppAuthService`)
✅ Exposición de los observables `user$`, `isAuthenticated$`, y `isLoading$`
✅ Implementación de `login()` y `logout()` usando `loginWithRedirect()`
✅ Creación de un Guard personalizado con `CanMatchFn` para proteger rutas
✅ Configuración de rutas públicas y privadas en `app.routes.ts`
✅ Lógica condicional en los navbars para mostrar Login, Logout y Perfil
✅ Buenas prácticas con Observables y flujo de autenticación
🔥 Todo esto con una arquitectura moderna, usando componentes `.ts` que incluyen template + lógica en un solo archivo, estilo Angular 20.
https://youtu.be/FmH94EOmpGQ
📁 Repositorio del proyecto en GitHub:
github.com/jebcdev/NgAuth0
Este es el cierre perfecto de una mini-serie donde aprendiste a usar Auth0 de forma profesional y moderna con Angular. Ideal para proyectos reales o educativos.
💬 Si querés más videos de Angular, Typescript o autenticación, comentá abajo y suscribite. 🚀
#Angular20 #Auth0 #AngularAuth0 #LoginAngular #AngularGuards #CanMatch #RxJS #ObservablesAngular #AppAuthService #ProtectedRoutes #AngularSecurity #NgAuth0 #FrontendSecurity #AngularTutorial #AngularServices #GuardsAngular #LazyLoading #DesarrolloWeb #JEBCDev #AngularColombia
@Esteban5Tael
3 months ago | [YT] | 2
View 0 replies
{ JEBC-DeV }
https://youtu.be/ZJ_UIES8dU0?list=PLe...
4 months ago | [YT] | 0
View 0 replies
{ JEBC-DeV }
14 - Guardar Productos en la Base de Datos y Utilidades Personalizadas en Angular
En este video número 14 del proyecto BasicNgFullStack, dimos un paso clave en el CRUD de productos: por fin estamos guardando los productos en la base de datos desde el frontend con Angular.
Eso sí, aún sin el manejo de imágenes, que viene más adelante. Lo importante era probar que toda la estructura ya está conectada y funcional.
Además, implementamos un par de utilidades personalizadas que nos van a servir bastante para manipular cadenas:
Conversión de strings separados por comas a arrays.
Limpieza de texto para valores dinámicos como etiquetas, atributos, etc.
🛠️ Este fue un video más técnico donde la mayor parte del código fue preparado fuera de línea, porque tenía bastante lógica y no quería que se alargara demasiado. Fue un proceso demorado pero muy necesario para avanzar con solidez.
Repositorio del proyecto:
github.com/jebcdev/BasicNgFullStack
#angular #angular19 #crud #typescript #desarrolloweb #guardarproductos #frontenddeveloper #utilidades #pipes #formulariosreactivos #jebcdev #basicngfullstack #postproducto #arrayfromstring #fullstackdev #apirest #productmanagement
4 months ago | [YT] | 0
View 0 replies
{ JEBC-DeV }
@JEBCDev
4 months ago | [YT] | 2
View 0 replies
{ JEBC-DeV }
08 - Refactorización de Código en Angular y Validaciones Avanzadas en Servicios.
En este octavo video del proyecto BasicNgFullStack nos enfocamos en mejorar la calidad del código y fortalecer la lógica del sistema, tanto en el frontend como en el backend.
Primero, en Angular, hicimos una importante refactorización para usar `withComponentInputBinding()` en lugar de `ActivatedRoute`, haciendo el acceso a parámetros de rutas más limpio y moderno.
También actualizamos los parámetros en las rutas para que sean más explícitos (por ejemplo, de `id` a `userId`, `categoryId`, etc.), lo cual mejora la legibilidad y mantiene el código más organizado.
En el backend, implementamos comprobaciones de seguridad como `forbiddenIds` en los servicios, para evitar que ciertos registros sensibles puedan ser actualizados o eliminados por accidente o abuso.
Todo esto sin romper la lógica existente del CRUD, manteniendo compatibilidad y ganando robustez.
Un video ideal para quienes ya tienen su sistema funcional pero quieren empezar a refinarlo y profesionalizarlo.
Repositorio del proyecto:
github.com/jebcdev/BasicNgFullStack
#angular #angular19 #typescript #refactorizacion #servicios #validaciones #crud #fullstack #backendseguro #expressjs #nodejs #typeorm #postgresql #desarrolloweb #cleanarchitecture #mejorascodigo #jebcdev
5 months ago | [YT] | 0
View 0 replies
{ JEBC-DeV }
07 - CRUD de Marcas en el Frontend con Angular 19 - Reutilizando Estructura de Categorías.
En este séptimo video del proyecto BasicNgFullStack, pasamos al frontend para implementar el CRUD completo de marcas (brands).
Tomamos como base la estructura ya desarrollada para las categorías y la reutilizamos eficientemente para construir toda la interfaz de gestión de marcas:
* Página de listado con tabla, paginación, ordenamiento y filtros
* Formulario reutilizable para crear y editar marcas
* Conexión con la API protegida mediante JWT
* Enrutamiento, servicios y manejo de errores
Este video es perfecto para entender cómo escalar módulos en Angular manteniendo buenas prácticas y sin duplicar lógica.
Todo sigue conectado con el backend en Express + TypeORM, usando PostgreSQL y tokens de autenticación.
Repositorio del proyecto:
github.com/jebcdev/BasicNgFullStack
#angular #angular19 #crud #typescript #marcas #brands #frontend #formularioangular #fullstack #categorias #reutilizacion #tailwindcss #nodejs #expressjs #typeorm #postgresql #jebcdev #desarrolloweb
5 months ago | [YT] | 1
View 0 replies
{ JEBC-DeV }
06 - CRUD de Marcas en Backend con TypeScript, Express y TypeORM - Estructura Similar a Categorías.
En este sexto video del proyecto BasicNgFullStack dimos un paso estratégico antes de iniciar con los productos: implementar el módulo de marcas (brands).
A sugerencia de ChatGPT, decidimos crear una nueva entidad para manejar las marcas de los productos, lo cual da mayor organización y flexibilidad al sistema.
Clonamos la estructura existente de categorías, hicimos los ajustes necesarios y creamos el CRUD completo para marcas desde el backend, incluyendo controladores, rutas, validaciones, repositorio, DTOs y servicios.
Probamos todo en Postman, aprendiendo cómo extender la arquitectura sin duplicar código innecesario, y manteniendo el orden del proyecto.
Una clase ideal si querés aprender a escalar un backend con TypeScript, Express y TypeORM de forma limpia y ordenada.
youtube.com/live/kljXBWuvkDc?si=oIOptkHtr4jLDWvT
github.com/jebcdev/BasicNgFullStack
#typescript #expressjs #nodejs #typeorm #postgresql #crud #backend #marcas #brands #api #restapi #postman #categorias #fullstack #jebcdev #desarrolloweb #estructuraescalable
5 months ago | [YT] | 0
View 0 replies
{ JEBC-DeV }
🚀 ¡Finalicé mi serie sobre Express, TypeScript y Node.js! 🎉
Después de varias semanas de trabajo, pruebas y mucho aprendizaje, hoy cierro un ciclo importante en mi camino como desarrollador. Estoy emocionado de compartir contigo la lista de reproducción completa donde te enseño a construir un sistema de autenticación con gestión de usuarios y roles desde cero.
🛠️ Si alguna vez quisiste aprender a desarrollar un backend sólido, seguro y escalable, esta serie es para ti.
📌 ¿De qué trata esta serie?
Aquí exploramos a fondo cómo construir un backend bien estructurado usando Express, TypeScript y TypeORM, con un enfoque realista y práctico. Desde la configuración inicial hasta la implementación de seguridad avanzada, esta serie es una guía completa para cualquier desarrollador backend.
💡 ¿Qué aprenderás en estos videos?
✅ Configuración inicial de un servidor con Express + TypeScript.
✅ Implementación de TypeORM con MySQL/PostgreSQL.
✅ CRUD completo para gestión de usuarios y roles.
✅ Autenticación segura con JWT y Bcrypt.
✅ Protección de rutas con middleware para diferentes roles de usuario.
✅ Validaciones avanzadas con Class-Validator y DTOs.
✅ Uso del Repository Pattern para una mejor organización del código.
✅ Creación de seeders para datos iniciales de usuarios y roles.
✅ Refactorización y buenas prácticas en TypeScript.
✅ Colección de requests lista para Postman/Thunder Client.
🎯 Objetivo: Que al terminar esta serie, puedas construir cualquier backend con autenticación basada en roles y protección de rutas de manera profesional.
🔥 ¿Por qué deberías verla?
Si eres un desarrollador junior, esta serie te guiará desde los fundamentos hasta conceptos avanzados, explicando cada paso con claridad. Si eres un senior, encontrarás estrategias y patrones de diseño que pueden mejorar tu código o inspirarte en futuros proyectos.
🌟 Lo más importante:
Este proyecto no es solo un tutorial, es un proceso de aprendizaje en público. Implementé y mejoré mis habilidades mientras grababa estos videos, aplicando buenas prácticas para lograr un código limpio, mantenible y escalable.
📢 ¿Qué puedes hacer ahora?
📺 Mira la lista de reproducción completa aquí:
🔗 youtube.com/playlist?list=PLe...
💻 Explora el código fuente en GitHub:
🔗 github.com/jebcdev/basic-auth-management-ts
💬 Déjame tus comentarios: ¿Te sirvió esta serie? ¿Qué temas te gustaría que cubriera en futuros videos?
📢 ¡Sigamos aprendiendo juntos!
Esto no termina aquí. Voy a seguir creando contenido sobre backend, seguridad, patrones de diseño y más. Si te gustó esta serie, suscríbete a mi canal, dale like y comparte esta publicación para que más desarrolladores la encuentren.
👉 Enlace a la serie completa: youtube.com/playlist?list=PLe...
¡Nos vemos en los comentarios! 👨💻👩💻🚀
🔗 #NodeJS #TypeScript #ExpressJS #TypeORM #Autenticación #JWT #Bcrypt #APIREST #DesarrolloWeb #Backend #CódigoLimpio #AprenderEnPúblico #DevJourney #FullStackDev #WebDevelopment #SoftwareDevelopment #DevLife #GitHub #Deploy #PostgreSQL #MySQL #RolesYUsuarios
8 months ago | [YT] | 3
View 2 replies
Load more