🛒 React E-Commerce App

A modern, scalable E-Commerce web application built with React and Vite. This project demonstrates real-world frontend architecture including product listing, cart management, routing, and API integration.

---

🔗 Live Repository

👉 https://github.com/singh-abhinay/react-ecommerce

---

📌 Features

• 🛍️ Browse products with dynamic listing
• 🔍 Search and filter products
• 📄 Product detail page
• 🛒 Add to cart / remove from cart
• 🔢 Update product quantity
• 💰 Price calculation (subtotal, total)
• 🔔 Toast notifications for actions
• 📱 Fully responsive UI

---

🧠 Key Highlights

• Clean and scalable folder structure
• Reusable components
• State management (Context API / Redux if used)
• API integration using Axios
• Optimized rendering with React hooks

---

🛠️ Tech Stack

• Frontend: React 19, Vite
• Routing: React Router
• HTTP Client: Axios
• UI: Bootstrap, React Icons
• Notifications: React Toastify
• Loader: React Spinners

---

📂 Project Structure

src/
│── components/        # Reusable UI components
│── pages/             # Page-level components
│── context/           # Global state (Cart / Auth)
│── services/          # API calls
│── assets/            # Images & static files
│── App.jsx
│── main.jsx

---

⚙️ Installation & Setup

1. Clone the repository

git clone https://github.com/singh-abhinay/react-ecommerce.git
cd react-ecommerce

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Build for production

npm run build

5. Preview production build

npm run preview

---

🛒 Core Functionalities

🧾 Product Listing

• Fetch products from API
• Display in grid layout
• Responsive design

---

📄 Product Details

• View detailed product info
• Price, description, image

---

🛍️ Cart Management

• Add items to cart
• Remove items
• Update quantity
• Calculate total price

---

🔍 Search & Filter

• Search products by name
• Dynamic filtering

---

🔄 API Integration

• Uses Axios for API requests
• Handles loading and error states
• Structured service layer for scalability

---

⚡ Performance Optimizations

• Memoization using useMemo / useCallback
• Efficient state updates
• Component reusability

---

🚀 Future Improvements

• 🔐 Authentication (Login / Signup)
• 💳 Payment integration (Stripe/Razorpay)
• 📦 Order management system
• ❤️ Wishlist feature
• 🌍 Multi-language support
• ⚡ Server-side rendering (Next.js)

---

🧪 Testing (Planned)

• Unit testing with Jest
• Component testing with React Testing Library

---

📸 Screenshots

---

👨‍💻 Author

Abhinay Pratap Singh

• GitHub: https://github.com/singh-abhinay
• LinkedIn: https://www.linkedin.com/in/singh-pratap-abhinay/

---

💡 Notes

This project showcases:

• Real-world React development practices
• Scalable component architecture
• State management patterns
• Clean UI/UX implementation

---

⭐ If you like this project, don’t forget to star the repository!