Descripción General

Como parte del Bootcamp de Desarrollo Frontend de Factoría F5, este proyecto individual de una semana se centró en la creación de Decaclon, una aplicación web frontend funcional de comercio electrónico inspirada en la plataforma digital de Decathlon. El objetivo era la transición de las tecnologías web básicas a la arquitectura basada en componentes de React. El proyecto, ejecutado de forma individual, abarcó la creación de prototipos visuales iniciales en Figma, la gestión ágil de tareas mediante Trello, la encapsulación de datos de API y el enrutamiento multipágina con React Router.

El Desafío

Replicar una interfaz de comercio electrónico a gran escala como la de Decathlon presenta importantes desafíos estructurales y de arquitectura de datos para un proyecto de sprint corto:
     - Arquitectura de Interfaz de Usuario Basada en Componentes: Traducir un diseño comercial complejo en componentes React modulares y reutilizables, manteniendo la coherencia de la marca.

     - Gestión de Datos Encapsulada: Aislar la lógica del cliente HTTP de los componentes visuales de la interfaz de usuario mediante la creación de una clase de servicio API especializada (DecathlonApi).

     - Navegación Multivista: Configurar un enrutamiento fluido del lado del cliente entre las vistas de inicio y catálogo sin recargar la página completa.

     - Equilibrio del Alcance del Sprint: Ejecutar el diseño visual, el seguimiento de historias de usuario, la configuración del backend local y el desarrollo del frontend dentro de plazos ajustados.

Nuestro Enfoque

Para entregar un Producto Mínimo Viable (MVP) estable y de alta fidelidad, implementamos un flujo de trabajo individual y disciplinado:
Diseño y Planificación Ágil:
     - Analizamos el sistema de diseño de la interfaz de usuario de Decathlon y creamos los wireframes iniciales en Figma.

     - Estructuramos los flujos de trabajo de las tareas en tarjetas de historias de usuario en Trello para realizar un seguimiento de los hitos del sprint (Página de inicio, Vista del catálogo y Backlog de detalles del producto).

Arquitectura de API Encapsulada:
     - Configuramos un backend REST simulado con JSON-Server , poblado con metadatos y precios de productos deportivos.

     - Creamos una clase JavaScript específica para DecathlonApi que encapsula las solicitudes de obtención de datos, manteniendo los componentes de la interfaz de usuario limpios y desacoplados de la lógica de datos.

Desarrollo y Enrutamiento de Componentes:
     - Desarrollamos los componentes principales del diseño con React.js (Encabezado con búsqueda/logotipo, Banner de actualización promocional, Muestra de productos más vendidos y Pie de página de varias columnas con información de contacto y ubicación de las tiendas).

     - Se configuró React Router (v6) para gestionar transiciones fluidas del lado del cliente entre la página de inicio y la sección del catálogo de productos categorizados.

Priorización Iterativa del Sprint:
     - La ejecución del sprint se centró en perfeccionar los componentes principales de la página de inicio y la renderización dinámica del catálogo.

     - Se documentó la vista detallada de cada producto (Historia de usuario 3) en el backlog técnico para futuras versiones iterativas, garantizando un MVP completamente funcional y sin errores dentro del plazo establecido.

Galería de Proyectos

Resultados

El sprint de una semana dio como resultado una aplicación de comercio electrónico React limpia y completamente operativa, implementada con éxito en Vercel:
     - Alta Fidelidad Visual: Se recreó fielmente la estética de la marca y la jerarquía de diseño de la tienda online de Decathlon.

     - Estructura de Código Desacoplada: Se implementó una elegante estructura de clases DecathlonApi que aísla eficazmente la obtención de datos dinámicos de la renderización de la interfaz de usuario.

     - Navegación Fluida del Lado del Cliente: Se logró una transición fluida entre la página de inicio y el catálogo de categorías mediante React Router.

     - Entrega Ágil de MVP: Se ejecutó con éxito un flujo de trabajo integral de diseño a código, entregando un producto central robusto bajo estrictas limitaciones de tiempo.