{"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\/en\/decaclon-product-catalog-clone\/","title":{"rendered":"Decaclon-Product Catalog Clone"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \n \t\t\t

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

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

Decaclon - Product Catalog Clone<\/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

Overview<\/h2>\n\t\t\t\t\t

As part of the Frontend Development Bootcamp at Factor\u00eda F5<\/strong>, this solo 1-week sprint project focused on building Decaclon<\/strong>\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 early visual prototyping in Figma, Agile task management via Trello, API data encapsulation, and multi-page routing with React Router.<\/p>\n\t\t\t\t\t

The Challenge<\/h2>\n\t\t\t\t\t

Replicating a large-scale e-commerce interface like Decathlon presents significant structural and data architecture challenges for a short-sprint project:
     - Component-Based UI Architecture<\/strong>: Translating a complex commercial layout into modular, reusable React components while preserving brand consistency.

     - Encapsulated Data Management<\/strong>: Isolating HTTP client logic from the visual UI components by engineering a specialized API service class (DecathlonApi).

     - Multi-View Navigation<\/strong>: Setting up smooth client-side routing across home and catalog views without full page reloads.

     - Sprint Scope Balancing<\/strong>: Executing visual design, user story tracking, local backend setup, and frontend development within tight time constraints.<\/p>\n\t\t\t\t\t

Our Approach<\/h2>\n\t\t\t\t\t

To deliver a stable, high-fidelity Minimum Viable Product (MVP), we executed a disciplined solo workflow:
Design & Agile Planning<\/strong>:
     - Analyzed Decathlon's UI design system and mapped out initial layout wireframes in Figma<\/strong>.

     - Structured task workflows into user story cards on Trello<\/strong> to track sprint milestones (Landing Page, Catalog View, and Product Detail Backlog).

Encapsulated API Architecture<\/strong>:
     - Set up a JSON-Server<\/strong> mock REST backend populated with sports product metadata and pricing.

     - Built a dedicated DecathlonApi JavaScript class encapsulating fetch requests, keeping UI components clean and decoupled from data logic.

Component Development & Routing<\/strong>:
     - Developed core layout components using React.js<\/strong> (Header with search\/logo, promotional Update Banner, Top Sales showcase, and multi-column Footer with contact and store location details).

     - Configured React Router (v6)<\/strong> to manage seamless client-side transitions between the homepage landing and the categorized product catalog section.

Iterative Sprint Prioritization<\/strong>:
     - Focused sprint execution on perfecting core landing page components and dynamic catalog rendering.

     - Documented the detailed individual product view (User Story 3) into the technical backlog for future iterative releases, ensuring a fully working, bug-free MVP within the deadline.<\/p>\n\t\t\t\t\t

Project Gallery<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit the Website<\/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

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

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

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

Results<\/h2>\n\t\t\t\t\t

The 1-week sprint resulted in a clean, fully operational React e-commerce application successfully deployed on Vercel:
     - High Visual Fidelity<\/strong>: Faithfully recreated the brand aesthetic and layout hierarchy of Decathlon's digital storefront.

     - Decoupled Code Structure<\/strong>: Implemented an elegant DecathlonApi class structure that neatly isolates dynamic data fetches from UI rendering.

     - Fluid Client-Side Navigation<\/strong>: Delivered smooth view switching between the home page and category catalog using React Router.

     - Agile MVP Delivery<\/strong>: Successfully executed a end-to-end design-to-code workflow, delivering a robust core product under strict time constraints.<\/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

YEAR<\/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

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

Frontend Web Development
UX\/UI & Prototyping
API & Service Architecture<\/p>\n\t\t\t\t\t

TOOLS & TECHNOLOGY<\/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

TAGS<\/p>\n\t\t

\n
\n \t\t\t

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

\n \t\t\t

Frontend Development<\/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

Agile Development<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

REST API Integration<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Component Architecture<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

Interested in a similar project?<\/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\tGet in Touch<\/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>\n\t\t","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\/en\/wp-json\/wp\/v2\/pages\/2581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/comments?post=2581"}],"version-history":[{"count":28,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2581\/revisions"}],"predecessor-version":[{"id":2689,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2581\/revisions\/2689"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/media?parent=2581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}