Esta actividad consistió en desarrollr un clon funcional de la página de Decathlon utilizando React, con el objetivo de familiarizarnos con la estructura de componentes, el consumo de APIs y la organización de un proyecto frontend profesional.
Antes de empezar a programar, se realizó un análisis de la web origial y se diseño una propuesta visual en Figma. Para la obtención de datos, se podía utilizar una API pública relacionada con productos deportivos o crear una API propia mediante json-server, en mi caso, cree un json-server.
Clon funcional de la página de Decathlon creada con React.
Haz clic en la imagen para visitar la web.
PROCESO CREATIVO
Durante el desarrollo del proyecto seguí una metodología basada en diseño previo, organización por historias de usuario y construcción por componentes:
- Planificación en Trello: Creé un tablero con tres historias de usuario principales: página de portada, menú y página del producto.
- Diseño en Figma: Antes de escribir código analicé la estructura de la web original y generé un diseño propio de Figma, respetando la estética limpia y modular de Decathlon. Definí componentes reutilizables y el layout general.
- Implementación en React: Construí la aplicación de React y separando la lógica en componentes reutilizables. A partir de las historias de usuario desarrollé las siguientes vistas:
- Home: Estructura del banner, top ventas, menú y footer.
- Catálogo: Muestra un slider de productos obtenidos mediante API.
- Detalle de productos: Visualización de más productos al hacer clic en el apartado de deportes del menú.
- Alcance y limitaciones: Durante el desarrollo se complementaron todas las historias de usuario previstas menos la última, devido a limitaciones de tiempo.