🛍️ Redbubble Clone - E-commerce Platform

Redbubble Clone is a frontend e-commerce platform inspired by Redbubble, built from scratch to showcase modern web development skills. This project demonstrates the implementation of a responsive, user-friendly marketplace for artists to sell their unique designs on various products.

🚀 Features

🛒 Core Features

• Responsive Design: Fully responsive layout that works on all devices
• Product Showcase: Beautifully displayed products with hover effects
• Shopping Cart: Interactive cart functionality
• Product Filtering: Easy navigation through different product categories
• Artist Profiles: Dedicated pages for featured artists
• Wishlist: Save favorite items for later

🎨 Design Elements

• Modern, clean UI with smooth animations
• Responsive navigation with search functionality
• Interactive product cards with hover effects
• Mobile-friendly design with touch support
• Custom SVG icons and illustrations

🛠️ Tech Stack

Frontend

• HTML5: Semantic markup for better accessibility
• CSS3: Custom styles with modern layout techniques (Flexbox, Grid)
• JavaScript: Vanilla JS for dynamic interactions
• Swiper.js: For featured product sliders
• Font Awesome: For icons

Development Tools

• Git: Version control
• VS Code: Code editor
• Chrome DevTools: For debugging and testing

📂 Project Structure

redbubble/
├── assets/
│   ├── images/          # All image assets
│   │   ├── artists/     # Artist profile images
│   │   ├── designs/     # Product design images
│   │   └── icons/       # SVG and icon files
│   └── fonts/           # Custom font files
├── css/
│   ├── reset.css        # CSS reset
│   ├── fonts.css        # Font face declarations
│   ├── variables.css    # CSS custom properties
│   ├── styles.css       # Main styles
│   └── components/      # Component-specific styles
├── js/
│   ├── main.js          # Main JavaScript file
│   ├── cart.js          # Shopping cart functionality
│   ├── products.js      # Product data and rendering
│   └── utils/           # Utility functions
├── index.html           # Homepage
├── allproducts.html     # Products listing page
└── README.md            # Project documentation

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Code editor (VS Code recommended)
• Git (optional)

Local Development

1. Clone the repository

   git clone https://github.com/yourusername/redbubble-clone.git
   cd redbubble-clone

2. Open in Browser

   • Simply open index.html in your preferred web browser
   • Or use a local server (e.g., VS Code Live Server extension)

🛠️ Development Workflow

CSS Architecture

• Uses BEM (Block Element Modifier) methodology
• CSS Custom Properties for theming
• Mobile-first responsive design approach
• Reusable utility classes

JavaScript Structure

• Modular JavaScript files for better maintainability
• Event delegation for dynamic content
• LocalStorage for cart and wishlist persistence

📝 Project Status

✅ Completed

• Responsive homepage layout
• Product grid with hover effects
• Shopping cart functionality
• Mobile navigation
• Product filtering

🚧 In Progress

• User authentication
• Checkout process
• Search functionality
• Product reviews

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Redbubble
• Product images and designs are for demonstration purposes only
• Special thanks to all open-source projects that made this possible

---