🛍️ E-Commerce Store

---

🎯 Project Overview

This project is a modern, responsive, and feature-rich front-end application simulating a complete e-commerce experience. It is designed to demonstrate proficiency in React functional components, advanced state management using Redux Toolkit, dynamic routing, and professional UI development with React-Bootstrap.

The platform fetches all product data dynamically from the DummyJSON API.

✨ Key Features Implemented

• Global State Management (Redux): Centralized state for the shopping cart, managing the addition, quantity increment/decrement, and removal of items. The application is wrapped with the Redux Provider.
• Complete Shopping Cart Flow: Users can manage quantities directly in the cart, view the subtotal, and proceed to a mock checkout.
• Dynamic Routing: Seamless navigation between Home, Products, Categories (/category/:categoryName), individual Product details (/product/:id), Search results, Cart, and Auth pages.
• Search Functionality: Implemented advanced search logic that reads the q parameter from the URL to fetch specific results using the DummyJSON search endpoint.
• Authentication UI: Dedicated, responsive Sign In and Sign Up pages. Utilizes the powerful react-hook-form library for efficient form validation.
• Advanced Product Details (MoreData.jsx): Features dynamic fetching of product details, quantity control, price calculations (discounted price vs. original price), stock alerts, rating display (stars), and a carousel for related products.
• Responsive Carousels: Uses Swiper for the category slider on the home page and React Slick for related products in the product detail view.
• Professional UI/UX: Built on React-Bootstrap components, featuring a sticky Navbar with an Offcanvas mobile menu, displaying the real-time cart count (Redux selector).

---

🔗 Live Demo

Access the hosted version of the project:

---

🛠️ Technologies & Dependencies

Category	Technology	Key Usage in Project	Badge
Core Frontend	React (Vite)	Main application structure and component lifecycle.
State Management	Redux Toolkit	Centralized management of the global shopping cart state.
UI Framework	React-Bootstrap	Responsive components, layout (Container, Row, Col), and navigation utilities.
Routing	react-router-dom	Defining routes and navigation between views.
Form Handling	react-hook-form	Efficient and performant validation for the Sign In/Sign Up forms.
UI Utilities	Swiper / React Slick	Used for responsive product and category carousels.
APIs/Data	DummyJSON	Provides mock data for all products, categories, and search results.
Notifications	react-hot-toast	Displays sleek, non-blocking notifications for cart actions.

---

🚀 Getting Started

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation and Run

1. Clone the Repository:

   git clone [Your Repository URL]
   cd [your-project-name]

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Run the Development Server (using Vite):

   npm run dev
   # or
   yarn dev

   The application will typically be available at http://localhost:5173/.

---

📂 Key Code Structure

The project maintains a clear and modular structure for easy maintenance and scalability:

File/Component	Purpose & Feature Highlight
App.jsx	Defines the main application layout (Navbar, Routes, Footer) and integrates react-router-dom.
main.jsx	Entry point, setting up React StrictMode and wrapping the app with Redux Provider.
Navbar.jsx	Responsive navigation with Redux selector for real-time cart count and an effective search handler.
Home.jsx	Landing page structure, dynamic category fetching, and Swiper integration.
MoreData.jsx	Product Detail Page. Handles unique product fetching, related product slider, quantity management, and Redux dispatching.
ShoppingCart.jsx	Cart view, displaying items, calculated total, and using Redux actions (incrementQuantity, decrementQuantity, removeFromCart).
SignIn.jsx / SignUp.jsx	Separate, fully responsive authentication pages using react-hook-form for client-side validation.
SearchPage.jsx / CategoryPage.jsx	Dedicated pages for displaying data filtered by URL parameters (search query q or category name).
footer.jsx	Standard footer structure using Container, Row, and Col from React-Bootstrap.

---

👨‍💻 Developed By

I'm Ahmed Hashim

---

🤝 Connect with Me