🛍️ ShopCo — Online Clothing Store

ShopCo is a modern and responsive React + Vite e-commerce project for clothing.
It demonstrates a fully functional frontend store experience — including product catalog, filters, sorting, search, cart management, and product detail pages — all powered by mock data and state management via Redux Toolkit and RTK Query.

---

🚀 Tech Stack

Core technologies:

• ⚛️ React 19 — UI library for building modern web applications
• ⚡ Vite 7 — fast development and build tool
• 🧠 Redux Toolkit — global state management
• 🌐 RTK Query — data fetching and API emulation (mocked API)
• 💾 Redux Persist — cart state persistence via localStorage
• 🔍 React Router DOM — routing between pages
• 💅 Sass (SCSS Modules) — component-based styling and responsive design
• 🔔 React Hot Toast — lightweight notifications for user actions

Development tools:

• ✨ Prettier — consistent code style and formatting
• ♻️ React Refresh — fast refresh in development

---

🧩 Features

🏠 Home Page

• Category sections like New Arrivals, Top Selling, etc.

• Highlights featured products with clean and modern layout

  

🛍️ Product Catalog

• Displays full list of mock products
• Filters by category, gender, or price range
• Sorting (e.g., by price or rating)
• Search bar for finding products by name (with real-time match filtering)

📄 Product Details

• Individual product page with detailed info (name, price, discount, description, rating, etc.)

🛒 Shopping Cart

• Add / remove products
• Update item quantity
• Persistent state using localStorage
• Managed with Redux Toolkit

⚙️ Data Handling

• No backend — all data is mocked
• RTK Query simulates API requests for products

📱 Responsive Design

• Fully adaptive layout optimized for desktop, tablet, and mobile screens

---

📁 Project Structure (simplified)

src/
├── 🧩 components/ # Reusable UI blocks │ # (Header, Footer, Filters, ProductCard, etc.)
│
├── 📄 pages/ # Main pages │ # (Home, Catalog, Details, Cart, NotFound)
│
├── 🔄 redux/ # Store, slices, and RTK Query APIs
│
├── 🪝 hooks/ # Custom React hooks
│
├── 🛣️ routes/ # App routes config
│
├── 🎨 styles/ # Global SCSS, variables, mixins
│
├── 🔘 UI/ # Small reusable UI components │ # (Button, Loader, Pagination)
│
├── 🛠️ utils/ # Helper functions │ # (filtering, sorting, etc.)
│
├── App.jsx
├── main.jsx
└── main.scss

🚀 Live Demo

Check out the live version here: https://shop-co-black.vercel.app/