Overview

As part of the Frontend Development Bootcamp at Factoría F5, this solo 1-week sprint project focused on building Decaclon—a functional e-commerce frontend web application modeled after Decathlon’s 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.

The Challenge

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: Translating a complex commercial layout into modular, reusable React components while preserving brand consistency.

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

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

     - Sprint Scope Balancing: Executing visual design, user story tracking, local backend setup, and frontend development within tight time constraints.

Our Approach

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

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

Encapsulated API Architecture:
     - Set up a JSON-Server 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:
     - Developed core layout components using React.js (Header with search/logo, promotional Update Banner, Top Sales showcase, and multi-column Footer with contact and store location details).

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

Iterative Sprint Prioritization:
     - 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.

Project Gallery

Results

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

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

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

     - Agile MVP Delivery: Successfully executed a end-to-end design-to-code workflow, delivering a robust core product under strict time constraints.