Bundle Builder

Test ID: 41913

A multi-step bundle builder React prototype where shoppers assemble a security system through a guided accordion interface with a live review panel.

Live Demo

https://bundle-builder-six-mu.vercel.app/

Setup Instructions

Ensure you have Node.js installed, then run the following commands to start the project locally:

# Clone the repository
git clone https://github.com/abdelrahman-samy-dev/bundle-builder.git

# Navigate to the project directory
cd bundle-builder

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

The application will be available at http://localhost:5173.

Tech Stack

• React 19
• Vite
• Tailwind CSS v4
• Context API

Key Decisions

• State Management: Utilized React Context API with useReducer to manage global state. This approach avoids external dependencies while efficiently handling complex state interactions between the builder and the review panel.
• Variant-Level Tracking: Quantities are tracked at the variant level rather than the product level. Selecting a different color updates the active variant, and its unique quantity is tracked independently. The review panel accurately reflects every variant with a quantity greater than zero.
• Data-Driven UI: The application is entirely data-driven, deriving all steps, products, variants, and initial seeded states from src/data/products.json. No product markup is hardcoded.
• Persistence: Client-side persistence is implemented using localStorage. When the user clicks the save link, the configuration (quantities, selected variants, and active step) is serialized and stored. It is successfully restored upon page reload or subsequent visits.
• Responsive Layout: Designed to match the desktop Figma file precisely, while gracefully adapting to tablet and mobile viewports via a responsive CSS grid and flexbox layout.