🛒 React E-Commerce Products
A modern and responsive React E-Commerce web application built using React, Tailwind CSS, React Router, and FakeStore API. This project demonstrates real-world e-commerce functionality including product listing, product details, category filtering, and global search with a clean and professional UI.
🚀 Live Demo
📸 UI Preview
🏠 Home Page
🛍️ Products Page
📦 Product Details Page
📬 Product Categories
✨ Features
✅ Modern and responsive UI
✅ Product listing from FakeStore API
✅ Product detail page
✅ Global search functionality
✅ Category filtering
✅ React Router navigation
✅ Shared state using Outlet Context
✅ Professional Hero section
✅ Featured products section
✅ Category cards section
✅ Why Choose Us section
✅ Newsletter subscription section
✅ Clean and reusable components
✅ Mobile responsive design
🧰 Tech Stack
Frontend
React JS
Tailwind CSS
React Router DOM
Axios
API
FakeStore API
Build Tool
Vite
📂 Project Structure react-ecommerce-products/ │ ├── public/ │ ├── src/ │ ├── Component/ │ │ ├── Footer.jsx │ │ ├── Navbar.jsx │ │ │ ├── pages/ │ │ ├── Home.jsx │ │ ├── Products.jsx │ │ ├── ProductDetails.jsx │ │ │ ├── App.jsx │ ├── main.jsx │ ├── screenshots/ │ ├── home.png │ ├── products.png │ ├── product-detail.png │ ├── package.json ├── README.md ⚙️ Installation
- Clone the repository git clone https://github.com/mqkhan125/react-ecommerce-products.git
- Navigate to project folder cd react-ecommerce-products
- Install dependencies npm install
- Run the project npm run dev 🌐 API Used
FakeStore API
https://fakestoreapi.com/products 🎯 Learning Objectives
This project demonstrates:
React component architecture
API integration using Axios
State management
React Router navigation
Context sharing using Outlet
Modern UI design using Tailwind CSS
Professional project structure
📱 Responsive Design
Fully responsive and works on:
Mobile
Tablet
Desktop
👨💻 Author
Muhammad Qasim Khan
GitHub: https://github.com/mqkhan125