https://github.com/khadem-mh/shoppingcart

A beautiful shopping cart that uses useContext to connect all data together with React JS and Express.
https://github.com/khadem-mh/shoppingcart

cart exprees js product react shop shopping shoppingcart

Last synced: about 21 hours ago
JSON representation

A beautiful shopping cart that uses useContext to connect all data together with React JS and Express.

• Host: GitHub
• URL: https://github.com/khadem-mh/shoppingcart
• Owner: khadem-mh
• License: mit
• Created: 2024-04-28T18:39:46.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T06:15:10.000Z (5 months ago)
• Last Synced: 2024-06-17T07:33:32.336Z (5 months ago)
• Topics: cart, exprees, js, product, react, shop, shopping, shoppingcart
• Language: JavaScript
• Homepage:
• Size: 2.22 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 
Hi 👋 I'm an expert on React Js 👨‍💻 Next JS


## Description Project

- A beautiful shopping cart that uses useContext to connect all data together with React JS and Express.

  

- A great and good project to understand the concept of useContext

  

- Fully responsive in every dimension

  

- With the ability to add، remove، or remove، add up a number of purchases of one product and all products and order the product.

>### Languages

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=5BCAF7&random=false&width=100&height=25&lines=React+Js)

>>

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=F77F1A&random=false&width=55&height=25&lines=Html5)

>> 

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=5BCAF7&random=false&width=55&height=25&lines=Css3)

>> 

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=FAFF09&random=false&width=100&height=25&lines=JavaScript)

>### Packages

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=CB58F7FF&random=false&width=150&height=25&lines=Bootstrap)

>> 

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=skyblue&random=false&width=150&height=25&lines=React+Icons)

>> 

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=702CF6&random=false&width=150&height=25&lines=React+BootStrap)

>> 

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=F77F1A&random=false&width=150&height=25&lines=React+Router-Dom)

>### Development Environment

>> ![](https://readme-typing-svg.demolab.com?font=Fira+Code&size=16&duration=1500&pause=5000&color=FFD32B&random=false&width=150&height=25&lines=Vite)

## View of the project



## Getting Started

First of all, you need to have the Node.Js installed on your system before you see these links. 

>[node js](https://nodejs.org/en/download)

Before running the project, you need to have npm installed on your system, then you can set the following commands in the project path.

If you have node.js installed it will automatically install npm

We used mongoDB database in this project before running the project, if you do not have it installed on your system, refer to this link 

> [mongoDB](https://www.mongodb.com/try/download/compass)

After ensuring the installation of the mentioned items, enter the following commands in the direction of the project.

>### Step-1

>>

>>Open a new terminal on the main path of the project and then enter this command

>>

>```

> cd backend

>```

>>

>>Then install the corresponding packages with the following command

>>

>```

> backend > npm i

>```

>>

>>After installing the packages, enter the following command to run the project backend

>>

>```

> backend > npm start

>```

>>

>### Step-2

>>

>>Open a new terminal on the main path of the project and then enter this command

>>

>```

> cd frontend

>```

>>

>>Then install the corresponding packages with the following command

>>

>```

> frontend > npm i

>```

>>

>>After installing the packages, enter the following command to run the project backend

>>

>```

> frontend > npm run dev

>```

>>

>### Step-3

>>

>>Runs the app in the development mode.\

>>Open [http://localhost:5173](http://localhost:5173) to view it in your browser.

>>

>>The page will reload when you make changes.\

>>You may also see any lint errors in the console.

>>

___

>### Social Network

> [](https://github.com/khadem-mh)

> [](https://pinterest.com/khadem_mh)

> [](https://t.me/mhkhadem)

> [](https://wa.me/989031335939)

> [](https://wakatime.com/@khadem_mh)