Skip to content

Latest commit

 

History

History
92 lines (76 loc) · 2.93 KB

README.md

File metadata and controls

92 lines (76 loc) · 2.93 KB

E-Commerce Web Application 📺

Discover a seamless shopping experience with our e-commerce app, featuring easy product management and real-time cart control.

Features 🔥

📺 Product Listing: Extensive catalog of products.
📺 Product Details: Get comprehensive details, including descriptions, images, and pricing.
📺 Add New Product: Contribute to the product inventory by adding new items.
📺 Edit Product Details: Modify existing product details, including titles, prices, descriptions, and ratings.
📺 Cart Management: Add products, adjust quantities, and remove items as needed. The cart provides a real-time overview of selected products.
📺 Sorting: Sort products by price for both ascending and descending order.

Tech Stack 💻

🎬 React
🎬 Tailwind-CSS
🎬 Redux Toolkit
🎬 React-Router-Dom

Key Takeaways 🖥️

🎥 State Management: Utilizing Redux Toolkit to manage the global state and store for efficient data sharing across components.
🎥 React Routing: Implementing React Router for navigation and maintaining multiple views within the application.
🎥 Component Structure: Organizing components into modular and reusable structures to enhance readability and maintainability.
🎥 API Integration: Using Axios to interact with backend APIs for fetching, updating, and adding data.

Folder Structure 📁

e-commerce/
├── public/
│   └── ... (public assets)
├── src/
│   ├── assets/
│   │   └── ... (images)
│   ├── components/
│   │   ├── Navbar.js
│   │   ├── products/
│   │   │   ├── ProductsList.js
│   │   │   ├── ProductDetails.js
│   │   │   └──  AddProduct.js
│   │   ├──  cart/
│   │   |   ├── Cart.js
│   │   |   ├── CartItems.js
│   │   |   ├── scrollbar.css
│   │   |   └── EmptyCart.js
│   │   └──  error/
│   │       └── ErrorPage.js
│   ├── redux/
│   │   ├── ecommerceSlice.js
│   │   └── store.js
│   ├── App.js
│   ├── index.js
│   └── index.css
├── package.json
├── tailwind.config.js
└── README.md

Installation 📓

  1. Node.js (npm will be installed with Node.js)
  2. Clone the repository:
git clone https://github.com/Kumardinesh1908/e-commerce.git
  1. Navigate to the project directory:
cd e-commerce
  1. Install dependencies:
npm install
  1. Start the development server:
npm run start
  1. Access the app in your browser at http://localhost:3000.

Live Demo

 https://e-commerce-kumardinesh1908.vercel.app/