🌸 Floriva - Beautiful Flower Shop Website

A modern, responsive flower shop website built with pure frontend technologies

Live Demo • Report Bug • Request Feature

🚀 About The Project

Floriva is a beautifully crafted flower shop website that showcases an exquisite collection of floral arrangements, bouquets, and gift sets. Built as a portfolio project, it demonstrates modern frontend development skills with a focus on user experience and e-commerce functionality.

🎯 Key Features

• 🛍️ Product Catalog - Filter bouquets, arrangements, and gift sets
• ❤️ Wishlist System - Save favorite products for later
• 🛒 Shopping Cart - Add items with quantity management
• 📱 Responsive Design - Perfect on all devices
• 📝 Contact Form - Integrated order system with validation
• 💾 Local Storage - Persistent cart and wishlist data

🛠️ Built With

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Framework: Bootstrap 5.3.8
• Icons: Bootstrap Icons
• Storage: Browser LocalStorage
• Design: Custom CSS with CSS Variables

🔍 Code Quality

This project has been analyzed with SonarQube to ensure production-ready code:

• ✅ Quality Gate: PASSED - Meets industry standards
• ✅ Security Rating: A - No critical vulnerabilities
• ✅ Secure Validation - Fixed ReDoS regex vulnerabilities
• ✅ Mobile Optimized - Touch-friendly buttons

📦 Installation

1. Clone the repository

   git clone https://github.com/ZahirawDW/floriva.git
   cd floriva

2. Open in browser

   # No build process required - open index.html directly
   open index.html

   Or use a local server:

   python -m http.server 8000
   # Visit http://localhost:8000

🎨 Project Structure

floriva/
├── index.html          # Main HTML file
├── style.css           # Custom styles
├── script.js           # All JavaScript functionality
├── images/             # Product images and assets
│   ├── logo.png
│   ├── home.png
│   ├── aboutimg1-8.jpg
│   ├── bouquet1-8.jpg
│   ├── arrangement1-8.jpg
│   └── giftset1-8.jpg
└── README.md           # Project documentation

💡 Features Overview

Product Management

• Dynamic product filtering by category
• Real-time cart calculations
• Wishlist with duplicate prevention
• Product cards with hover effects

Shopping Experience

• Add to cart/wishlist functionality
• Quantity controls with +/- buttons
• Persistent storage across sessions
• Order summary with total pricing

User Interface

• Smooth animations and transitions
• Mobile-first responsive design
• Bootstrap modals for cart/wishlist
• Form validation with error handling

🚀 Usage

1. Browse Products: Use category filters to explore floral arrangements
2. Add to Cart: Click "Add to Cart" on any product
3. Manage Quantities: Use +/- buttons in cart modal
4. Save Favorites: Add items to wishlist for later
5. Place Order: Fill out contact form with delivery details

🌟 Technical Highlights

• Pure JavaScript - No external dependencies beyond Bootstrap
• CSS Custom Properties - Consistent theming with variables
• Event Delegation - Efficient DOM event handling
• Local Storage API - Data persistence without backend
• Responsive Grid - Bootstrap layout system
• Form Validation - Client-side validation with regex
• Accessibility - ARIA labels for screen readers
• SonarQube Tested - Code quality and security validated

🆕 Recent Improvements

• External Data Management - Migrated product catalog from hardcoded array to external JSON file
• Async Data Loading - Implemented modern fetch API for dynamic content loading
• Smart Product Shuffling - Random mix in "All" view for better browsing experience
• Optimized Initial Load - Faster page rendering with asynchronous data fetching

🎯 Browser Support

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Brave
• ✅ Opera
• ✅ Edge

📱 Responsive Design

• Mobile: Optimized for 320px+ screens
• Tablet: Adaptive layout for 768px+ screens
• Desktop: Full experience for 1024px+ screens

🔧 Customization

Colors

Modify CSS variables in :root:

:root {
    --bs-body-color: #5d0c23;     /* Primary dark pink */
    --light-pink: #d41f68;        /* Accent pink */
}

Add new products to data.json:

{
  "products": [
    {
      "id": 25,
      "category": "bouquets",
      "name": "New Bouquet",
      "image": "images/new-bouquet.jpg",
      "description": "Beautiful new arrangement",
      "price": "$55.00"
    }
  ]
}

🚀 Future Enhancements

• Payment gateway integration
• User authentication system
• Product search functionality
• Image zoom capabilities
• Newsletter subscription
• Admin dashboard
• Server-side API integration
• Database backend for dynamic content
• Load more / infinite scroll feature

👨‍💻 Developer

EL-MAHJOUR Zahira

• Email: [zahirael-mahjour] (zahiraelmahjour06@gmail.com)
• GitHub: @ZahirawDW
• LinkedIn: Zahira El-Mahjour

📄 License

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

🙏 Acknowledgments

• Bootstrap team for the excellent framework
• Bootstrap Icons for beautiful icons
• LocalStorage API for data persistence
• Modern CSS features for animations

---

⭐ If you like this project, give it a star on GitHub!

Built with ❤️ for floral enthusiasts and modern web development

---

📞 Contact

For questions about this project or potential collaborations:

• Email:zahiraelmahjour06@gmail.com
• LinkedIn: https://www.linkedin.com/in/zahira-el-mahjour
• GitHub: https://github.com/ZahirawDW

---

Note: This is a frontend demonstration project. For a production environment, consider adding backend integration, payment processing, and user authentication.

---

Happy Coding! 🌸

---

Last updated: March 2026