Bundle-Builder

A modern, responsive bundle builder interface that allows users to create product bundles with real-time pricing calculations and smooth animations.

Features

• Interactive Product Selection: Browse and select products from a responsive grid layout
• Dynamic Bundle Management: Add and remove products with smooth animations
• Real-time Pricing: Automatic discount calculations and subtotal updates
• Modern UI/UX: Clean design with skeleton loading states and hover effects
• Responsive Design: Optimized for all screen sizes and devices
• Accessibility: Semantic HTML structure with proper ARIA labels

Technologies Used

• HTML5: Semantic structure with accessibility features
• CSS3: Modern styling with Flexbox, animations, and custom properties
• Vanilla JavaScript: ES6+ class-based architecture with modular design
• Google Fonts: Instrument Sans typography for consistent styling

Project Structure

project-root/
├── index.html          # Main HTML structure
├── style.css           # Complete styling system
├── script.js           # Bundle management logic
├── Readme.md          # Project documentation
└── assets/            # Image assets
    ├── product-*.jpg   # Product images
    └── Icons/          # SVG icons
        ├── CaretRight.svg
        ├── Check.svg
        └── Plus.svg

Getting Started

1. Clone the repository:

   git clone https://github.com/VivekKumar2380/Bundle-Builder.git

2. Navigate to the project directory:

   cd Bundle-Builder

3. Open the project:

   • Open index.html in your web browser
   • No additional setup or build process required

How to Use

1. Browse Products: View the available products in the grid layout
2. Add to Bundle: Click the "+" button on any product to add it to your bundle
3. Remove from Bundle: Click the "✓" button on selected products to remove them
4. View Summary: Check the bundle summary sidebar for pricing details
5. Add to Cart: Click "Add X Items to Cart" to complete your bundle

Code Architecture

HTML Structure

• Semantic HTML5 elements for better accessibility
• Proper meta tags and viewport configuration
• Organized into main sections: header, product grid, and bundle sidebar

CSS Organization

• Modular CSS with clear section headers
• Custom properties for consistent theming
• Responsive design with mobile-first approach
• Smooth animations and transitions

JavaScript Features

• Class-based architecture for better maintainability
• Event delegation for efficient event handling
• Dynamic DOM manipulation with proper state management
• Error handling and performance optimizations

Browser Support

This project works in all modern browsers that support:

• ES6+ JavaScript features
• CSS Flexbox and Grid
• CSS Custom Properties
• Modern DOM APIs

Performance Features

• Optimized images and assets
• Efficient event handling
• Smooth animations with CSS transforms
• Minimal JavaScript footprint

Development

The codebase follows modern web development best practices:

• Clean, readable code structure
• Comprehensive documentation
• Separation of concerns
• Responsive and accessible design

---

This project was developed as part of a coding assessment to demonstrate modern web development skills and best practices.