📄️ Introducción
Enlace del proyecto en Github
📄️ Dependencias
Vamos a repasar las dependencias más importantes de este primer proyecto para comprender cómo está configurado.
📄️ Vite
Create React App ha sido durante muchos años la herramienta por defecto para crear Single Page Applications en React. La propia documentación de React lo recomienda como el framework recomendado para crear aplicaciones. El problema es que tiene alguna desventaja de rapidez y rendimiento que es cada vez más evidente comparado con nuevas herramientas.
📄️ Estructura
Ahora vamos a hablar de la estructura general del repositorio, también llamado scaffolding. Vite tiene bastante libertad en la forma de organizar nuestro código, no es un Framework tan restrictivo como puede ser Gatsby o Nextjs, con todas sus ventajas e inconvenientes. Como ventajas tenemos una mayor libertad a la hora de organizar el proyecto, pudiendo personalizar más nuestra codebase, pero precisamente esa puede ser también una desventaja, pudiendo convertir nuestro proyecto en un autentico cajón de sastre si no organizamos bien el código.
📄️ Contexto
Como habréis visto en el Módulo de Front-end, en una aplicación en React, la información se pasa de arriba a abajo (de padre a hijo) mediante props. Este flujo está bien para determinados casos de uso, pero para ciertas funcionalidades se puede quedar corto. Es por eso que los contextos proporcionan una forma de compartir información entre componentes sin tener que pasarla explícitamente a través de un prop de forma descendiente.
📄️ Hooks
Ya llevamos varios años con hooks, desde su introducción en React 16.8 y son funciones que permiten añadir funcionalidad extra a nuestros componentes funcionales como el control del estado con useState, el ciclo de vida del componente con useEffect o incluso funcionalidad personalizada con custom hooks. Nosotros hemos utilizado esta característica para poder utilizar nuestros contextos dentro de los componentes funcionales de la aplicación y hacer llamadas en la aplicación.
📄️ Navegación
La navegación entre rutas en React se puede solventar de diversas maneras. Como ya hemos comentado, tanto React como Vite son muy poco estrictos a la hora de implementar funcionalidades, es por ello que hay que apoyarse normalmente en librerías de terceros para desarrollar ciertas características y contemos con diversas maneras de implementar una misma funcionalidad. Algunas toolchains como Gatsby o Next.js cuentan con soluciones propias para la navegación (o routing). Pero en este caso hemos utilizado Vite y es por ello que vamos a usar una de las librerías más populares para nuestra navegación, React Router.
📄️ Estilo
Al igual que otras funcionalidades dentro de Vite, hay múltiples maneras de implementar el estilo de nuestra webapp. En este caso, hemos utilizado una combinación de librerías y organización del código para hacer nuestros estilos lo más reusables y personalizables posibles.
📄️ Internacionalización
Hay muchas características que diferencian una webapp simple de un proyecto profesional. Cosas como la seguridad (que veremos en próximas sesiones), la accesibilidad de la página, el diseño multipantalla, o la internacionalización del contenido hacen que nuestro proyecto pueda llegar a muchas más personas de una manera más segura. En esta sección nos vamos a detener en la internacionalización de la página con el framework i18next.
📄️ Modelos
Como hablamos en el curso te TypeScript, las interfaces son un tipo de construcción que permite definir los tipos en Objetos JavaScript. El compilador de TS no convierte la interfaz en código JavaScript, utiliza las interfaces para la comprobación de tipos.
📄️ Mocks
Como hemos comentado al principio, todavía no tenemos un backend al que hacer peticiones para extraer la información con la que vamos a poblar nuestro Dashboard. Es por ello que para esta primera sección vamos a crear un fichero de datos mock para simular estas peticiones y poder reemplazarlas fácilmente al integrar nuestro backend.
📄️ Autenticación
Para ir acabando esta sesión vamos a hablar de uno de los aspectos más importantes de nuestar webapp: la lógica de la autenticación. Es muy importante tener una lógica robusta para el acceso de contenido en nuestros proyectos. Es un esfuerzo combinado entre el servidor, que solo proveerá la información requerida para cada rol, y el frontal, que mantendrá el estado de la autenticación en cada momento e implementará determinadas lógicas dependiendo de si estamos autenticados o no.
📄️ Componentes
Vamos a finalizar la sesión hablando por encima de los componentes de nuestro proyecto. Como ya sabemos los componentes son un elmento esencial de React y es por ello que la mayoría de elementos de nuestra web app van a ser componentes reutilizables. Como ya indicamos Vite tiene cierta flexibilidad a la hora de organizar nuestro repositorio, es por ello que hay diversas maneras de categorizar nuestros componentes, ahora vamos a hablar de la que hemos seguido en este proyecto.
📄️ Estructura Clase
En esta sesión vamos a detallar los pasos que hemos seguido en clase para preparar el proyecto con la estructura final que hemos usado para nuestro ejemplo. Los pasos son los siguientes
📄️ Creación del proyecto con herramientas generativas
En esta sección intentaremos detallar como usar herramientas generativas para crear un proyecto que contenga los principales elementos que acabamos de repasar. Incluye: stack tecnológico, estructura de carpetas, dependencias clave, configuración, componentes fundamentales, autenticación, internacionalización, datos mock, pruebas y observabilidad.
📄️ Prompt GPT‑5 para Generar/Recrear el Proyecto
Esta sección proporciona: (1) un prompt XML exhaustivo listo para usar con GPT‑5, (2) recomendaciones de uso en Copilot Coding Agent y GitHub Spark, y (3) notas de adaptación. El objetivo es regenerar o evolucionar el front-end manteniendo arquitectura, estándares y extensibilidad.