I built an app that allows users to add items from the menu to a shopping cart, the cart displays the quantity and total cost of all items. This project implements the basic concepts of React:
-
Using React hook useState and useContext
-
Reusing components
-
Using CSS modules
-
Used Portals to render modal outside the DOM
-
Assets
folder includes useful info such as Component Tree.
FrontEnd: React/JS/CSS
https://react-food-app1.netlify.app/
- A talk-through of my solution
Food.order.app.talk-through.mov
- This did not show image:
<img src="../../Images/shopping-cart.png" width={'50px'} height={'50px'} alt='cart-icon'></img>
This works:import shoppingCartImage from '../../Images/shopping-cart.png';
<img src={shoppingCartImage} width={'50px'} height={'50px'} alt='cart-icon'></img>
Need to add height and width to div in order to see image.
- Modal component could have components inside as its got a lot of code making it hard to read.
- The order button could have some functionality implemented
Clone the project
git clone https://github.com/faseehahmed1/Food-order-app.git
Install dependencies
npm install
Start the server
npm start