{"id":2581,"date":"2026-07-30T11:11:52","date_gmt":"2026-07-30T09:11:52","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2581"},"modified":"2026-07-30T19:47:07","modified_gmt":"2026-07-30T17:47:07","slug":"decaclon-product-catalog-clone","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/decaclon-product-catalog-clone\/","title":{"rendered":"Decaclon-Product Catalog Clone"},"content":{"rendered":"
\n\t\t\t\t
\n \n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

Decaclon - Clon de Cat\u00e1logo de Productos<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Descripci\u00f3n General<\/h2>\n\t\t\t\t\t

Como parte del Bootcamp de Desarrollo Frontend de Factor\u00eda F5<\/strong>, este proyecto individual de una semana se centr\u00f3 en la creaci\u00f3n de Decaclon<\/strong>, una aplicaci\u00f3n web frontend funcional de comercio electr\u00f3nico inspirada en la plataforma digital de Decathlon. El objetivo era la transici\u00f3n de las tecnolog\u00edas web b\u00e1sicas a la arquitectura basada en componentes de React. El proyecto, ejecutado de forma individual, abarc\u00f3 la creaci\u00f3n de prototipos visuales iniciales en Figma, la gesti\u00f3n \u00e1gil de tareas mediante Trello, la encapsulaci\u00f3n de datos de API y el enrutamiento multip\u00e1gina con React Router.<\/p>\n\t\t\t\t\t

El Desaf\u00edo<\/h2>\n\t\t\t\t\t

Replicar una interfaz de comercio electr\u00f3nico a gran escala como la de Decathlon presenta importantes desaf\u00edos estructurales y de arquitectura de datos para un proyecto de sprint corto:
     - Arquitectura de Interfaz de Usuario Basada en Componentes<\/strong>: Traducir un dise\u00f1o comercial complejo en componentes React modulares y reutilizables, manteniendo la coherencia de la marca.

     - Gesti\u00f3n de Datos Encapsulada<\/strong>: Aislar la l\u00f3gica del cliente HTTP de los componentes visuales de la interfaz de usuario mediante la creaci\u00f3n de una clase de servicio API especializada (DecathlonApi).

     - Navegaci\u00f3n Multivista<\/strong>: Configurar un enrutamiento fluido del lado del cliente entre las vistas de inicio y cat\u00e1logo sin recargar la p\u00e1gina completa.

     - Equilibrio del Alcance del Sprint<\/strong>: Ejecutar el dise\u00f1o visual, el seguimiento de historias de usuario, la configuraci\u00f3n del backend local y el desarrollo del frontend dentro de plazos ajustados.<\/p>\n\t\t\t\t\t

Nuestro Enfoque<\/h2>\n\t\t\t\t\t

Para entregar un Producto M\u00ednimo Viable (MVP) estable y de alta fidelidad, implementamos un flujo de trabajo individual y disciplinado:
Dise\u00f1o y Planificaci\u00f3n \u00c1gil<\/strong>:
     - Analizamos el sistema de dise\u00f1o de la interfaz de usuario de Decathlon y creamos los wireframes iniciales en Figma<\/strong>.

     - Estructuramos los flujos de trabajo de las tareas en tarjetas de historias de usuario en Trello<\/strong> para realizar un seguimiento de los hitos del sprint (P\u00e1gina de inicio, Vista del cat\u00e1logo y Backlog de detalles del producto).

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

     - Creamos una clase JavaScript espec\u00edfica para DecathlonApi que encapsula las solicitudes de obtenci\u00f3n de datos, manteniendo los componentes de la interfaz de usuario limpios y desacoplados de la l\u00f3gica de datos.

Desarrollo y Enrutamiento de Componentes<\/strong>:
     - Desarrollamos los componentes principales del dise\u00f1o con React.js<\/strong> (Encabezado con b\u00fasqueda\/logotipo, Banner de actualizaci\u00f3n promocional, Muestra de productos m\u00e1s vendidos y Pie de p\u00e1gina de varias columnas con informaci\u00f3n de contacto y ubicaci\u00f3n de las tiendas).

     - Se configur\u00f3 React Router (v6)<\/strong> para gestionar transiciones fluidas del lado del cliente entre la p\u00e1gina de inicio y la secci\u00f3n del cat\u00e1logo de productos categorizados.

Priorizaci\u00f3n Iterativa del Sprint<\/strong>:
     - La ejecuci\u00f3n del sprint se centr\u00f3 en perfeccionar los componentes principales de la p\u00e1gina de inicio y la renderizaci\u00f3n din\u00e1mica del cat\u00e1logo.

     - Se document\u00f3 la vista detallada de cada producto (Historia de usuario 3) en el backlog t\u00e9cnico para futuras versiones iterativas, garantizando un MVP completamente funcional y sin errores dentro del plazo establecido.<\/p>\n\t\t\t\t\t

Galer\u00eda de Proyectos<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita la Web<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita Figma<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita Trello<\/p>\n\t\t\n<\/a>\n\n<\/div>\n\n<\/div>\n\t\t\t

Resultados<\/h2>\n\t\t\t\t\t

El sprint de una semana dio como resultado una aplicaci\u00f3n de comercio electr\u00f3nico React limpia y completamente operativa, implementada con \u00e9xito en Vercel:
     - Alta Fidelidad Visual<\/strong>: Se recre\u00f3 fielmente la est\u00e9tica de la marca y la jerarqu\u00eda de dise\u00f1o de la tienda online de Decathlon.

     - Estructura de C\u00f3digo Desacoplada<\/strong>: Se implement\u00f3 una elegante estructura de clases DecathlonApi que a\u00edsla eficazmente la obtenci\u00f3n de datos din\u00e1micos de la renderizaci\u00f3n de la interfaz de usuario.

     - Navegaci\u00f3n Fluida del Lado del Cliente<\/strong>: Se logr\u00f3 una transici\u00f3n fluida entre la p\u00e1gina de inicio y el cat\u00e1logo de categor\u00edas mediante React Router.

     - Entrega \u00c1gil de MVP<\/strong>: Se ejecut\u00f3 con \u00e9xito un flujo de trabajo integral de dise\u00f1o a c\u00f3digo, entregando un producto central robusto bajo estrictas limitaciones de tiempo.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

A\u00d1O<\/p>\n\t\t\n<\/div>\n\t\t\t

2023<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICIOS<\/p>\n\t\t\n<\/div>\n\t\t\t

Desarrollo Web Frontend
UX\/UI y Creaci\u00f3n de Prototipos
Arquitectura de API y Servicios<\/p>\n\t\t\t\t\t

HERRAMIENTAS Y TECNOLOG\u00cdA<\/p>\n\t\t

\n
\n \t\t\t

React.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

React Router Dom<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

JSON-Server<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Trello<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

JavaScript<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Vercel<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

ETIQUETAS<\/p>\n\t\t

\n
\n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Desarrollo Frontend<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

React.js<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

React Router<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Desarrollo \u00c1gil<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Integraci\u00f3n de API REST<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Arquitectura de Componentes<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

\u00bfTe interesa un proyecto similar?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tPonte en contacto<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Web Development Decaclon – Product Catalog Clone Overview As part of the Frontend Development Bootcamp at Factor\u00eda F5, this solo 1-week sprint project focused on building Decaclon\u2014a functional e-commerce frontend web application modeled after Decathlon\u2019s digital platform. The objective was to transition from fundamental web technologies to React’s component-driven architecture. Executed individually, the project spanned […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2581","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/comments?post=2581"}],"version-history":[{"count":28,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2581\/revisions"}],"predecessor-version":[{"id":2689,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2581\/revisions\/2689"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=2581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}