CodeIA Logo
Inicio
¿Qué es la Ingeniería de Contexto?ExperienciaProyectos realizados
Comunidad
FeedMiembrosCuadro de HonorCalendarioBolsa de trabajoEncuestasProyectos de la Comunidad
NoticiasPrecios
Formación
CursosLecciones
Co-Projects
Propuestas de proyectosEnviar propuesta de proyecto
RoadmapGlosarioContacto
Iniciar Sesión
CodeIA Logo

Transformando ideas en software profesional con IA. La nueva era del desarrollo ágil.

Legal

Política de PrivacidadTérminos de ServicioTérminos de SuscripciónAviso LegalCookies

Sígueme

Contactar

© 2026 CodeIA. Todos los derechos reservados.

Hecho con♥por sn4p.dev

Volver al catálogo
Vista previa bloqueada

Solo para Founders

Este contenido es exclusivo para miembros Founder.

Iniciar sesiónCrear cuenta

CodeIA2025 - Sesión 7: React – Landing Profesional + Consumo de API

En esta sesión conectamos por fin backend y frontend. Durante los primeros 30 minutos completamos el despliegue del backend E4 en Easypanel (si quedó pendiente en la sesión 6) y validamos que la API esté estable. A continuación iniciamos el Proyecto P2: Landing Page Profesional del Restaurante usando React 19, Tailwind y subagentes de IA para generar el código sin escribirlo a mano.

SesiónTodos
Hace 5 meses2h 25m 54s94 visualizaciones5.0(1 reviews)

Tecnologías

Asistente IA para códigoJavaScriptPlanningReactNext.jsTypeScript

Herramientas IA utilizadas

AntigravityClaudeClaude CodeCursor
Iniciar sesión para comenzarCrear cuenta

Sesión 7 – Landing del Restaurante con React 19

Proyecto P2 – Landing Page Profesional · Consumiendo la API del Backend E4 (monorepo)

En esta sesión conectamos por fin backend y frontend. Durante los primeros 30 minutos completamos el despliegue del backend E4 en Easypanel (si quedó pendiente en la sesión 6) y validamos que la API esté estable. A continuación iniciamos el Proyecto P2: Landing Page Profesional del Restaurante usando React 19, Tailwind y subagentes de IA para generar el código sin escribirlo a mano.

1. Descripción General

Venimos de varias sesiones centradas en backend (modelo de datos, arquitectura NestJS, Prisma, Docker, Easypanel). Ya tenemos la API del proyect

Contenido Protegido

Inicia sesión para acceder al contenido completo.

Iniciar SesiónCrear Cuenta

Índice de la sesión

00:006:02
Introducción, Práctica y Novedades de la Plataforma

Se enfatiza la importancia de la práctica y se presentan las nuevas funcionalidades de la plataforma como mentorías, co-projects y gamificación. Se introduce la ingeniería de contexto y el prompting.

06:028:40
Planificación del Módulo 2 y Objetivos de la Sesión

Presentación del plan de estudios del Módulo 2, enfocado en el stack moderno (React, Angular, Vue). Se detallan los objetivos de la sesión: crear una landing para restaurantes con React 19 y Tailwind.

14:4211:54
Despliegue del Backend y Seguridad en NPM

Se explican los conceptos de CI/CD y se intenta desplegar el backend. Se discute la seguridad de los paquetes NPM, cómo verificar su fiabilidad y se ejecuta el comando `npm run build` para compilar el proyecto.

26:3621:57
Migración del Backend de NPM a PNPM

Se decide trabajar en local y se realiza la migración del gestor de paquetes de NPM a PNPM. Se utiliza la IA para guiar el proceso, generar los prompts y solucionar los primeros errores de ejecución.

48:332:50
Verificación del Backend y Ayuda a Estudiantes

Se comprueba que el backend funciona correctamente accediendo a la documentación de Swagger. Se dedica tiempo a resolver problemas de los estudiantes para que todos tengan el backend operativo.

51:237:37
Diseño Conceptual y Estructura del Frontend

Se definen las tecnologías y la arquitectura para el frontend (React 19, App Router, Tailwind, ShadCN). Se utiliza un agente de IA para generar un documento conceptual sobre la UI de la landing page.

59:0034:05
Generación del Proyecto Frontend con IA

Se utilizan una serie de prompts para que la IA cree la estructura del proyecto frontend, instalando Next.js, React 19, Tailwind CSS y ShadCN UI. Se resuelven dudas y errores durante el proceso.

01:33:057:12
Creación de Datos Mock para la Interfaz

Se le pide a la IA que genere datos de prueba (mock data) para poblar la landing page, mostrando dinámicamente platos, reseñas y otros contenidos, y haciendo la interfaz funcional.

01:40:173:09
Análisis de la Arquitectura: Next.js vs React

Se explica por qué la IA implementó Next.js para gestionar las rutas del frontend y se analiza la arquitectura final del proyecto con Next.js en el frontend y Nest.js en el backend.

01:43:267:51
Gestión de Versiones y Próximos Pasos del Proyecto

Se discuten los siguientes pasos para el proyecto, como la creación de un dashboard. Se explica la importancia de la gestión de versiones con Git, incluyendo commits y versionado semántico (semver).

01:51:174:01
Debate sobre Metodologías de Desarrollo Ágil

Se debate sobre diferentes enfoques de desarrollo, como la planificación por fases versus la adaptación a cambios y nuevas prioridades del cliente, ejemplificando con proyectos reales.

01:55:1811:56
Resolución de Errores Finales y Conclusiones

La última parte de la sesión se centra en ayudar a los estudiantes a solucionar errores de TypeScript y configuración. Se ofrecen consejos finales y se concluye la clase.

Lecciones relacionadas

  • Ingeniería de Contexto CodeIA 2025 - Sesion 0

    Ingeniería de Contexto CodeIA 2025 - Sesion 0

    2h 11m 39s

  • KickOff - CodeIA 2025

    KickOff - CodeIA 2025

    1h 31m 12s

  • CodeIA2025 - Sesión 3 – Agentes, Multi‑Agentes y Herramientas IA

    CodeIA2025 - Sesión 3 – Agentes, Multi‑Agentes y Herramientas IA

    2h 24m 51s

  • CodeIA2025 - Sesión 5 – Backend Profesional con IA

    CodeIA2025 - Sesión 5 – Backend Profesional con IA

    2h 56m 54s