Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamal-saadeddin/shopster
Shopster is a modern shopping cart interface built with React, Material-UI, and React Router. Developed during my internship at Foothill Technology Solutions, this project demonstrates effective state management using React Contexts, Reducers, and Providers. Browse products, manage your cart, and proceed to checkout with ease.
https://github.com/jamal-saadeddin/shopster
material-ui react react-context react-provider react-reducer react-router
Last synced: about 11 hours ago
JSON representation
Shopster is a modern shopping cart interface built with React, Material-UI, and React Router. Developed during my internship at Foothill Technology Solutions, this project demonstrates effective state management using React Contexts, Reducers, and Providers. Browse products, manage your cart, and proceed to checkout with ease.
- Host: GitHub
- URL: https://github.com/jamal-saadeddin/shopster
- Owner: Jamal-SaadEddin
- Created: 2024-06-20T09:05:42.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-07-08T07:09:59.000Z (4 months ago)
- Last Synced: 2024-07-08T13:11:10.394Z (4 months ago)
- Topics: material-ui, react, react-context, react-provider, react-reducer, react-router
- Language: JavaScript
- Homepage: https://jamal-saadeddin.github.io/Shopster/
- Size: 4.47 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
Shopster
## Overview
Shopster is a shopping cart interface developed as a part of my front-end internship at Foothill Technology Solutions. The application allows users to browse a variety of products, add them to a shopping cart, view cart details, remove items, and proceed to checkout. This project showcases my ability to manage state using React Contexts, Reducers, and Providers.
## Features
- **Product Grid:** Displays products in a grid format with name, image, and price.
- **Add to Cart:** Allows users to add products to the shopping cart.
- **Cart Details:** Lists all items added to the cart.
- **Item Removal:** Provides an option to delete individual items from the cart.
- **Total Amount:** Displays the cumulative price of the items in the cart.
- **Checkout:** Includes a form for users to input their name and email for order submission.
- **Search Feature:** Enables users to search for products by name.
## Demo
[Live Demo](https://jamal-saadeddin.github.io/Shopster/)
## How to Clone and Run Locally
1. **Clone the Repository**
```sh
git clone https://github.com/Jamal-SaadEddin/Shopster.git
```
2. **Navigate to the Project Directory**
```sh
cd Shopster
```
3. **Install Dependencies**
```sh
npm install
```
4. **Start the Application**
```sh
npm start
```
The application will run on `http://localhost:3000`
## Technologies Used
- **React**: JavaScript library for building user interfaces
- **Material-UI (MUI)**: React components for faster and easier web development
- **React Router**: Library for routing in React applications
## Developer
- [@Jamal-SaadEddin](https://github.com/Jamal-SaadEddin)
## Acknowledgements
- This task is part of the Foothill Technology Solutions Internship Cycle.
- Big thanks to my trainer [@Huthaifa](https://github.com/Huthaifa-Dev)
---
Thank you for visiting my project! Feel free to star or contribute to the repository if you find it useful.