https://github.com/parmodkumar28/e-commerce-react-app
This is a basic e-commerce website using React
https://github.com/parmodkumar28/e-commerce-react-app
css e-commerce ecommerce firebase firestore html javascript react react-loader-spinner recat-router redux-toolkit toastify
Last synced: 2 months ago
JSON representation
This is a basic e-commerce website using React
- Host: GitHub
- URL: https://github.com/parmodkumar28/e-commerce-react-app
- Owner: ParmodKumar28
- Created: 2024-01-25T10:15:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-07T11:22:10.000Z (over 1 year ago)
- Last Synced: 2024-04-14T07:22:10.444Z (about 1 year ago)
- Topics: css, e-commerce, ecommerce, firebase, firestore, html, javascript, react, react-loader-spinner, recat-router, redux-toolkit, toastify
- Language: JavaScript
- Homepage: https://shopify88.netlify.app/
- Size: 428 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React E-commerce App 🛍️
Welcome to my React E-commerce App project! This is a full-fledged online shopping experience with a dynamic product catalog, cart functionality, and more. 🚀
## Table of Contents 📚
- Introduction
- Features
- Technologies Used
- Project Setup
- Usage
- Video
- Contributing
## Introduction 🌟
This React E-commerce App is a showcase of a fully functional online store with a user-friendly interface. It allows users to browse products, add them to the cart, edit product details, and manage their shopping experience seamlessly.
## Features ✨
### Navbar:
- Display cart items count dynamically.
- Show relevant navigation links for easy navigation.
### All Products Page:
- Display a list of products from the API.
- Edit product details inline with a pencil button.
- Delete products with a confirmation alert.
- Implement sorting by price with a cross button to remove the sort.
- Add products to the cart with a user-friendly button.
### Create Page:
- Add new products to the database with a confirmation alert.
### Product Detail Page:
- Show comprehensive details of a selected product.
- Add the product to the cart with a button.
### Cart Page:
- Display all items in the cart.
- Remove item from cart
- Decrease quantity
- Increase quantity
- Handle errors and success alerts for a smooth user experience.
### Error Handling:
- Efficiently handle errors from the API and display appropriate alerts.
### Redux Integration:
- Utilize Redux Toolkit for state management, ensuring a seamless flow of data.
### Firebase
- Utilizing firebase firestore to add and remove cart items.
## Technologies Used 🛠️
- React
- Redux
- React Router
- JSON Server for creating a dummy ecommerce API
- Firebase Firestore
- React Loader
- React Toastify
## Project Setup 🚧
1. Clone the repository:
git clone https://github.com/ParmodKumar28/E-Commerce-React-App
2. Install dependencies:
cd E-COMMERCE REACT APP
npm install
3. Start the React app:
npm start
4. Open http://localhost:3000 in your browser.
## Usage 🚀
Explore the products, edit them, add to the cart, and enjoy a seamless shopping experience! 🛒
## Video 📸
https://github.com/ParmodKumar28/E-Commerce-React-App/assets/91540271/40c043b5-7d8e-4f41-88a4-dc20620da6ca
## Contributing 🤝
Contributions are welcome! Feel free to open issues or submit pull requests to improve the project:)