Software Developer Platform

Conceptos de Testing

Tue, 28 Jul 2026 00:00:00 +0000

Detrás de cada jest.fn() y cada expect() hay conceptos formales con nombres precisos. Esta guía consolida el vocabulario y los principios que dan sentido a todo lo que han estado haciendo en clase.

Estándares REST

Tue, 21 Jul 2026 00:00:00 +0000

Una API que funciona no es lo mismo que una API bien diseñada. Esta guía cubre los principios REST que hacen tu API predecible, consistente y fácil de consumir por cualquier cliente.

Hashes — Cómo Guardar Contraseñas de Forma Segura

Tue, 14 Jul 2026 00:00:00 +0000

Qué es una función hash, por qué los hashes rápidos son peligrosos para contraseñas, cómo funciona bcrypt con salt y work factor, y cómo implementar hash y verificación en TypeScript.

Prisma Init, Schema y Primer findMany()

Tue, 07 Jul 2026 00:00:00 +0000

Guía completa para levantar un proyecto Express + TypeScript + Prisma 7 desde cero: instalación, schema.prisma, tipos de campo, relaciones 1:N, enum, @map/@@map, migraciones y primer Prisma Client.

Manejo de Errores de Conexión a la Base de Datos

Tue, 23 Jun 2026 00:00:00 +0000

Tipos de errores al conectar con PostgreSQL, cómo capturarlos con pg.Pool, estrategias de reconexión y la diferencia entre errores de conexión y errores de query.

Buenas Prácticas al Diseñar un Modelo Entidad-Relación

Tue, 16 Jun 2026 00:00:00 +0000

Convenciones de nombrado, normalización, errores comunes y checklist para construir modelos ER sólidos antes de escribir una sola línea de SQL.

Intro a Node.js, APIs REST y Express

Tue, 09 Jun 2026 00:00:00 +0000

Setup de un proyecto Node.js desde cero, fundamentos de APIs REST, arquitectura cliente-servidor, formato JSON y primer servidor Express con rutas GET.

Fundamentos de TypeScript y Entorno de Trabajo

Tue, 02 Jun 2026 00:00:00 +0000

Introducción al tipado fuerte, arquitectura de compilación y configuración de un proyecto local desde cero.

Bienvenido al Material de Aprendizaje

Wed, 26 Nov 2025 10:36:48 -0500

Material de Aprendizaje #

Esta sección está dedicada a proporcionar materiales de aprendizaje para desarrolladores de software.

¿Qué encontrarás aquí? #

En esta sección compartiremos:

Tutoriales de programación
Recursos de aprendizaje
Ejemplos de código
Mejores prácticas

¿Cómo buscar material? #

Utiliza las etiquetas y categorías para filtrar el contenido según tus necesidades.

Mocking Básico

Wed, 29 Jul 2026 00:00:00 +0000

Un mock bien escrito es la diferencia entre un test que prueba tu código y un test que prueba Prisma. Esta guía cubre todas las formas de crear dobles de prueba en Jest.

Comunicación en Tiempo Real

Wed, 22 Jul 2026 00:00:00 +0000

HTTP fue diseñado para request-response. Cuando necesitas que el servidor le hable al cliente sin que el cliente pregunte primero, necesitas otras herramientas.

Estructura JWT — JSON Web Tokens

Tue, 14 Jul 2026 00:00:00 +0000

Qué es un JWT, cómo se componen sus tres partes (header, payload, firma), qué claims estándar existen, por qué el payload no es secreto aunque no sea legible a simple vista, y cómo se usa un JWT para autenticar peticiones.

create(), where, Filtros de Relación e include

Tue, 07 Jul 2026 00:00:00 +0000

Cómo insertar registros con create() sin SELECT extra, consultar con findMany() y findUnique() usando filtros tipados, filtrar por campos de modelos relacionados con mode insensitive, e incluir objetos relacionados en la respuesta con include.

Validación de Params y Query Strings

Wed, 24 Jun 2026 00:00:00 +0000

Por qué req.params y req.query necesitan validación propia, sus particularidades como strings puros, y cómo construir esquemas de validación precisos con Zod para cada tipo de entrada.

DML II, Operadores de Filtro y Funciones de Agregación

Fri, 19 Jun 2026 00:00:00 +0000

Modificación y eliminación de datos con UPDATE y DELETE, construcción de filtros complejos con operadores lógicos y extracción de estadísticas con funciones de agregación y GROUP BY.

¿Por qué PostgreSQL? SQL vs. NoSQL y la Elección del Gestor

Wed, 17 Jun 2026 00:00:00 +0000

Comparación entre bases de datos SQL y NoSQL, cuándo elegir cada paradigma y las razones concretas por las que PostgreSQL es la elección correcta para el stack PERN.

Middlewares, Métodos HTTP y CRUD en Memoria

Wed, 10 Jun 2026 00:00:00 +0000

Middleware express.json, métodos POST/PUT/DELETE, códigos de estado HTTP y construcción de un CRUD completo en memoria con manejo de errores.

Estructuras de Control, Ciclos y Arrays Fuertemente Tipados

Wed, 03 Jun 2026 00:00:00 +0000

Dominio de estructuras condicionales (if, else, switch, ternarios), bucles iterativos (for, while) y la manipulación segura de arrays primitivos.

HTML

Wed, 26 Nov 2025 10:37:48 -0500

HTML: Lenguaje de etiquetas de hipertexto #

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).

¿Qué es el “Hipertexto”? #

“Hipertexto” hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).

Estrategias QA

Thu, 30 Jul 2026 00:00:00 +0000

El testing que han estado escribiendo es una pieza de algo más grande: una estrategia de calidad. Esta guía explica cómo encajan los unit tests, E2E, CI, performance y seguridad en un proceso coherente.

Patrón Pub/Sub

Thu, 23 Jul 2026 00:00:00 +0000

Cuando un módulo necesita notificarle algo a otro sin importarle quién escucha, Pub/Sub es la herramienta correcta. Es la diferencia entre llamar a alguien directamente y publicar un anuncio.

Vulnerabilidades en APIs REST

Tue, 14 Jul 2026 00:00:00 +0000

Las vulnerabilidades más frecuentes en APIs Node.js: SQL injection, IDOR, exposición de datos sensibles, autenticación rota, fuerza bruta, CORS mal configurado y fallos de configuración — con ejemplos del código que introduce cada falla y cómo corregirla.

include Anidado, orderBy y Array Vacío vs. null

Tue, 07 Jul 2026 00:00:00 +0000

Cómo traer relaciones de dos y tres niveles con include anidado, ordenar resultados con orderBy por campo propio y de relación, y entender la diferencia entre [] y null en los dos lados de una relación 1:N.

Aislar Rutas del Manejo de req/res

Thu, 25 Jun 2026 00:00:00 +0000

Por qué las rutas no deben contener lógica de negocio, cómo separar responsabilidades entre router, controller y model, y el beneficio directo en testeabilidad y mantenimiento.

Consultas Relacionales: JOINs y Rendimiento

Sat, 20 Jun 2026 00:00:00 +0000

Aprende a conectar datos que viven en tablas separadas usando INNER JOIN, LEFT JOIN y RIGHT JOIN, con ejemplos visuales y buenas prácticas de rendimiento.

La Integridad Referencial y la Importancia de los Constraints

Thu, 18 Jun 2026 00:00:00 +0000

Por qué la integridad referencial no es opcional, cómo cada tipo de constraint protege los datos y las consecuencias reales de omitirlos en producción.

Rutas Dinámicas, Express Router y Módulos

Wed, 10 Jun 2026 00:00:00 +0000

req.params, req.query, validaciones de entrada, Express Router, separación de archivos y módulos con TypeScript.

Funciones, Arrow Functions, Callbacks y Modelado de Objetos

Thu, 04 Jun 2026 00:00:00 +0000

Dominio de funciones con parámetros y retornos tipados, el fenómeno del hoisting, programación funcional con Arrow Functions y Callbacks, y creación de estructuras de objetos mediante Interfaces y Types.

Etiquetas De Texto y Multimedia

Thu, 04 Dec 2025 14:49:29 -0500

Etiquetas de Texto y Multimedia en HTML #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Utilizar correctamente las etiquetas semánticas de texto en HTML5 para estructurar contenido
Insertar y configurar elementos multimedia (imágenes, audio y video) con sus atributos apropiados
Aplicar técnicas de accesibilidad en contenido textual y multimedia
Optimizar la carga de recursos multimedia para mejorar el rendimiento web
Diferenciar entre etiquetas de formato visual y etiquetas semánticas

🎯 Introducción #

¿Por qué es importante dominar estas etiquetas? #

El contenido es el corazón de cualquier sitio web. Las etiquetas de texto y multimedia son las herramientas fundamentales que te permiten comunicar información de manera efectiva a tus usuarios.

Coverage

Fri, 31 Jul 2026 00:00:00 +0000

El 85% de coverage en el reporte de Jest no significa que el 85% de tu código está bien probado. Esta guía explica qué mide exactamente cada métrica, cómo interpretarla, y por qué el número puede mentir.

Casos de Uso

Fri, 24 Jul 2026 00:00:00 +0000

Un Service que hace demasiado es el síntoma. Un Caso de Uso bien delimitado es el remedio. Esta guía explica qué son, por qué existen y cómo implementarlos sin sobre-ingeniería.

Guards en NestJS

Tue, 14 Jul 2026 00:00:00 +0000

Qué son los Guards, cómo se ubican en el ciclo de vida de una petición, cómo crear un Guard de autenticación JWT y uno de roles, cómo aplicarlos por método, controlador o de forma global, y la diferencia entre Guards y Middleware.

update(), Errores P2025, Fechas, groupBy y $queryRaw

Tue, 07 Jul 2026 00:00:00 +0000

Actualización parcial con update() sin merge manual, manejo tipado de errores Prisma con PrismaClientKnownRequestError, filtros de rango de fecha con gte/lte, agregaciones con groupBy y _count, y consultas SQL arbitrarias con $queryRaw.

Manejo de Errores de Constraint en la Base de Datos

Fri, 26 Jun 2026 00:00:00 +0000

Cómo identificar, capturar y traducir violaciones de constraints de PostgreSQL en respuestas HTTP útiles para el cliente, desde el código 23505 hasta errores de FK.

OpenAPI, Swagger y Validación Básica

Fri, 12 Jun 2026 00:00:00 +0000

Documentación automática de APIs con swagger-ui-express y swagger-autogen, anotaciones en rutas y validación básica de entradas con patrones reutilizables.

Desestructuración y Métodos Funcionales de Arrays

Fri, 05 Jun 2026 00:00:00 +0000

Extracción eficiente de datos mediante desestructuración de objetos y arrays, y manipulación avanzada de datos usando métodos declarativos esenciales.

Propiedades Básicas Css

Fri, 05 Dec 2025 07:51:32 -0500

Propiedades Básicas de CSS: Background, Color, Font y Text #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Aplicar propiedades de fondo (background) para crear diseños visuales atractivos
Utilizar correctamente las diferentes formas de especificar colores en CSS
Configurar tipografías personalizadas con la familia de propiedades font
Controlar la apariencia del texto mediante propiedades de text
Combinar estas propiedades para crear interfaces web profesionales y legibles

🎯 Introducción #

¿Alguna vez te has preguntado cómo los sitios web logran esa apariencia pulida y profesional? La respuesta está en el dominio de las propiedades básicas de CSS. Estas cuatro familias de propiedades —background, color, font y text— son los pilares fundamentales del diseño web.

Pipelines CI

Sat, 01 Aug 2026 00:00:00 +0000

El CI que corrió pnpm test en cada PR es solo el comienzo. Esta guía explica cómo construir un pipeline completo: lint, types, tests, coverage, build, servicios de DB, artifacts y deploy.

Invalidación

Sat, 25 Jul 2026 00:00:00 +0000

Phil Karlton dijo que solo hay dos cosas difíciles en ciencias de la computación: invalidar caché y nombrar cosas. Esta guía explica por qué tiene razón y cómo resolver ambas.

Políticas CORS

Tue, 14 Jul 2026 00:00:00 +0000

Cómo funciona la política de mismo origen del navegador, qué headers controlan CORS, la diferencia entre peticiones simples y preflighted, cómo configurar CORS en Express y NestJS, y por qué origin ‘*’ es incompatible con cookies y credenciales.

Consultas Dinámicas Seguras con WHERE

Sat, 27 Jun 2026 00:00:00 +0000

Cómo construir cláusulas WHERE que cambian según los filtros del cliente sin abrir la puerta a SQL injection, usando parámetros posicionales y arrays de condiciones.

Variables de Entorno, CORS y Seguridad Básica

Sat, 13 Jun 2026 00:00:00 +0000

Variables de entorno nativas con –env-file, CORS middleware en Express y fundamentos de seguridad básica para APIs en producción.

Programación Asíncrona, Promesas y Async/Await

Sat, 06 Jun 2026 00:00:00 +0000

Comprensión del modelo de ejecución no bloqueante de JavaScript, gestión de flujos de datos asíncronos mediante Promesas y Async/Await, y control robusto de excepciones con try/catch.

Lunes — Equipo, Modelo de Datos e Identidad de Usuarios

Mon, 28 Sep 2026 00:00:00 +0000

Organiza al equipo y el repositorio, diseña el modelo relacional completo del Help Desk y deja funcionando el registro, el login con JWT y el perfil del usuario autenticado.

01 — Axios, Peticiones GET y CORS

Thu, 10 Sep 2026 00:00:00 +0000

Por qué Axios ahorra código repetido frente a fetch, cómo funcionan los interceptores por dentro, y por qué CORS es una restricción del navegador — no del servidor. Ejemplo de práctica con un catálogo de productos.

01 — Despliegue en Vercel y Variables de Entorno

Thu, 10 Sep 2026 00:00:00 +0000

Desplegamos una SPA en Vercel con CI/CD automático desde GitHub, entendemos por qué las variables de entorno de Vite se resuelven en build-time (no en runtime), y por qué un error de render puede tumbar toda la app si no hay un Error Boundary de nivel superior.

01 — Flujo de Login y JWT en React

Thu, 10 Sep 2026 00:00:00 +0000

Cómo viaja un JWT desde el login hasta cada petición protegida, por qué persist de Zustand no reemplaza tu criterio (solo automatiza guardar en localStorage), y por qué un store de Zustand necesita getState() cuando lo usas fuera de un componente. Ejemplo de práctica con el staff de una tienda.

01 — Intro React, Vite, JSX y Estado Básico

Thu, 10 Sep 2026 00:00:00 +0000

Qué es React, cómo nos ayuda y cómo piensa internamente (Virtual DOM, reconciliación). Creamos el primer proyecto con Vite y TypeScript, escribimos componentes funcionales con JSX, definimos cuándo conviene crear un componente nuevo, tipamos props con interfaces y manejamos estado local con useState — con ejercicios resueltos paso a paso sobre un ejemplo de práctica.

Día 1 — Dashboard con MetricCards

Thu, 10 Sep 2026 00:00:00 +0000

Configura el proyecto, crea los primeros componentes React tipados con TypeScript y construye la página Dashboard que será la pantalla principal de la SPA.

Día 1 — Datos Reales en el Dashboard

Thu, 10 Sep 2026 00:00:00 +0000

Configura Axios, habilita CORS en el backend y reemplaza los datos mock del MP1 por datos reales de la API. El dashboard muestra métricas cargadas desde el servidor.

Día 1 — Deploy en Vercel

Thu, 10 Sep 2026 00:00:00 +0000

Despliegas tu versión del MP3 en Vercel con variables de entorno correctas y el rewrite para SPA. Al final del día, tu Clínica está en producción.

Día 1 — Login Funcional con JWT

Thu, 10 Sep 2026 00:00:00 +0000

Implementas el flujo de autenticación: PaginaLogin con RHF + Zod, authStore con Zustand persist y el interceptor de Axios para el token. Al terminar el día, la app tiene login real.

Lectura Guiada — Anatomía de un JWT

Thu, 10 Sep 2026 00:00:00 +0000

La estructura header.payload.signature de un JWT, la diferencia entre decodificar y verificar, y por qué el payload nunca debe llevar información sensible.

Lunes — Identidad por Rol y Catálogo

Thu, 10 Sep 2026 00:00:00 +0000

Levanta el proyecto desde cero, construye el login y registro contra tu propia API de POS & E-commerce, y deja el catálogo administrable desde el panel de staff y navegable en la vitrina pública.

Lunes — Registro Público, Aprobación e Identidad por Rol

Thu, 10 Sep 2026 00:00:00 +0000

Levanta el proyecto desde cero, construye el registro público de postulantes, la aprobación desde el panel de Recepción y el login de los 4 roles contra tu propia API de SGAF.

Vocabulario Cloud y Deploy

Thu, 10 Sep 2026 00:00:00 +0000

Glosario de términos de cloud y despliegue: CDN, edge, build, hosting estático, variables de entorno, DNS, SSL/HTTPS y serverless. Lee esto antes de la clase de despliegue en Vercel.

Vocabulario Fetch

Thu, 10 Sep 2026 00:00:00 +0000

Glosario de términos esenciales de peticiones HTTP asíncronas: fetch, Promesas, Axios e interceptores. Lee esto antes de la primera clase de la semana.

Vocabulario UI

Thu, 10 Sep 2026 00:00:00 +0000

Glosario de términos esenciales de React, el DOM y la arquitectura de interfaces. Lee esto antes de la primera clase de la semana.

Lunes — Módulo de Citas y Comunicación entre Módulos

Mon, 03 Aug 2026 00:00:00 +0000

Agrega el módulo de Citas relacionado con Pacientes, inyectando PacientesService dentro de CitasService para validar que el paciente existe antes de agendar.

Viernes — Modelo de Datos y Arquitectura

Sun, 26 Jul 2026 00:00:00 +0000

Traduce el caso de negocio del sistema híbrido POS + E-commerce en un modelo relacional propio de al menos 9 tablas, deja tu schema.prisma migrado y siembra los datos mínimos para arrancar el proyecto.

Viernes — Modelo de Datos y Arquitectura

Sun, 26 Jul 2026 00:00:00 +0000

Traduce el caso de negocio de SGAF en un modelo relacional propio de al menos 9 tablas, deja tu schema.prisma migrado y siembra los datos mínimos para arrancar el proyecto.

Lunes — Setup de NestJS y Módulos de Pacientes y Médicos

Mon, 20 Jul 2026 00:00:00 +0000

Crea un proyecto NestJS, reutiliza el schema.prisma de la Semana 5 e inicializa los módulos de Pacientes y Médicos con un PrismaService inyectable.

Lunes — Levantamiento de Requerimientos y Setup de Prisma

Mon, 13 Jul 2026 00:00:00 +0000

Abstrae el caso de negocio de la clínica en entidades, atributos y relaciones por tu cuenta, inicializa Prisma y traduce tu propio modelo a schema.prisma.

Lunes S5 — Prisma Init, Schema, Migraciones y Primer findMany()

Tue, 07 Jul 2026 00:00:00 +0000

El maestro migra academia-api de CommonJS a ESM, inicializa Prisma 7, define el schema con modelos tipados, enum, @map/@@map y relación 1:N entre Instructor y Curso, ejecuta la migración inicial, genera el cliente y hace el primer findMany().

Lunes — Repositorio Base y Conexión a PostgreSQL

Mon, 06 Jul 2026 00:00:00 +0000

Clona el starter template, instala el driver pg y escribe tu primer endpoint que consulta la tabla products directamente desde Node.js.

Lunes S4 — pg.Pool, .env y Primeras Queries Asíncronas

Wed, 01 Jul 2026 00:00:00 +0000

El maestro instala pg, configura el Pool con credenciales desde .env, crea la base de datos y la tabla cursos, verifica la conexión antes de arrancar el servidor y migra los tres endpoints GET del array en memoria a consultas SQL reales con parámetros posicionales.

Lunes S1 — Requerimientos, Tipos de Relaciones y Primeras Queries SELECT

Fri, 26 Jun 2026 00:00:00 +0000

El maestro guía al grupo desde un problema de negocio verbal hasta las primeras consultas SELECT, pasando por la identificación de entidades, los tres tipos de relaciones y la diagramación visual antes de tocar pgAdmin.

Lunes S2 — Intro TypeScript, Variables, Tipos Primitivos y Operadores

Fri, 26 Jun 2026 00:00:00 +0000

El maestro instala la cadena typescript + ts-node + @types/node, muestra en vivo cómo tsc compila un archivo .ts a .js (y qué desaparece), luego trabaja variables, tipos primitivos y operadores dentro del contexto de la Academia TechPath.

Lunes S3 — Conceptos API REST, Setup Node.js + Express y Primeras Rutas GET

Fri, 26 Jun 2026 00:00:00 +0000

El maestro explica el modelo Cliente-Servidor y el formato JSON con un diagrama en pizarrón, monta en vivo el proyecto Node.js + TypeScript + Express desde cero, crea un array de cursos en memoria y expone tres rutas GET que el grupo prueba en Thunder Client.

Lunes — Levantamiento de Requerimientos y Entidades

Mon, 15 Jun 2026 00:00:00 +0000

Abstrae el caso de negocio ‘El Ricon del dabor’ en entidades, atributos y relaciones, y documenta el análisis en un archivo Markdown.

Lunes — Setup del Servidor y Primer Endpoint

Mon, 15 Jun 2026 00:00:00 +0000

Inicializa el proyecto con Node.js, Express y TypeScript, y crea el primer endpoint GET que confirma que el servidor está en línea.

Día 1 — Setup del Entorno y Lógica Computacional

Fri, 05 Jun 2026 00:00:00 +0000

Prepara tu máquina con PostgreSQL, Git y Node.js, y da tus primeros pasos en lógica computacional con variables y Raptor.

Lunes — Fundamentos y Setup Inicial

Fri, 05 Jun 2026 00:00:00 +0000

Configura el proyecto desde cero, declara las primeras variables con tipos explícitos e imprime un banner de bienvenida.

Martes — Roles, Guards y Catálogo de Categorías

Tue, 29 Sep 2026 00:00:00 +0000

Protege la API según el rol del usuario, habilita el listado de usuarios filtrable por rol y deja operativo el catálogo de categorías: de solo lectura para empleados y administrable por el personal interno.

02 — Carga Diferida, Suspense y Memoización

Thu, 10 Sep 2026 00:00:00 +0000

Por qué el código de una app crece más rápido que su uso real, y cómo React.lazy + Suspense evitan descargar código que el usuario no visitó. Por qué useMemo y useCallback existen específicamente por la comparación por referencia que ya viste en la semana 1. Ejemplo de práctica con un catálogo de productos.

02 — Generación UI con AI, Refactor y Tailwind CSS

Thu, 10 Sep 2026 00:00:00 +0000

Por qué las herramientas de IA generan UI de una forma predecible (y predeciblemente problemática), y cómo refactorizar ese código en componentes limpios con TypeScript y Tailwind. Ejemplo de práctica con un catálogo de productos.

02 — Mutaciones UI: POST, PUT, DELETE y UI Optimista

Thu, 10 Sep 2026 00:00:00 +0000

La diferencia real entre leer y escribir datos, por qué separar los servicios de la UI, y qué hace exactamente useOptimistic por dentro — no es magia, es guardar el estado esperado antes de confirmar el servidor. Ejemplo de práctica con pedidos de una tienda.

02 — Rutas Protegidas y Axios Interceptors con Refresh

Thu, 10 Sep 2026 00:00:00 +0000

Por qué un Guard es solo un componente que decide entre renderizar el Outlet o redirigir, y qué hace por dentro un interceptor de refresh token para renovar la sesión sin que el usuario lo note. Ejemplo de práctica con el staff de una tienda.

Access Token vs Refresh Token

Thu, 10 Sep 2026 00:00:00 +0000

Por qué el access token tiene vida corta, y cómo un interceptor de Axios renueva la sesión automáticamente al recibir un 401, sin que el usuario lo note.

Checklist de Deploy

Thu, 10 Sep 2026 00:00:00 +0000

Checklist de referencia rápida antes de cualquier deploy a producción: build sin errores, variables de entorno, rewrite de SPA, y limpieza de código de debug. Exactamente lo que vas a necesitar en tu semana de Proyecto Final.

Día 2 — CRUD Real: POST, PUT, DELETE

Thu, 10 Sep 2026 00:00:00 +0000

Conectas las operaciones de escritura al backend real. Crear pacientes con POST, cambiar estado de citas con UI optimista (useOptimistic) y eliminar con modal de confirmación.

Día 2 — Lazy Loading y Dashboard Analítico

Thu, 10 Sep 2026 00:00:00 +0000

Conviertes todas las páginas secundarias a React.lazy con Suspense, y agregas un Dashboard Analítico optimizado con useMemo para los cálculos de métricas.

Día 2 — Página de Pacientes con AI y Tailwind

Thu, 10 Sep 2026 00:00:00 +0000

Genera la página de pacientes con Stitch AI, analiza el código, la refactorizas en componentes tipados y la estilizas con Tailwind. Esta página será la ruta /pacientes del proyecto.

Día 2 — Rutas Protegidas por Rol

Thu, 10 Sep 2026 00:00:00 +0000

Implementas el componente RutaProtegida que redirige al login si no hay sesión activa, y protege rutas específicas por rol de usuario.

Lectura Guiada — Cómo Funcionan las Promesas

Thu, 10 Sep 2026 00:00:00 +0000

Los 3 estados de una Promesa, el encadenamiento con .then, y por qué async/await no es más que azúcar sintáctico sobre el mismo mecanismo.

Martes — Estructura Académica y Motor de Matriculación

Thu, 10 Sep 2026 00:00:00 +0000

Construye la administración de periodos, materias, grupos y horarios, y la pantalla de matriculación del estudiante con feedback específico para cada una de las 4 reglas de negocio.

Martes — Punto de Venta (POS)

Thu, 10 Sep 2026 00:00:00 +0000

Construye el módulo de venta de mostrador desde la interfaz: carrito interno, cobro, comprobante y manejo claro del rechazo por stock insuficiente.

Prompting UI

Thu, 10 Sep 2026 00:00:00 +0000

Cómo escribir prompts efectivos para herramientas de IA que generan interfaces. La diferencia entre un prompt genérico y uno estructurado es la diferencia entre código aprovechable y código basura.

Martes — Documentación Completa con Swagger

Mon, 03 Aug 2026 00:00:00 +0000

Documenta toda la API en /api/docs con @nestjs/swagger, incluyendo los DTOs con @ApiProperty() y el esquema de seguridad Bearer para las rutas protegidas.

Lunes — Identidad, Autenticación y Esqueleto de la API

Sun, 26 Jul 2026 00:00:00 +0000

Levanta el proyecto NestJS, habilita el registro público de postulantes con aprobación ligada a pago, conecta Passport-JWT para los 4 roles de SGAF y protege cada módulo según corresponda.

Lunes — Identidad, Roles y Catálogo

Sun, 26 Jul 2026 00:00:00 +0000

Conecta Passport-JWT para los 3 roles del negocio y deja el catálogo de productos e inventario funcionando con CRUD completo.

Martes — CRUD completo de Pacientes y Médicos con PrismaService

Mon, 20 Jul 2026 00:00:00 +0000

Completa el CRUD de pacientes y médicos usando decoradores de NestJS y el PrismaService inyectado, replicando la lógica que ya construiste en Express durante la Semana 5.

Martes — CRUD de Pacientes y Médicos con Prisma Client

Mon, 13 Jul 2026 00:00:00 +0000

Organiza tu proyecto en capas MVC sobre Prisma Client, valida datos con Zod y construye el alta de pacientes y la búsqueda de médicos por especialidad.

Martes S5 — create(), findMany()/findUnique() con where, Filtros de Relación e include

Tue, 07 Jul 2026 00:00:00 +0000

El maestro migra la capa Model de academia-api de pool.query() a Prisma Client: reemplaza las lecturas con findMany()/findUnique(), agrega filtros dinámicos con where, filtra por campos del modelo relacionado, incluye el Instructor en las respuestas con include, y sustituye el INSERT+RETURNING por create().

Martes — Arquitectura Limpia con el Patrón MVC

Mon, 06 Jul 2026 00:00:00 +0000

Refactoriza el endpoint del lunes al patrón MVC y luego extiende la API con CRUD completo: GET por id, POST y PUT para productos.

Miércoles — Middlewares de Validación con Zod

Mon, 06 Jul 2026 00:00:00 +0000

Instala Zod, define schemas de validación y crea middlewares que bloquean requests inválidos antes de que lleguen al controlador.

Martes S4 — Arquitectura MVC: Controllers y Models

Wed, 01 Jul 2026 00:00:00 +0000

El maestro explica la arquitectura MVC en el contexto de Express, reestructura las carpetas del proyecto y migra la lógica de las rutas GET a sus capas correctas: las queries SQL van al Model, la lógica de request/response va al Controller, y el archivo de rutas queda como un mapa delgado de URL→handler.

Martes S1 — Llaves, Tipos de Datos, Normalización y Tablas Pivote N:M

Fri, 26 Jun 2026 00:00:00 +0000

El maestro refuerza el sistema de llaves, presenta los tipos de datos más comunes, introduce la normalización con un ejemplo concreto y construye la primera relación N:M mediante una tabla pivote — todo en SQL puro desde pgAdmin.

Martes S2 — Estructuras de Control, Ciclos y Arrays

Fri, 26 Jun 2026 00:00:00 +0000

El maestro construye un mini-sistema de calificaciones con if/else, switch y ternario, luego acumula totales con for y while, y termina creando y mutando arrays tipados con push y pop.

Martes S3 — Middlewares, CRUD en Memoria y try/catch en Rutas

Fri, 26 Jun 2026 00:00:00 +0000

El maestro muestra el bug de req.body sin express.json, conecta la interfaz Curso con el esquema PostgreSQL de la semana 1 (Migración S1), y construye el CRUD completo con POST, PUT y DELETE sobre el array en memoria, envolviendo cada ruta en try/catch.

Martes — CRUD en Memoria y Middlewares HTTP

Mon, 15 Jun 2026 00:00:00 +0000

Implementa los cuatro verbos HTTP sobre un arreglo en memoria, aplica express.json() y responde con los códigos de estado correctos.

Martes — Modelo Relacional y Diagrama ER

Mon, 15 Jun 2026 00:00:00 +0000

Resuelve la relación Muchos a Muchos con una tabla pivote, traduce las entidades a código DBML y genera el diagrama visual en dbdiagram.io.

Día 2 — Entradas, Tipos de Datos y Concatenación

Fri, 05 Jun 2026 00:00:00 +0000

Aprende a darle ‘oídos’ a tu programa con el bloque Input, la diferencia crítica entre Strings y números, y cómo armar frases dinámicas con concatenación.

Martes — Control de Flujo y Colecciones

Fri, 05 Jun 2026 00:00:00 +0000

Implementa el menú interactivo del gestor con un ciclo while, manejo de opciones con if/else y un arreglo tipado para almacenar tareas.

Eventos en React

Thu, 26 Feb 2026 11:00:00 -0400

Los eventos en React funcionan igual que en HTML, pero con dos reglas que debes memorizar.

Las Dos Reglas de Oro #

HTML (viejo)	React (nuevo)
`onclick`	`onClick`
`onchange`	`onChange`
`onsubmit`	`onSubmit`

Regla 1 camelCase: La segunda palabra va en mayúscula.

Regla 2 Función, no texto: Pasas la función entre {}, sin ejecutarla.

// HTML tradicional
<button onclick="saludar()">Clic</button>

// React
<button onClick={saludar}>Clic</button>

Importante: onClick={saludar} onClick={saludar()}. Con paréntesis la función se ejecuta al cargar, ¡no al hacer clic!

Estado en React (useState)

Thu, 26 Feb 2026 11:00:00 -0400

Los componentes de React tienen “memoria”. A esta memoria le llamamos Estado (State). Sin estado, la pantalla nunca cambia aunque los datos sí lo hagan.

El problema: variables normales no funcionan #

function ContadorRoto() {
 let numero = 0;

 const sumar = () => {
 numero = numero + 1;
 console.log("El número ahora es:", numero); // cambia en consola...
 };

 return (
 <div>
 <h1>Número: {numero}</h1> {/* ...pero siempre muestra 0 */}
 <button onClick={sumar}>Sumar 1</button>
 </div>
 );
}

React dibuja el componente una vez y, a menos que le avisemos, no vuelve a actualizar la pantalla.

Consolidación y Buenas Prácticas en React

Thu, 26 Feb 2026 11:00:00 -0400

Consolidación, Flujo de Datos y Buenas Prácticas #

Hoy unimos todas las piezas vistas y aprendemos a escribir código como los profesionales.

Parte 1 Repaso de los 4 Pilares #

Concepto	En una frase
React	Dividimos la UI en piezas pequeñas y reutilizables
Componentes	Funciones en `PascalCase` que retornan JSX
Eventos	camelCase + función sin ejecutar: `onClick={saludar}`
useState	Da una variable para leer y una función para actualizar

Parte 2 Flujo de Datos Unidireccional #

En React los datos solo viajan hacia abajo (Padre Hijo) a través de Props.

Efectos Secundarios con useEffect

Thu, 26 Feb 2026 11:00:00 -0400

Dominando `useEffect` Efectos Secundarios #

Nuestros componentes hacen tres cosas: reciben datos, procesan y muestran JSX. Pero a veces necesitan “salir” de ese flujo: traer datos de una API, cambiar el título del navegador, iniciar un temporizador. A esas acciones las llamamos Efectos Secundarios.

import { useState, useEffect } from "react";

Anatomía de `useEffect` #

useEffect(() => {
 // Código del efecto (lo que quieres hacer)
}, []); // Arreglo de dependencias (cuándo ejecutarlo)

Las 3 Reglas de Ejecución #

Escenario	Cuándo se ejecuta	Uso típico
Sin arreglo	En cada re-render	Casi nunca puede causar bucles infinitos
Arreglo vacío `[]`	Solo una vez al montar	Fetch inicial de datos de una API
Con variables `[var]`	Al montar + cuando `var` cambia	Reaccionar a un filtro, búsqueda, etc.

// Escenario B fetch al cargar (el más común)
useEffect(() => {
 console.log("Solo al montar el componente");
}, []);

// Escenario C reacciona a un estado específico
useEffect(() => {
 console.log(`Contador cambió a: ${contador}`);
}, [contador]); // ignora otros estados

Ejemplo Real: Consumir una API #

function ListaUsuarios() {
 const [usuarios, setUsuarios] = useState([]);

 useEffect(() => {
 fetch("https://jsonplaceholder.typicode.com/users")
 .then((res) => res.json())
 .then((datos) => setUsuarios(datos));
 }, []); // [] = solo un fetch al cargar

 return (
 <ul>
 {usuarios.map((usuario) => (
 <li key={usuario.id}>{usuario.name}</li>
 ))}
 </ul>
 );
}

Código de Limpieza (Cleanup) #

Si tu efecto inicia algo que corre en el fondo (temporizadores, suscripciones), debes limpiarlo cuando el componente desaparezca si no, causará errores de memoria.

Peticiones HTTP y Conexión con el Backend

Thu, 26 Feb 2026 11:00:00 -0400

Peticiones HTTP Conectando React con el Backend #

En una app real, React necesita hablar con un servidor para pedir, guardar, actualizar o borrar datos. Lo hacemos con Peticiones HTTP.

El Diccionario HTTP (CRUD) #

Verbo	Acción	Ejemplo
GET	Leer datos	Traer lista de productos
POST	Crear datos nuevos	Registrar un usuario
PUT / PATCH	Actualizar datos	Cambiar foto de perfil
DELETE	Borrar datos	Eliminar un artículo del carrito

GET + `useEffect` La Pareja Ideal #

Cuando quieres mostrar datos al cargar la página, el GET va dentro de useEffect con [].

Miércoles — Ciclo de Vida de los Tickets y Comentarios

Wed, 30 Sep 2026 00:00:00 +0000

Construye el núcleo transaccional del Help Desk: tickets con estados, asignación a agentes y visibilidad por rol, más un historial de comentarios por ticket con autor y fecha registrados automáticamente.

03 — Carga de Archivos y Previsualización Local

Thu, 10 Sep 2026 00:00:00 +0000

Enviamos archivos al backend con FormData y multipart/form-data, mostramos una previsualización local antes de subir usando URL.createObjectURL, y conectamos con el endpoint de upload del backend.

03 — Custom Hooks: Extraer Lógica Reutilizable

Thu, 10 Sep 2026 00:00:00 +0000

Qué hace que una función sea un ‘hook’ de verdad (no solo el nombre), por qué extraer lógica con estado en un Custom Hook separa ‘qué hace la pantalla’ de ‘cómo se ve’, y cómo componer varios hooks dentro de uno propio. Ejemplo de práctica con un catálogo de productos.

03 — Eventos del DOM, Controlled Inputs e Inmutabilidad

Thu, 10 Sep 2026 00:00:00 +0000

Por qué React envuelve los eventos nativos del DOM, qué significa realmente que un input sea ‘controlado’, y por qué React exige inmutabilidad para detectar cambios en arrays y objetos. Ejemplo de práctica con un catálogo de productos.

03 — Gestión de Estado Global con Zustand

Thu, 10 Sep 2026 00:00:00 +0000

Por qué el prop drilling se vuelve insostenible en apps reales, por qué Context API no es la respuesta para estado que cambia seguido, y cómo un selector de Zustand evita re-renders innecesarios comparando referencias — la misma idea de la semana 1, aplicada a estado global. Ejemplo de práctica con un catálogo de productos.

Día 3 — Custom Hooks: usePacientes y useCitas

Thu, 10 Sep 2026 00:00:00 +0000

Extraes la lógica de datos de Pacientes y Citas de tus páginas hacia Custom Hooks reutilizables, dejando los componentes enfocados solo en la vista.

Día 3 — Formulario de Perfil con Foto

Thu, 10 Sep 2026 00:00:00 +0000

El usuario puede actualizar sus datos y subir una foto de perfil con previsualización inmediata antes de enviar. Usa FormData y multipart/form-data para el upload.

Día 3 — Migrar Estado Local a Zustand

Thu, 10 Sep 2026 00:00:00 +0000

Eliminas el prop drilling de la SPA migrando el estado de pacientes y citas a stores de Zustand con acciones asíncronas, devtools configurado y selectores correctos.

Día 3 — Pacientes Interactivos: Filtros y CRUD en Estado

Thu, 10 Sep 2026 00:00:00 +0000

La lista de pacientes del día 2 ahora reacciona a las acciones del usuario: filtros combinados, agregar, cambiar estado y eliminar — todo con inmutabilidad garantizada y event handlers tipados.

Guards y Rutas Protegidas — Patrones

Thu, 10 Sep 2026 00:00:00 +0000

Qué es un Guard en una SPA, por qué es ‘solo un if’ que decide entre Outlet y Navigate, y la diferencia entre revisar sesión y revisar rol.

Lectura Guiada — lazy y Suspense en react.dev

Thu, 10 Sep 2026 00:00:00 +0000

Lectura guiada de la documentación oficial de React sobre lazy y Suspense: qué problema resuelve el code splitting y cómo leer la referencia oficial en react.dev. Prepara la clase de martes.

Miércoles — Aula Virtual

Thu, 10 Sep 2026 00:00:00 +0000

Construye el flujo completo del aula virtual: un profesor publica una asignación, un estudiante entrega y el profesor califica, todo desde la interfaz.

Miércoles — Tienda en Línea y Cola de Órdenes

Thu, 10 Sep 2026 00:00:00 +0000

Construye el checkout del cliente web, verifica la sincronización de inventario entre canales desde la interfaz, y la cola de órdenes con sus estados logísticos.

Tailwind — Patrones de Componentes UI

Thu, 10 Sep 2026 00:00:00 +0000

Recetas de Tailwind CSS para los componentes de UI más comunes: botones, cards, badges, alerts y modales. Combina utilidades para construir piezas reutilizables sin escribir CSS.

Thinking React — La Filosofía de React

Thu, 10 Sep 2026 00:00:00 +0000

Cómo piensa un desarrollador de React: descomponer UI en componentes, identificar el estado mínimo necesario y ubicar dónde debe vivir ese estado. El proceso mental antes de escribir código.

Miércoles — Interceptor Global de Logging

Mon, 03 Aug 2026 00:00:00 +0000

Construye un interceptor que registra cada request con su método, ruta y tiempo de respuesta, aplicado globalmente a toda la API.

Martes — Motor de Matriculación

Sun, 26 Jul 2026 00:00:00 +0000

Construye el motor de matriculación de SGAF, demostrando con datos reales que tu API respeta el límite de créditos, el cupo de los grupos y los traslapes de horario.

Martes — Punto de Venta (POS)

Sun, 26 Jul 2026 00:00:00 +0000

Construye el módulo de venta de mostrador: carrito interno, cobro y deducción inmediata de stock.

Miércoles — DTOs y Validación con Pipes

Mon, 20 Jul 2026 00:00:00 +0000

Reemplaza la validación con Zod de la Semana 5 por DTOs de class-validator y un ValidationPipe global, aplicados al CRUD de pacientes y médicos.

Miércoles — Expediente del Paciente y Autenticación con JWT

Mon, 13 Jul 2026 00:00:00 +0000

Construye la vista de expediente con relaciones de Prisma e integra un kit de autenticación con JWT y middlewares de autorización por rol.

Miércoles S5 — include Anidado, orderBy y Array Vacío vs. null en 1:N

Tue, 07 Jul 2026 00:00:00 +0000

El maestro agrega el modelo Modulo al schema, ejecuta una segunda migración, y enseña include anidado (Instructor → Curso → Modulo), orderBy por campo propio y campo de relación, y la diferencia entre null y [] en los dos lados de una relación 1:N.

Miércoles S4 — Validación con Zod y Middlewares de Validación

Wed, 01 Jul 2026 00:00:00 +0000

El maestro instala Zod, define schemas tipados para los cuerpos de las peticiones, crea una fábrica de middleware de validación genérica y la integra en las rutas POST y PUT — reemplazando las validaciones manuales con if/typeof por errores estructurados con nombre de campo y mensaje.

Miércoles S1 — DDL: CREATE, DROP, Constraints y ALTER TABLE

Fri, 26 Jun 2026 00:00:00 +0000

El maestro traduce el esquema lógico del martes a DDL real, formaliza las restricciones físicas NOT NULL, UNIQUE y FOREIGN KEY, y enseña ALTER TABLE para evolucionar un esquema sin destruirlo.

Miércoles S2 — Funciones, Arrow Functions, Callbacks e Interfaces

Fri, 26 Jun 2026 00:00:00 +0000

El maestro construye un sistema de gestión de cursos paso a paso: primero con funciones nombradas (y demuestra hoisting), luego reescribe con arrow functions, introduce callbacks tipados para procesar inscripciones, y termina modelando los datos con interfaces y types.

Miércoles S3 — req.query, Express Router, Módulos y Separación de Archivos

Fri, 26 Jun 2026 00:00:00 +0000

El maestro añade filtrado por query string al GET de cursos, luego refactoriza el índice monolítico del martes en cuatro archivos con responsabilidad única: types, utils, routes y app — dejando index.ts reducido a una sola línea de listen.

Miércoles — Enrutamiento Dinámico y Refactorización

Mon, 15 Jun 2026 00:00:00 +0000

Extrae las rutas a un Router independiente, filtra estudiantes por query string y agrega el endpoint de búsqueda por ID.

Miércoles — Estructura Física con DDL

Mon, 15 Jun 2026 00:00:00 +0000

Traduce el diagrama ER a sentencias SQL reales: crea la base de datos, define las tablas con sus tipos de datos y establece todas las restricciones de integridad.

Día 3 — Matemáticas Computacionales y PEMDAS

Fri, 05 Jun 2026 00:00:00 +0000

Aprende los operadores aritméticos de la computadora, la ley suprema de PEMDAS y cómo usar paréntesis para controlar el orden de las operaciones.

Miércoles — Objetos, Interfaces y Funciones

Fri, 05 Jun 2026 00:00:00 +0000

Refactoriza el arreglo de strings a objetos tipados con una interface Task, y envuelve cada acción del menú en su propia arrow function.

Estados de Carga y Error en React

Thu, 26 Feb 2026 11:00:00 -0400

Manejo de Loading y Error #

Cuando React pide datos a un servidor, la respuesta no es instantánea. Sin manejar ese tiempo, el usuario verá una pantalla en blanco o la app se romperá.

La solución: La Trinidad de las Peticiones HTTP.

Los 3 Estados #

const [usuario, setUsuario] = useState(null); // datos (éxito)
const [cargando, setCargando] = useState(true); // booleano inicia en true
const [error, setError] = useState(null); // mensaje de error

cargando inicia en true porque la petición comienza apenas el componente se monta.

Navegación con React Router DOM

Thu, 26 Feb 2026 11:00:00 -0400

Navegación con React Router DOM #

React construye SPAs (Single Page Applications): solo hay un archivo HTML. Al navegar, React destruye el componente actual y dibuja el nuevo sin recargar el navegador. Para sincronizar eso con la URL usamos React Router DOM.

1. Instalación y Configuración #

npm install react-router-dom

Envuelve toda la app en main.jsx:

Repaso y Arquitectura Avanzada en React

Thu, 26 Feb 2026 11:00:00 -0400

Repaso de la Semana 2 y Arquitectura Avanzada #

Repaso Rápido Lo que ya dominas #

Concepto	Regla clave
useEffect + GET	Arreglo `[]` se ejecuta solo al montar. POST/PUT/DELETE van en eventos.
Loading & Error	Siempre maneja las 3 fases: cargando, error, datos.
React Router	`<Link to="">` nunca `<a href="">`. `useParams` para rutas dinámicas.

El Siguiente Nivel: `useReducer` #

useState es ideal para datos simples. Cuando el estado es complejo (carrito de compras, formulario multi-paso), usamos useReducer.

El Contexto en React (useContext)

Thu, 26 Feb 2026 11:00:00 -0400

El Contexto en React `useContext` #

El Problema: Prop Drilling #

Cuando un dato tiene que pasar por componentes intermedios que no lo necesitan, solo para llegar a uno profundo, eso se llama Prop Drilling.

// El Abuelo tiene el dato
function App() {
 const [tema, setTema] = useState("oscuro");
 return <SeccionPrincipal tema={tema} />;
}

function SeccionPrincipal({ tema }) {
 // No lo usa, solo lo pasa
 return <Tarjeta tema={tema} />;
}

function Tarjeta({ tema }) {
 // No lo usa, solo lo pasa
 return <Boton tema={tema} />;
}

function Boton({ tema }) {
 // Finalmente lo usa
 return <button className={tema}>Clic</button>;
}

Analogía: Es como pasarle un paquete a cada vecino del edificio solo para que llegue al sótano a nadie del camino le importaba el paquete.

Estado Global de Usuario (Login y Logout)

Thu, 26 Feb 2026 11:00:00 -0400

Toda la app necesita saber quién está conectado: el <Navbar> para mostrar su nombre, /perfil para sus datos… Combinamos useState + useContext para resolverlo sin prop drilling.

1. El Proveedor de Autenticación #

Crea src/context/AuthContext.jsx:

import { createContext, useState } from "react";

export const AuthContext = createContext();

export function AuthProvider({ children }) {
 const [usuario, setUsuario] = useState(null); // null = nadie logueado

 const login = (datos) => setUsuario(datos);
 const logout = () => setUsuario(null);

 return (
 <AuthContext.Provider value={{ usuario, login, logout }}>
 {children}
 </AuthContext.Provider>
 );
}

2. Envolver la App en `main.jsx` #

import { AuthProvider } from "./context/AuthContext";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
 <BrowserRouter>
 <AuthProvider>
 <App />
 </AuthProvider>
 </BrowserRouter>,
);

import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";

export default function Navbar() {
 const { usuario, logout } = useContext(AuthContext);

 return (
 <nav>
 {usuario ? (
 <>
 <span>Bienvenido, {usuario.nombre}</span>
 <button onClick={logout}>Cerrar Sesión</button>
 </>
 ) : (
 <Link to="/login">
 <button>Iniciar Sesión</button>
 </Link>
 )}
 </nav>
 );
}

import { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../context/AuthContext";

export default function Login() {
 const { login } = useContext(AuthContext);
 const navigate = useNavigate();

 const manejarEnvio = (e) => {
 e.preventDefault();
 // En producción: fetch() al backend para validar credenciales
 login({ id: 1, nombre: "Estudiante", rol: "admin" });
 navigate("/");
 };

 return (
 <form onSubmit={manejarEnvio}>
 <input type="email" placeholder="Correo" required />
 <input type="password" placeholder="Contraseña" required />
 <button type="submit">Entrar</button>
 </form>
 );
}

5. Rutas Protegidas (El Cadenero) #

// src/components/RutaProtegida.jsx
import { useContext } from "react";
import { Navigate } from "react-router-dom";
import { AuthContext } from "../context/AuthContext";

export default function RutaProtegida({ children }) {
 const { usuario } = useContext(AuthContext);
 if (!usuario) return <Navigate to="/login" />; // Sin sesión fuera
 return children; // Con sesión pasa
}

Úsalo en App.jsx:

Custom Hooks — Tus Propias Herramientas

Thu, 26 Feb 2026 11:00:00 -0400

Cuando repites la misma combinacion de Hooks en diferentes pantallas, React te permite empaquetar esa logica en tu propio Hook para reutilizarla donde quieras.

La Regla de Oro #

Un Custom Hook es una funcion normal de JavaScript con dos reglas:

El nombre DEBE empezar con use (ej. useFormulario, useFetch). Si no, React no te dejara usar otros Hooks adentro.
Debe llamar a otros Hooks en su interior (useState, useEffect, etc.).

Ejemplo 1: `useToggle` — El Interruptor #

El mismo patron se repite en modales, menus y acordeones:

Introduccion a Supabase

Thu, 26 Feb 2026 11:00:00 -0400

Hasta ahora nuestra informacion vive solo en el navegador. Al cerrar la pestana, se pierde. Para construir apps reales necesitamos una base de datos y un backend. Supabase nos da ambos en minutos.

Que es Supabase? #

Supabase es un BaaS (Backend as a Service): una plataforma que te entrega un backend completo listo para usar, sin necesidad de programarlo desde cero. Es la alternativa open-source mas popular a Firebase de Google.

Integrando Supabase en React — CRUD y Autenticacion

Thu, 26 Feb 2026 11:00:00 -0400

Hoy conectamos React con la base de datos y el sistema de usuarios de Supabase.

1. Instalacion y Configuracion #

npm install @supabase/supabase-js

Crea src/supabase.js con tus llaves del Dashboard de Supabase:

import { createClient } from "@supabase/supabase-js";

// En produccion estas credenciales deben ir en un archivo .env
const supabaseUrl = "https://tucodigo.supabase.co";
const supabaseKey = "tu-clave-anonima";

export const supabase = createClient(supabaseUrl, supabaseKey);

2. CRUD con Supabase #

Imaginemos una tabla llamada tareas. Las cuatro operaciones basicas:

Jueves — Métricas y Notificaciones

Thu, 01 Oct 2026 00:00:00 +0000

Expone un endpoint de métricas solo para el personal interno, con datos agrupados listos para graficar, e implementa el módulo de notificaciones por WebSockets o por correo ante los eventos importantes del sistema.

04 — Paginación, Fetch vs Axios y useSearchParams

Thu, 10 Sep 2026 00:00:00 +0000

Por qué guardar la paginación en la URL (y no en useState) es lo que hace que compartir un link o usar el botón atrás funcione, y los criterios reales para elegir entre fetch y Axios según el contexto. Ejemplo de práctica con un historial de pedidos.

04 — Repaso General (Semanas 1-4) y Git Individual

Thu, 10 Sep 2026 00:00:00 +0000

Guía de repaso para resolver dudas acumuladas de las 4 semanas antes del cierre del módulo, organizada por semana con las confusiones más comunes de cada tema. Incluye flujo de Git individual (ramas, commits, PR a tu propio repo).

04 — TypeScript Generics, Debounce y Sincronización con la API

Thu, 10 Sep 2026 00:00:00 +0000

Qué es realmente un Generic (un parámetro, pero de tipo en vez de valor), por qué escribir una función por cada entidad no escala, y por qué debounce retrasa la llamada sin retrasar la respuesta visual del input. Ejemplo de práctica con un catálogo de productos.

04 — useEffect, React Hook Form y Zod

Thu, 10 Sep 2026 00:00:00 +0000

Qué es realmente un efecto secundario y por qué useEffect existe para sincronizar con sistemas externos (no como un ‘hook para todo’), y cómo React Hook Form + Zod resuelven la validación de formularios sin controlar cada input manualmente. Ejemplo de práctica con una reseña de producto.

Clases Tailwind — Referencia Rápida

Thu, 10 Sep 2026 00:00:00 +0000

Las clases de Tailwind CSS que más usarás en el desarrollo frontend, más un refuerzo de las etiquetas HTML más comunes y su equivalente en JSX.

Día 4 — Buscador con Debounce y Filtros Globales

Thu, 10 Sep 2026 00:00:00 +0000

Implementas el hook useDebounce tipado con Generics, el buscador de pacientes conectado a la API real con delay de 350ms y un store de filtros que persiste entre navegaciones de ruta.

Día 4 — Formulario de Nueva Cita con RHF + Zod

Thu, 10 Sep 2026 00:00:00 +0000

Construyes el formulario de agenda de citas con React Hook Form y Zod, con validación completa, estados de carga y feedback visual. Esta página será la ruta /citas/nueva del proyecto.

Día 4 — Historial de Citas Paginado

Thu, 10 Sep 2026 00:00:00 +0000

Implementas la paginación del historial de citas usando useSearchParams para que la página activa viva en la URL, con filtro de estado que persiste entre navegaciones.

Día 4 — Repaso General y Pulido de la Clínica

Thu, 10 Sep 2026 00:00:00 +0000

Día de consolidación: revisas tu propia Clínica contra lo visto en las 4 semanas, corriges lo que quedó pendiente, y practicas el flujo de Git individual (ramas, commits, PR a tu propio repositorio).

Entrevista — Preguntas Frecuentes sobre Hooks

Thu, 10 Sep 2026 00:00:00 +0000

Preguntas de entrevista técnica sobre Hooks de React: reglas de los hooks, dependencias de useEffect, custom hooks y useOptimistic. Practica responderlas en voz alta.

Jueves — Caja

Thu, 10 Sep 2026 00:00:00 +0000

Construye la interfaz de apertura, cierre y conciliación de caja, comparando el efectivo reportado contra el total de ventas de POS procesadas.

Jueves — Control Financiero y Suspensión por Mora

Thu, 10 Sep 2026 00:00:00 +0000

Construye el historial de pagos, la validación manual de Recepción y la comunicación explícita de la suspensión automática por mora en la interfaz.

Seguridad en el Frontend — Buenas Prácticas

Thu, 10 Sep 2026 00:00:00 +0000

Por qué localStorage es vulnerable a XSS y qué trade-offs trae la alternativa (cookies httpOnly), y por qué la validación del cliente nunca reemplaza la del backend.

useMemo y useCallback — Cuándo Vale la Pena

Thu, 10 Sep 2026 00:00:00 +0000

Qué problema resuelven useMemo y useCallback (la comparación por referencia entre renders), cuándo sí ayudan y cuándo son una micro-optimización innecesaria que solo agrega complejidad.

Jueves — Configuración de Entornos con @nestjs/config

Mon, 03 Aug 2026 00:00:00 +0000

Reemplaza las lecturas directas de process.env por ConfigService y agrega validación para que la app falle rápido si falta una variable crítica.

Miércoles — Aula Virtual y Control Financiero

Sun, 26 Jul 2026 00:00:00 +0000

Habilita el aula virtual (asignaciones, entregas y calificaciones) y el control financiero de SGAF, incluyendo la suspensión automática por mora.

Miércoles — Tienda en Línea, Sincronización y Logística

Sun, 26 Jul 2026 00:00:00 +0000

Habilita la tienda en línea para clientes web, demuestra la sincronización de inventario entre canales y construye la cola de órdenes con sus estados logísticos.

Jueves — Manejo de Errores con Exception Filters

Mon, 20 Jul 2026 00:00:00 +0000

Centraliza el manejo de errores de Prisma en un Exception Filter global, eliminando los try/catch repetidos del Controller.

Jueves — Módulo de Citas: Agendamiento y Atención

Mon, 13 Jul 2026 00:00:00 +0000

Agenda citas con reglas de negocio validadas por Zod, construye la agenda del médico filtrada por rango de fechas y gestiona el cambio de estado de una cita.

Jueves S5 — update() Parcial, Errores P2025, Rangos de Fecha, groupBy y $queryRaw

Tue, 07 Jul 2026 00:00:00 +0000

El maestro completa el CRUD de Prisma: update() parcial sin merge manual, manejo tipado de P2025 con PrismaClientKnownRequestError, filtros de fecha con gte/lte en creadoEn, agregaciones con groupBy y _count/_avg, y consultas arbitrarias con $queryRaw tagged templates.

Jueves — Consultas Parametrizadas y API de Clientes

Mon, 06 Jul 2026 00:00:00 +0000

Revisa que tus queries usen parámetros seguros contra SQL Injection y construye la API completa de customers aplicando el mismo patrón MVC del martes.

Jueves S4 — Capa Services y Consultas Parametrizadas INSERT/UPDATE/DELETE

Wed, 01 Jul 2026 00:00:00 +0000

El maestro añade la capa Services entre Controller y Model, implementa INSERT, UPDATE y DELETE en cursoModel con RETURNING y parámetros posicionales múltiples ($1..$N), y conecta todo el flujo CRUD a PostgreSQL — al final de la clase un POST persiste en la DB y un GET lo confirma.

Jueves S1 — DML: INSERT, SELECT con Filtros, UPDATE y DELETE Seguros

Fri, 26 Jun 2026 00:00:00 +0000

El maestro profundiza en la inserción de datos, introduce los operadores de filtrado LIKE, BETWEEN e IN, y dedica especial atención a los peligros reales de UPDATE y DELETE sin condición — con patrones de buenas prácticas para prevenirlos.

Jueves S2 — Desestructuración y Métodos Funcionales de Arrays

Fri, 26 Jun 2026 00:00:00 +0000

El maestro trabaja con un array de inscripciones de la Academia TechPath: primero extrae datos con desestructuración de objetos y arrays, luego los procesa con forEach, map, filter, find, some e includes — construyendo un reporte de rendimiento completo al final del día.

Jueves S3 — OpenAPI, Swagger UI y swagger-autogen

Fri, 26 Jun 2026 00:00:00 +0000

El maestro introduce OpenAPI como estándar de documentación, instala swagger-ui-express y swagger-autogen en academia-api, configura el script de generación, añade anotaciones en las rutas de cursos y prueba todos los endpoints directamente desde la interfaz Swagger UI.

Jueves — Documentación Profesional con Swagger

Mon, 15 Jun 2026 00:00:00 +0000

Genera documentación interactiva de la API con swagger-autogen y swagger-ui-express, y prueba todos los endpoints directamente desde el navegador.

Jueves — Población y Modificación de Datos

Mon, 15 Jun 2026 00:00:00 +0000

Llena la base de datos con datos de prueba realistas usando INSERT INTO, simula cambios de negocio con UPDATE y practica el borrado seguro con DELETE.

Día 4 — Finanzas Básicas y Operadores Relacionales

Fri, 05 Jun 2026 00:00:00 +0000

Calcula impuestos y descuentos con decimales, aprende los operadores relacionales para comparar valores, y descubre el bloque de Selección que rompe la linealidad de tus programas.

Jueves — Métodos Funcionales y Colaboración

Fri, 05 Jun 2026 00:00:00 +0000

Agrega filtrado por estado, reemplaza el ciclo for por métodos funcionales (map, filter, find, forEach) y abre tu primer Pull Request.

Viernes — Pulido, Valor Agregado y Entrega Final

Fri, 02 Oct 2026 00:00:00 +0000

Día de entrega: sin funcionalidades nuevas. Se corrigen detalles, se unifica el manejo de errores, se documenta la API y se prepara la demo del equipo.

05 — Cierre del Módulo: Checklist y Demo

Thu, 10 Sep 2026 00:00:00 +0000

Guía para la sesión de cierre de las 4 semanas de la Clínica: checklist de lo que debería estar completo, cómo estructurar las demos, errores de último momento más comunes en producción y qué observar antes de pasar al proyecto de la semana 5.

05 — React Router DOM, Rutas Dinámicas y Navegación

Thu, 10 Sep 2026 00:00:00 +0000

Cómo React Router intercepta la navegación y usa la History API del navegador para cambiar de pantalla sin recargar la página. BrowserRouter, Routes, NavLink activo, Outlet para layouts compartidos, useParams y useNavigate. Ejemplo de práctica con un catálogo de productos.

05 — Tipado Estricto y Recharts con Datos Reales

Thu, 10 Sep 2026 00:00:00 +0000

Por qué el catch de TypeScript tipa el error como unknown y no como any, cómo un type guard le devuelve seguridad a ese unknown, y los Utility Types que evitan repetir campos entre tus DTOs. Ejemplo de práctica con reportes de un catálogo de productos.

05 — UI Robusta: Skeleton Loaders, Error Boundaries y Componentes Reusables

Thu, 10 Sep 2026 00:00:00 +0000

Por qué un skeleton reduce la percepción de espera más que un spinner, cómo React decide hasta dónde ‘desmonta’ el árbol cuando un componente lanza un error sin Error Boundary, y una biblioteca mínima de componentes de UI reutilizables. Ejemplo de práctica con un catálogo de productos.

Custom Hooks — Extrayendo Lógica Reutilizable

Thu, 10 Sep 2026 00:00:00 +0000

Qué hace que una función sea un hook ‘de verdad’ (no solo el nombre), y por qué separar la lógica con estado en un Custom Hook separa ‘qué hace la pantalla’ de ‘cómo se ve’.

Día 5 — App Prod Full Stack (MP3)

Thu, 10 Sep 2026 00:00:00 +0000

El MP3 se completa con Skeleton Loaders en todas las páginas, Error Boundaries en las secciones críticas y la biblioteca de componentes UI compartidos. La app está lista para producción.

Día 5 — Cierre: Clínica Completa en Producción (MP4)

Thu, 10 Sep 2026 00:00:00 +0000

Verificación final de punta a punta, últimos ajustes de producción y demo de tu Clínica completa — el cierre de las 4 semanas de frontend antes de arrancar un proyecto nuevo en la semana 5.

Día 5 — Frontend Fuertemente Tipado con Dashboard (MP2)

Thu, 10 Sep 2026 00:00:00 +0000

Mini-Proyecto 2 completo: la SPA de la clínica con tipado estricto usando Utility Types, type guards en todos los catch, y un dashboard de reportes con dos gráficas de Recharts conectadas a la API real.

Día 5 — SPA Navegable Completa (MP1)

Thu, 10 Sep 2026 00:00:00 +0000

Conectas todas las páginas construidas durante la semana con React Router DOM. El resultado es la SPA completa de la clínica con 5 rutas navegables, layout compartido y navegación programática.

Discusión AI Tools

Thu, 10 Sep 2026 00:00:00 +0000

Comparativa crítica de herramientas de IA para desarrollo frontend. Cómo integrarlas en el flujo de trabajo sin perder el control del código, y qué revisar en el Tailwind que generan.

FormData y multipart/form-data — Guía de Referencia

Thu, 10 Sep 2026 00:00:00 +0000

Referencia rápida de la API FormData del navegador y del formato multipart/form-data: por qué los archivos no viajan como JSON y cómo combinar texto y archivos en un solo envío.

Repaso Semanal — Semana 2

Thu, 10 Sep 2026 00:00:00 +0000

Resumen de los conceptos clave de la Semana 2. Úsalo para consolidar lo aprendido antes de comenzar la Semana 3.

Viernes — Pulido, Despliegue y Demo

Thu, 10 Sep 2026 00:00:00 +0000

Aplica lazy loading, memoización y Custom Hooks propios sobre el sistema POS + E-commerce, despliega en Vercel conectado a tu backend real y cierra con una demo de punta a punta.

Viernes — Rendimiento, Despliegue y Demo

Thu, 10 Sep 2026 00:00:00 +0000

Aplica lazy loading, memoización y Custom Hooks propios sobre SGAF, despliega en Vercel conectado a tu backend real y cierra con una demo de punta a punta.

Viernes — Repaso, Documentación y Entrega Final

Mon, 03 Aug 2026 00:00:00 +0000

Cierra la semana con un repaso integrador del pipeline completo de NestJS, documentación pulida y la entrega final antes de pasar a despliegue en la Semana 9.

Jueves — Caja, Documentación, Despliegue y Demo

Sun, 26 Jul 2026 00:00:00 +0000

Habilita la apertura, cierre y conciliación de caja, documenta con Swagger y despliega el sistema en Render con base de datos en Supabase, sembrado y listo para la demo.

Jueves — Documentación, Despliegue y Demo

Sun, 26 Jul 2026 00:00:00 +0000

Documenta con Swagger, despliega SGAF en Render con base de datos en Supabase y deja el ambiente de producción sembrado y listo para la demo.

Viernes — Guards de Autenticación y Autorización por Rol

Mon, 20 Jul 2026 00:00:00 +0000

Migra tu kit de JWT de la Semana 5 a un AuthGuard y un RolesGuard de NestJS, protegiendo el módulo de Pacientes según el rol del usuario.

Viernes — Reportes de Gerencia y Entrega Final

Mon, 13 Jul 2026 00:00:00 +0000

Construye los dos reportes de gerencia combinando groupBy y $queryRaw parametrizado, documenta la API con Swagger y entrega el proyecto final.

Viernes — Filtros, Paginación y API de Ventas

Mon, 06 Jul 2026 00:00:00 +0000

Agrega filtros con req.query y paginación LIMIT/OFFSET a productos, luego construye la API de ventas — la tercera tabla principal de la semana.

Viernes S4 — Paginación, LIMIT/OFFSET y Queries Dinámicas

Wed, 01 Jul 2026 00:00:00 +0000

El maestro implementa paginación con LIMIT y OFFSET en cursoModel.findAll, valida los query params de paginación y filtros con z.coerce, retorna metadatos de paginación en la respuesta y añade ordenamiento dinámico seguro con un mapa de columnas permitidas.

Viernes S1 — JOINs, Práctica Integradora y Cierre de Semana

Fri, 26 Jun 2026 00:00:00 +0000

El maestro enseña INNER JOIN y LEFT JOIN sobre el esquema de la semana, guía una práctica integradora donde los alumnos construyen un sistema completo desde cero, y cierra con una charla sobre cómo los ORMs automatizarán el SQL que acaban de aprender.

Viernes S2 — Event Loop, Promesas, Async/Await y try/catch

Fri, 26 Jun 2026 00:00:00 +0000

Cierre de semana con asincronía: el maestro demuestra el Event Loop con un experimento de orden de ejecución, construye un flujo de certificación con .then/.catch, lo reescribe con async/await, lo envuelve en try/catch y termina con Promise.all como capstone del día y de la semana.

Viernes S3 — Variables de Entorno, CORS y Ejercicio Grupal

Fri, 26 Jun 2026 00:00:00 +0000

El maestro integra variables de entorno nativas con –env-file, explica CORS y configura el middleware cors. El día cierra con un ejercicio grupal donde equipos de 3–4 personas construyen una API completa desde cero aplicando todo lo aprendido en la semana.

Viernes — Consultas Multitabla y Reportería

Mon, 15 Jun 2026 00:00:00 +0000

Escribe consultas SQL progresivas con INNER JOIN para extraer información útil del sistema: desde filtros básicos hasta el ticket completo de un pedido.

Viernes — Variables de Entorno, CORS y Prueba Final

Mon, 15 Jun 2026 00:00:00 +0000

Configura variables de entorno con soporte nativo de Node, resuelve el error de CORS y prueba la API con un cliente real a través del Port Forwarding de VS Code.

Día 5 — Lógica Booleana, Arrays y Repaso Integrador

Fri, 05 Jun 2026 00:00:00 +0000

Combina condiciones con AND y OR, aprende qué son los Arreglos y cómo acceder a ellos por índice, y une las 5 herramientas de Raptor en un ejercicio integrador.

Viernes — Asincronismo

Fri, 05 Jun 2026 00:00:00 +0000

Agrega simulación de guardado asíncrono con async/await, Promesas y manejo de errores con try/catch. Cierre del proyecto y reto extra.

Códigos de Estado HTTP — Guía de Referencia

Thu, 10 Sep 2026 00:00:00 +0000

Referencia rápida de los códigos de estado HTTP más comunes en APIs REST, agrupados por categoría (2xx/4xx/5xx), con cuándo corresponde usar cada uno.

Componiendo Hooks — Un Hook que Usa Otros Hooks

Thu, 10 Sep 2026 00:00:00 +0000

Un ejemplo concreto de un Custom Hook que compone otros hooks por dentro, y por qué esto evita repetir la misma lógica entre componentes distintos.

CORS en Desarrollo Local

Thu, 10 Sep 2026 00:00:00 +0000

Same-origin policy, qué es un preflight OPTIONS, los headers Access-Control-Allow-* y por qué CORS aparece en desarrollo cuando Vite y Express corren en puertos distintos.

Eventos React — Referencia

Thu, 10 Sep 2026 00:00:00 +0000

Referencia completa de los tipos de eventos de React y sus tipos TypeScript. Guía rápida para tipar correctamente cualquier handler de eventos.

Entrevista Frontend — Preguntas Frecuentes

Thu, 10 Sep 2026 00:00:00 +0000

Las preguntas de entrevista técnica de React más frecuentes con respuestas claras. Practica responderlas en voz alta — eso marca la diferencia en una entrevista real.

Paginación — Patrones en APIs REST

Thu, 10 Sep 2026 00:00:00 +0000

Offset/limit vs paginación por cursor, la convención page/pageSize, y por qué guardar la página actual en la URL (no en useState) mejora la experiencia de usuario.

Preparando tus Dudas para el Repaso General

Thu, 10 Sep 2026 00:00:00 +0000

Worksheet de autodiagnóstico de los grandes temas de las 4 semanas del módulo, para llegar a la clase de Repaso General con preguntas concretas en vez de ’no me acuerdo de nada'.

UI Optimista — Cuándo Sí y Cuándo No

Thu, 10 Sep 2026 00:00:00 +0000

Qué es la UI optimista, el patrón ‘actualiza ya, revierte si falla’, y los criterios para decidir cuándo conviene usarla y cuándo es riesgoso.

Blob y File — Datos Binarios en el Navegador

Thu, 10 Sep 2026 00:00:00 +0000

Qué es un Blob y un File en el navegador, cómo funciona URL.createObjectURL, y en qué casos reales se usan: previsualizaciones y descargas de archivos generados en el cliente.

Estado de Paginación en la URL

Thu, 10 Sep 2026 00:00:00 +0000

useSearchParams vs useState para guardar la página actual, y por qué guardar la paginación en la URL permite compartir un link o usar el botón atrás del navegador.

UX Forms — Diseño de Formularios

Thu, 10 Sep 2026 00:00:00 +0000

Principios de diseño de formularios que impactan directamente en las tasas de conversión y abandono. Un formulario bien diseñado guía al usuario; uno mal diseñado lo frustra.

Zustand — Referencia Rápida de API

Thu, 10 Sep 2026 00:00:00 +0000

Recetas cortas de la API de Zustand: create, set, get, selectores, y los middlewares persist y devtools.

Performance API y el Network Tab

Thu, 10 Sep 2026 00:00:00 +0000

Qué es la Performance API del navegador, cómo leer el Network tab de DevTools para medir una petición, y por qué esos números son la razón real para usar debounce.

Repaso Semanal — Semana 1

Thu, 10 Sep 2026 00:00:00 +0000

Resumen de los conceptos clave de la Semana 1. Úsalo para consolidar lo aprendido antes de comenzar la Semana 2.

Repaso Semanal — Semana 3

Thu, 10 Sep 2026 00:00:00 +0000

Resumen de los conceptos clave de la Semana 3: Auth JWT, rutas protegidas, refresh tokens, subida de archivos y UI robusta. Úsalo para consolidar lo aprendido antes de la Semana 4.

Repaso Semanal — Semana 4 (Cierre del Módulo)

Thu, 10 Sep 2026 00:00:00 +0000

Autoevaluación de la Semana 4 (deploy, code splitting, memoización, Custom Hooks) que además funciona como repaso de cierre de las 4 semanas completas del módulo de React.

Checklist Técnico para tu Demo

Thu, 10 Sep 2026 00:00:00 +0000

Checklist de verificación previo a cualquier demo: build sin errores, la app funciona contra la URL desplegada, hay datos de prueba, puedes recorrer el flujo principal de punta a punta y explicar tus decisiones de arquitectura.

Error Boundaries y Skeleton Loaders

Thu, 10 Sep 2026 00:00:00 +0000

Qué es un Error Boundary y hasta dónde ‘desmonta’ el árbol cuando algo falla, y por qué un skeleton loader reduce la percepción de espera más que un spinner.

Rutas SPA — Cómo Funciona el Routing en el Frontend

Thu, 10 Sep 2026 00:00:00 +0000

La historia del routing en la web: de páginas del servidor a SPAs modernas. Cómo React Router intercepta URLs sin recargar la página y por qué importa para la experiencia de usuario.

TypeScript Aplicado a Frontend

Thu, 10 Sep 2026 00:00:00 +0000

Utility Types (Partial, Pick, Omit, Record) con ejemplos, type guards, y un repaso rápido de Generics — preparación para la clase de Tipado y Recharts.

Práctica Calificada - Formulario de Registro

Wed, 29 Apr 2026 10:00:00 -0500

📋 Práctica Calificada: Formulario de Registro de Visitas #

📖 Instrucciones #

Replica el diseño del formulario que se muestra a continuación usando HTML y CSS.

Crea dos archivos:

formulario-visita/
├── index.html
└── styles.css

⚠️ No se requiere funcionalidad. El formulario solo debe verse igual al diseño de referencia.
⚠️ El CSS debe estar en un archivo separado — no se acepta style="" ni <style> dentro del HTML.

El CV de Alto Impacto para Frontend Developers

Tue, 10 Mar 2026 14:51:02 -0400

Duración estimada: 45 min de estudio | Nivel: Intermedio Aplicabilidad: Inmediata — este material es 100% práctico.

Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Construir un CV estructurado que supere los filtros automáticos de IA (ATS)
Redactar cada sección con un enfoque orientado a resultados (no tareas)
Seleccionar y presentar tus proyectos como experiencia laboral real
Identificar y corregir los errores más comunes que eliminan CVs en la primera revisión
Adaptar tu CV a cada vacante sin reescribirlo desde cero

Introducción #

El CV es el primer punto de contacto con una empresa, y tienes aproximadamente 6 segundos para causar impresión antes de que un reclutador lo cierre. Pero antes de llegar al reclutador humano, tu CV debe sobrevivir al ATS (Applicant Tracking System): un software que escanea, filtra y puntúa automáticamente los CVs antes de que los vea cualquier persona.

Práctica Calificada 4 - Custom Hooks

Wed, 25 Feb 2026 10:00:00 -0400

Reglas: Prohibido escribir fetch o localStorage directamente dentro de un componente. Toda la lógica va en los hooks.

🌐 API a consumir: Open Library #

Deberán consumir la API pública de Open Library (no requiere API key ni registro).


Endpoint de búsqueda	`https://openlibrary.org/search.json?q={query}&limit=20`
Documentación	https://openlibrary.org/dev/docs/api
Ejemplo	`https://openlibrary.org/search.json?q=harry+potter&limit=20`

Campos útiles de la respuesta (response.docs[]):

{
 title: "Harry Potter and the Sorcerer's Stone",
 author_name: ["J.K. Rowling"],
 cover_i: 8228691, // número de portada
 first_publish_year: 1997,
 key: "/works/OL82592W" // identificador único
}

🖼️ Para mostrar la portada usa: https://covers.openlibrary.org/b/id/{cover_i}-M.jpg

Práctica Calificada 3 - useContext

Wed, 25 Feb 2026 09:00:00 -0400

Práctica Calificada 3: SaaS Dash #

Reglas: Solo React puro. Prohibido gestores de estado externos (Redux, Zustand, etc.).

Referencias visuales:

FakeStore API Catalog

Wed, 25 Feb 2026 08:00:00 -0400

📖 Objetivo #

Aplicar los conocimientos de consumo de APIs, navegación con React Router DOM, y gestión de estados complejos (Hooks) mediante la creación de un catálogo de productos funcional consumiendo FakeStoreAPI.

Referencias visuales:

🛠️ Setup Inicial #

npm create vite@latest fake-store-catalog -- --template react
cd fake-store-catalog
npm install react-router-dom axios
npm run dev

Estructura de carpetas requerida:

Práctica Calificada 2 - React Wallet

Tue, 24 Feb 2026 11:33:04 -0400

Práctica Calificada 2: React Wallet #

Usa el código base (HTML/CSS estático) entregado por el instructor y hazlo dinámico con React.

Referencia visual:

Cada transacción tiene la forma: { id, text, amount } — amount negativo = gasto, positivo = ingreso.

Práctica Calificada - ReactTube

Tue, 24 Feb 2026 09:49:28 -0400

🎬 Práctica Calificada: ReactTube #

📖 Contexto #

Has sido contratado como Frontend Developer Junior para “ReactTube”. El equipo de Backend te entregó una lista de datos simulada. Tu misión: construir la interfaz y conectar los eventos.

Vista de referencia (desktop y mobile):

Practica De Prueba

Mon, 23 Feb 2026 16:51:06 -0500

Práctica de Prueba #

Esta es una práctica de prueba para demostrar cómo crear contenido en la plataforma de desarrollo de software de la Fundación de Valores.

React Componentes

Thu, 19 Feb 2026 09:15:24 -0500

Introducción a ReactJS | Componentes Funcionales #

Duración estimada: 1 hora de estudio
Nivel: Principiante / Intermedio
Tecnología: React 18+

Objetivos de aprendizaje #

Al finalizar esta clase serás capaz de:

Explicar qué es React y por qué se usa en el desarrollo web moderno
Crear componentes funcionales propios con JSX
Diferenciar entre props y state, y usar ambos correctamente
Componer una interfaz de usuario a partir de múltiples componentes reutilizables

Introducción #

¿Qué problema resuelve React? #

Imagina que construyes una tienda en línea con HTML y JavaScript puro. Tienes un carrito de compras que muestra el número de artículos en la barra de navegación, en el ícono flotante y en la página de pago. Cada vez que el usuario agrega un producto, tienes que buscar manualmente esos tres elementos en el DOM y actualizarlos.

Introducción a React

Thu, 19 Feb 2026 08:33:57 -0500

Introducción a ReactJS con Vite #

Duración estimada: 1 hora de estudio | Nivel: Principiante / Intermedio
Última actualización: 2025 | React 18+ · Vite 5+

Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Explicar qué es React y por qué se utiliza Vite como herramienta de construcción moderna
Crear y configurar un proyecto React desde cero usando Vite
Comprender y escribir componentes funcionales con JSX
Manejar el estado local de un componente usando el Hook useState
Pasar datos entre componentes mediante props

Introducción #

¿Por qué aprender React? #

El desarrollo web moderno exige interfaces dinámicas, rápidas y mantenibles. Construir una aplicación compleja con HTML y JavaScript puro se convierte rápidamente en un caos: código difícil de organizar, lógica mezclada con presentación y actualizaciones manuales del DOM.

Javascript APIs

Mon, 19 Jan 2026 15:10:02 -0500

JavaScript | Consumo de APIs con Fetch #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Comprender qué es una API REST y cómo funciona el protocolo HTTP
Utilizar la Fetch API para realizar peticiones HTTP (GET, POST, PUT, DELETE)
Trabajar con respuestas JSON: parseo, manipulación y validación de datos
Manejar errores y estados de carga en peticiones asíncronas
Aplicar buenas prácticas en el consumo de APIs externas

🎯 Introducción #

¿Por qué necesitamos consumir APIs? #

En el desarrollo web moderno, las aplicaciones rara vez funcionan de manera aislada. Necesitamos obtener datos de servidores externos, enviar información de formularios, actualizar contenido sin recargar la página, o integrar servicios de terceros como mapas, pagos o autenticación.

Javascript Asincronia

Mon, 19 Jan 2026 15:02:59 -0500

Asincronía en JavaScript: Callbacks, Promesas y Async/Await #

📋 Objetivos de aprendizaje #

Comprender qué es la asincronía en JavaScript y por qué es fundamental en el desarrollo web
Dominar los tres patrones principales para manejar código asíncrono: callbacks, promesas y async/await
Implementar manejo de errores robusto en operaciones asíncronas usando try/catch
Identificar cuándo usar cada patrón según el contexto y las necesidades del proyecto
Escribir código asíncrono limpio, legible y mantenible siguiendo las mejores prácticas

🎯 Introducción #

Imagina que estás en una cafetería. Haces tu pedido y… ¿te quedas parado bloqueando la fila esperando tu café? ¡No! Recibes un número, te apartas, y cuando tu pedido está listo te llaman. Mientras tanto, otros clientes pueden hacer sus pedidos.

Javascript Delegacion De Eventos

Mon, 19 Jan 2026 14:46:19 -0500

JavaScript: Manejo del DOM + Delegación de Eventos #

📋 Objetivos de aprendizaje #

Dominar las técnicas principales de manipulación del DOM usando JavaScript moderno
Comprender qué es la delegación de eventos y por qué es una técnica fundamental
Implementar delegación de eventos para optimizar el rendimiento de aplicaciones web
Identificar cuándo usar event listeners directos vs. delegación de eventos
Aplicar buenas prácticas en la gestión de eventos del DOM

🎯 Introducción #

Imagina que estás construyendo una lista de tareas (to-do list) con 100 elementos. ¿Añadirías 100 event listeners, uno para cada botón de “eliminar”? ¿Y si la lista crece dinámicamente? 🤔

Javascript Caracteristicas Modernas

Mon, 19 Jan 2026 14:39:35 -0500

Repaso Avanzado de JavaScript: Características Modernas #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Desestructurar objetos y arrays para extraer valores de manera eficiente y legible
Aplicar los operadores spread y rest en diferentes contextos de programación
Crear strings dinámicos utilizando template literals con expresiones embebidas
Combinar estas características para escribir código JavaScript más expresivo y mantenible
Identificar casos de uso apropiados para cada una de estas características modernas

🎯 Introducción #

¿Alguna vez te has encontrado escribiendo código repetitivo para extraer valores de objetos? ¿O concatenando strings con múltiples signos + que hacen tu código difícil de leer?

Javascript Dom Eventos

Tue, 13 Jan 2026 00:30:16 -0500

🎪 Eventos en el DOM: Interactividad en JavaScript #

📋 Objetivos de aprendizaje #

Comprender qué son los eventos del DOM y cómo funcionan en el navegador
Dominar las diferentes formas de asignar eventos a elementos HTML (onclick, addEventListener)
Implementar los eventos más comunes (click, change, input, submit) en aplicaciones web reales
Aplicar buenas prácticas para manejar eventos de forma eficiente y mantenible
Prevenir comportamientos predeterminados y controlar la propagación de eventos

🎯 Introducción #

Imagina una página web sin interactividad: no podrías hacer clic en botones, enviar formularios o ver notificaciones cuando algo cambia. Sería como un póster estático pegado en la pared. Los eventos del DOM son el mecanismo que transforma documentos HTML estáticos en aplicaciones web dinámicas e interactivas.

Javascript Dom

Tue, 13 Jan 2026 00:07:13 -0500

JavaScript: Manipulación del DOM #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Comprender qué es el DOM y cómo representa la estructura de una página web como un árbol de nodos
Seleccionar elementos del DOM utilizando diferentes métodos (getElementById, querySelector, querySelectorAll)
Modificar el contenido de elementos usando textContent e innerHTML
Cambiar estilos dinámicamente mediante JavaScript
Aplicar buenas prácticas en la manipulación del DOM para crear aplicaciones web interactivas

🎯 Introducción #

Cuando abres una página web, el navegador no solo muestra texto e imágenes. Detrás de escena, crea una representación estructurada de todo el documento HTML llamada DOM (Document Object Model).

Javascript Metodos Array Objs

Mon, 12 Jan 2026 23:44:16 -0500

JavaScript: Métodos y Funciones con Arrays y Objetos #

📋 Objetivos de aprendizaje #

Comprender y aplicar los métodos modernos de arrays: forEach, map, filter, find, some, every, y reduce
Diferenciar entre bucles tradicionales (for) y métodos funcionales de arrays
Crear funciones que reciban arrays y objetos como parámetros de forma eficiente
Elegir el método más apropiado según el caso de uso específico
Escribir código más limpio, legible y mantenible usando programación funcional

🎯 Introducción #

Imagina que tienes una lista de 100 productos en tu tienda online y necesitas:

Javascript Objetos

Mon, 12 Jan 2026 23:29:59 -0500

JavaScript: Objetos - Guía Completa #

📋 Objetivos de aprendizaje #

Al finalizar esta clase serás capaz de:

Crear objetos en JavaScript utilizando la sintaxis literal correcta
Acceder a las propiedades de un objeto usando notación de punto y corchetes
Modificar, agregar y eliminar propiedades de objetos dinámicamente
Trabajar con estructuras de datos complejas: objetos dentro de arrays y arrays dentro de objetos
Aplicar buenas prácticas en la manipulación de objetos para escribir código profesional

🎯 Introducción #

Imagina que necesitas representar información sobre un estudiante en tu aplicación. Podrías usar variables separadas: nombre, edad, email… pero ¿qué pasa cuando tienes 100 estudiantes? Los objetos son la solución.

Javascript Arrays

Mon, 12 Jan 2026 23:28:29 -0500

JavaScript: Arrays y sus Métodos Básicos #

📋 Objetivos de aprendizaje #

Comprender qué son los arrays y cuándo utilizarlos en JavaScript
Dominar los métodos básicos de manipulación: push(), pop(), unshift(), shift() y la propiedad length
Implementar bucles for y for...of para recorrer arrays eficientemente
Identificar cuándo usar cada método según el caso de uso
Aplicar estos conceptos en situaciones reales de desarrollo web

🎯 Introducción #

Imagina que necesitas gestionar una lista de tareas pendientes, almacenar los nombres de usuarios registrados en tu aplicación, o guardar los productos de un carrito de compras. ¿Cómo organizarías esta información?

Javascript Funciones

Mon, 12 Jan 2026 07:43:54 -0500

JavaScript Básico: Funciones #

📋 Objetivos de aprendizaje #

Comprender qué son las funciones y por qué son fundamentales en JavaScript
Dominar las diferentes formas de declarar y utilizar funciones
Aplicar parámetros, argumentos y valores de retorno correctamente
Identificar y utilizar el scope (ámbito) de las variables en funciones
Implementar funciones de flecha (arrow functions) y entender sus diferencias

🎯 Introducción #

Las funciones son uno de los bloques de construcción más importantes en JavaScript. Imagina que estás escribiendo las instrucciones para hacer un sándwich: podrías escribir cada paso cada vez que quieras hacer uno, o podrías crear una “receta” que puedas usar una y otra vez. Las funciones son exactamente eso: recetas de código reutilizable.

Javascript Estructuras De Control

Mon, 12 Jan 2026 07:20:41 -0500

JavaScript Básico: Estructuras de Control #

📋 Objetivos de aprendizaje #

Comprender qué son las estructuras de control y por qué son fundamentales en programación
Dominar el uso de condicionales (if, else, else if, switch) para tomar decisiones en tu código
Implementar bucles (for, while, do-while) para ejecutar código repetitivo de manera eficiente
Aplicar break y continue para controlar el flujo dentro de bucles
Escribir código más limpio y mantenible utilizando las estructuras de control apropiadas

🎯 Introducción #

Imagina que estás siguiendo una receta de cocina. A veces necesitas tomar decisiones: “Si tengo azúcar morena, úsala; sino, usa azúcar blanca”. Otras veces necesitas repetir acciones: “Bate la mezcla mientras tenga grumos”.

Javascript Variables Datos

Mon, 12 Jan 2026 07:12:22 -0500

JavaScript Básico: Variables, Comentarios, Tipos de Datos Primitivos y Operadores #

📋 Objetivos de aprendizaje #

Declarar y utilizar variables en JavaScript usando var, let y const
Identificar y trabajar con los 7 tipos de datos primitivos de JavaScript
Aplicar operadores aritméticos, de comparación y lógicos para resolver problemas
Escribir comentarios efectivos que mejoren la legibilidad del código
Comprender las diferencias entre igualdad estricta (===) e igualdad débil (==)

🎯 Introducción #

JavaScript es el lenguaje de programación que da vida a las páginas web. Mientras HTML define la estructura y CSS el estilo, JavaScript proporciona la interactividad: desde validar formularios hasta crear aplicaciones web complejas.

Tailwind Base

Wed, 07 Jan 2026 23:25:39 -0500

Tailwind CSS - Propiedades Básicas #

📋 Objetivos de aprendizaje #

Comprender la filosofía utility-first de Tailwind CSS y sus ventajas
Dominar las clases básicas para espaciado, tamaños y colores
Aplicar tipografía, flexbox y grid de forma efectiva con utilidades de Tailwind
Crear diseños responsivos usando los modificadores de breakpoint
Implementar estados interactivos (hover, focus, active) con clases predefinidas

🎯 Introducción #

¿Qué es Tailwind CSS? #

Tailwind CSS es un framework de CSS basado en utilidades (utility-first) que te permite construir interfaces modernas sin salir de tu HTML. En lugar de escribir CSS personalizado, aplicas clases predefinidas que representan propiedades específicas.

Tailwind Darkmode

Wed, 07 Jan 2026 23:08:33 -0500

Tailwind CSS - Dark Mode #

📋 Objetivos de aprendizaje #

Implementar el modo oscuro en aplicaciones web usando la clase dark: de Tailwind CSS
Configurar diferentes estrategias de activación del dark mode (manual, sistema, clase)
Aplicar variantes de color responsivas que se adapten al tema claro y oscuro
Crear interfaces accesibles que respeten las preferencias del usuario
Optimizar la experiencia de usuario mediante transiciones suaves entre temas

🎯 Introducción #

¿Por qué es importante el Dark Mode? #

El modo oscuro se ha convertido en una característica esencial de las aplicaciones modernas. Según estudios recientes, más del 80% de los usuarios prefieren interfaces oscuras en condiciones de baja luminosidad.

Tailwind Diseño Responsivo

Wed, 07 Jan 2026 23:06:10 -0500

Tailwind CSS - Responsive Design #

📋 Objetivos de aprendizaje #

Comprender el sistema de breakpoints de Tailwind CSS y cómo aplicar estilos responsive
Dominar el enfoque mobile-first para crear interfaces adaptables
Implementar layouts responsivos utilizando utilidades de Tailwind
Aplicar técnicas avanzadas como mostrar/ocultar elementos y cambiar tamaños según el dispositivo
Optimizar la experiencia de usuario en diferentes tamaños de pantalla

🎯 Introducción #

En la actualidad, más del 60% del tráfico web proviene de dispositivos móviles. Crear sitios web que se vean bien en cualquier pantalla ya no es opcional: es esencial.

Tailwind Estados Interactivos

Wed, 07 Jan 2026 22:50:36 -0500

Tailwind CSS: Estados Interactivos (hover, active, focus, focus-within) #

📋 Objetivos de aprendizaje #

Comprender cómo funcionan los modificadores de estado en Tailwind CSS
Aplicar estilos interactivos con hover, active, focus y focus-within
Combinar múltiples estados para crear interfaces de usuario dinámicas
Implementar patrones de accesibilidad utilizando estados de enfoque
Optimizar la experiencia de usuario mediante feedback visual interactivo

🎯 Introducción #

¿Por qué son importantes los estados interactivos? #

Los usuarios modernos esperan que las interfaces web respondan a sus acciones. Cuando pasas el cursor sobre un botón, esperas algún tipo de feedback visual. Cuando un campo de formulario está enfocado, debe indicarte claramente dónde estás escribiendo.

Tailwind Introducción

Wed, 07 Jan 2026 22:19:52 -0500

Introducción a Tailwind CSS #

📋 Objetivos de aprendizaje #

Comprender qué es Tailwind CSS y cómo difiere de otros frameworks CSS tradicionales
Instalar y configurar Tailwind CSS en un proyecto web
Aplicar clases utilitarias para crear diseños responsivos sin escribir CSS personalizado
Implementar los principios de diseño utility-first para construir interfaces modernas
Desarrollar componentes reutilizables utilizando las clases predefinidas de Tailwind

🎯 Introducción #

¿Qué es Tailwind CSS? #

Tailwind CSS es un framework de CSS de tipo utility-first (utilidades primero) que te permite construir interfaces de usuario modernas directamente en tu HTML. A diferencia de frameworks como Bootstrap o Foundation que proporcionan componentes prediseñados, Tailwind te da clases utilitarias de bajo nivel que funcionan como bloques de construcción.

Flex Y Grid

Thu, 11 Dec 2025 14:53:06 -0500

CSS: Flexbox y Grid Layout #

📋 Objetivos de aprendizaje #

Comprender cuándo usar Flexbox vs Grid y sus casos de uso ideales
Dominar las propiedades fundamentales de Flexbox para layouts unidimensionales
Crear layouts bidimensionales complejos usando CSS Grid
Aplicar técnicas de alineación y distribución de espacio en ambos sistemas
Desarrollar layouts responsivos modernos combinando ambas herramientas

🎯 Introducción #

Durante años, los desarrolladores web tuvimos que usar “hacks” con floats, tablas y positioning para crear layouts. Esto era frustrante, poco intuitivo y difícil de mantener.

Position Css

Thu, 11 Dec 2025 14:47:30 -0500

CSS: Position - Controlando el Flujo de Elementos #

📋 Objetivos de aprendizaje #

Al finalizar esta clase serás capaz de:

Comprender cómo funciona el flujo normal de documento y cómo position lo altera
Diferenciar y aplicar correctamente los cinco valores de position: static, relative, absolute, fixed y sticky
Utilizar las propiedades de desplazamiento (top, right, bottom, left) junto con position
Crear layouts complejos combinando diferentes tipos de posicionamiento
Identificar y resolver problemas comunes relacionados con el posicionamiento de elementos

🎯 Introducción #

¿Por qué es importante position? #

Imagina que estás organizando muebles en una habitación. Por defecto, los colocas uno tras otro siguiendo un orden natural. Pero a veces necesitas:

Box Model

Thu, 11 Dec 2025 14:31:17 -0500

Box Model CSS: La Base del Layout Web #

📋 Objetivos de aprendizaje #

Al finalizar esta clase, serás capaz de:

Comprender la estructura completa del Box Model y cómo cada componente afecta el tamaño final de los elementos
Aplicar correctamente padding, border, margin y content para controlar el espaciado
Diferenciar entre box-sizing: content-box y box-sizing: border-box y elegir el más apropiado
Diagnosticar y resolver problemas comunes de espaciado y dimensionamiento
Utilizar las DevTools del navegador para inspeccionar y depurar el Box Model

🎯 Introducción #

¿Por qué es importante el Box Model? #

Imagina que estás organizando muebles en una habitación. Necesitas saber no solo el tamaño del mueble, sino también cuánto espacio hay alrededor de él y si tiene un marco decorativo. El Box Model CSS funciona exactamente igual: cada elemento HTML es una “caja” con múltiples capas que determinan su espacio total.

Etiquetas Contenedoras

Thu, 11 Dec 2025 13:55:21 -0500

Etiquetas Contenedoras HTML #

📋 Objetivos de aprendizaje #

Comprender qué son las etiquetas contenedoras y su función en la estructura HTML
Identificar y utilizar correctamente las principales etiquetas contenedoras semánticas
Aplicar la jerarquía correcta de contenedores para crear layouts bien estructurados
Diferenciar entre etiquetas contenedoras genéricas y semánticas
Implementar una arquitectura HTML accesible y mantenible usando contenedores apropiados

🎯 Introducción #

¿Por qué son importantes las etiquetas contenedoras? #

Imagina que estás organizando una biblioteca. No simplemente apilas todos los libros en el suelo, ¿verdad? Los organizas en estanterías, secciones, y categorías. Las etiquetas contenedoras hacen exactamente eso con el contenido web.

Formularios Y Tablas

Wed, 10 Dec 2025 11:00:32 -0500

Formularios y Tablas HTML #

📋 Objetivos de aprendizaje #

Crear formularios HTML completos con diferentes tipos de campos de entrada
Estructurar datos tabulares de manera semántica usando elementos de tabla
Implementar validación básica de formularios y atributos de accesibilidad
Aplicar buenas prácticas para mejorar la experiencia de usuario en formularios
Comprender la diferencia entre presentación visual y estructura semántica de datos

🎯 Introducción #

Los formularios y tablas son dos de los componentes más importantes en el desarrollo web. Los formularios son el puente de comunicación entre el usuario y tu aplicación: permiten recopilar información, realizar búsquedas, registrar usuarios, procesar pagos y mucho más. Por otro lado, las tablas son la forma correcta de presentar datos estructurados en filas y columnas.