A responsive Bundle Builder application built with React, Vite, and Tailwind CSS. The application allows users to build a custom security system, review their selections in real time, and save their configuration for future visits using localStorage.
- Multi-step bundle builder
- Live review panel with pricing updates
- Product quantity controls
- Product variant selection
- Responsive design matching the provided Figma
- Save system configuration using
localStorage - Restore saved configuration after page reload or future visits
- Checkout confirmation modal (prototype placeholder)
- React
- Vite
- Tailwind CSS
- JavaScript (ES6+)
Clone the repository:
git clone https://github.com/ghada258/EcomExperts_Task.gitNavigate to the project folder:
cd EcomExperts_TaskInstall dependencies:
npm installStart the development server:
npm run devBuild for production:
npm run buildPreview the production build:
npm run previewThe "Save my system for later" feature stores the current bundle configuration in localStorage. Reloading the page or revisiting the application restores the saved configuration automatically.
- Used React functional components with reusable component architecture.
- Stored product data in a local JSON-like data file for simplicity.
- Used Tailwind CSS for responsive styling and rapid UI development.
- Managed application state with React hooks.
- Implemented reusable components for products, plans, quantity controls, and review summary.
- Product data is stored locally instead of using a backend API.
- Checkout is implemented as a simple confirmation modal since the task specifies it as a prototype placeholder.
- Responsive layout
- Multi-step accordion builder
- Live review panel
- Quantity controls
- Variant selection
- Dynamic pricing
- Save & restore system using localStorage
- Checkout placeholder
- Clean component structure
GitHub Repository: