Masoom

A modern, visually rich e-commerce web application inspired by the elegance of South Asian fashion and the confidence of global trends. Masoom blends purity, grace, and strength into every thread, offering a seamless shopping experience with a focus on inclusivity, empowerment, and authenticity.

---

🌟 Project Overview

Masoom is a React-based e-commerce platform designed to showcase and sell fashion products with a premium, user-friendly interface. The project is inspired by the vision of Masoom Minawala, a global influencer and entrepreneur, and aims to celebrate individuality, diversity, and modern style while honoring traditional roots.

• Live Demo: [Add your deployment link here]
• Author: Masoom Minawala

---

✨ Features

• Home Page:

  • Hero banner with animated text and call-to-action buttons
  • "Life is a Fashion" inspirational section
  • Flash Sale, Best Sellers, and Today For You product carousels
  • Category-based product browsing
  • Social media integration and newsletter subscription

• Product Catalog:

  • Browse, search, and filter products by category, price, rating, and delivery options
  • Sort by popularity, newest, price, and rating
  • Pagination for large product lists

• Product Details:

  • High-quality images with magnifier
  • Selectable color and size options
  • Add to cart and add to favourites
  • Customer reviews and ratings

• Cart & Favourites:

  • Persistent cart and favourites using localStorage
  • Quantity management, remove items, and view total price
  • Checkout placeholder (future integration)

• User Authentication:

  • Simple login/register (localStorage-based, no backend)

• About & Brand Story:

  • About page with brand philosophy, founder story, testimonials, and newsletter
  • "Meet Masoom" and "Masoom's Success" pages highlighting achievements and press

• UI/UX:

  • Responsive, mobile-friendly design
  • Smooth animations (Framer Motion, GSAP)
  • Modern, clean, and accessible interface

---

🛠️ Tech Stack

• Frontend:

  • React 19
  • React Router DOM 7
  • Framer Motion (animations)
  • GSAP (animations)
  • Tailwind CSS 4 (utility-first styling)
  • clsx, tailwind-merge (class management)
  • Lenis, OGL (visual/scroll effects)
  • React Toastify (notifications)

• State & Data:

  • React Context API for product data
  • All product data is stored locally (no backend/API)
  • Cart and favourites persisted in browser localStorage

• Tooling:

  • Vite (build tool)
  • ESLint (linting)

---

📁 Folder Structure

masoom/
├── public/                # Static assets (images, favicon)
├── src/
│   ├── assets/            # Static assets for React
│   ├── components/        # Reusable UI components
│   │   ├── home/          # Home page sections (Hero, Categories, etc.)
│   │   ├── login/         # Login/Register UI
│   │   ├── masoomSuccess/ # Success/press/testimonials
│   │   ├── meetMasoom/    # Meet Masoom sections
│   │   ├── productDetails/# Product details page
│   │   ├── products/      # Product cards
│   │   ├── react-bits/    # Micro-interactions, effects
│   │   └── Sidebar.jsx, Nav.jsx, Footer.jsx, Cart.jsx, Favourites.jsx
│   ├── context/           # React Context for products
│   ├── pages/             # Route pages (Home, Products, About, etc.)
│   ├── routes/            # Route configuration
│   ├── sections/          # Home and other page sections
│   ├── styles/            # CSS (Tailwind, custom, per-section)
│   ├── utils/             # Utility functions
│   ├── App.jsx            # Main app component
│   ├── main.jsx           # Entry point
│   └── index.css          # Global styles
├── package.json           # Project metadata and scripts
├── vite.config.js         # Vite configuration
├── eslint.config.js       # ESLint configuration
└── README.md              # Project documentation

---

🚀 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm (v9+ recommended)

Installation

# Clone the repository
git clone https://github.com/asadaliofficials/masoom.git
cd masoom

# Install dependencies
npm install

Development

# Start the development server
npm run dev

• Open http://localhost:5173 in your browser.

Build for Production

npm run build

• Output will be in the dist/ folder.

Preview Production Build

npm run preview

---

🧩 Customization & Extending

• Product Data:
  • All product data is in src/context/store.js. You can add, edit, or remove products here.
• Styling:
  • Uses Tailwind CSS. Custom styles are in src/styles/.
• Backend/API:
  • This project is frontend-only. For real e-commerce, integrate with a backend and payment gateway.
• Authentication:
  • Current login/register is for demo only (localStorage). Replace with real auth for production.

---

📣 Credits & Inspiration

• Inspired by the vision and story of Masoom Minawala
• Product images and data are for demo purposes only
• Built with ❤️ using React, Vite, and Tailwind CSS

---

📄 License

This project is for educational and portfolio use. For commercial use, please contact the author.

---

🙏 Acknowledgements

• React
• Vite
• Tailwind CSS
• Framer Motion
• GSAP
• React Toastify

---

"At Masoom, fashion is more than just fabric — it's a feeling."