This is a web application that I programmed as a tutorial from my React Udemy Course (Chapter-11). Basically the app allows you to buy 4 different meals from a restaurant, you pick the amount of that meal to the shopping cart 🛒, and in the app the shopping cart icon button will show how many meals you are intended to purchase, e.g in the app screenshot bellow we see two meals added to the cart.
First view of the web app
To see the Cart content you click the Cart icon button in the top right corner of the screen, once you do it, you can see all the items you purchased on your order, see the image bellow showing all the items added to the cart, once you see the list you can remove or add more meals one by one.
View of the shopping cart content
This was a very funny activity, I applied a lot of react concepts such as...
useState(),useReducer()hooks.useEffect()hook.- Context API with
useContext()hook. - Conditional and List rendering.
- CSS modules styles.
- React portals.
- Forward refs.
- Image importing, etc, etc...
Once you clone this repo just type the following commands on your terminal:
$ npm install
$ npm start
go to http://localhost:3000/ and try the web app :).
Thanks to (Maximilian Schwarzmüller) and his great React course on Udemy from where I extracted this content Complete React Course. I am learning a lot 👍.