https://github.com/shahramshakiba/food-order-app

Food Order Application | I explored various topics such as Components, State Management, Context API, Side Effects, Handling HTTP Requests, and More (🔵ReactJS)
https://github.com/shahramshakiba/food-order-app

food-ordering http-requests react-project

Last synced: 2 days ago
JSON representation

Food Order Application | I explored various topics such as Components, State Management, Context API, Side Effects, Handling HTTP Requests, and More (🔵ReactJS)

• Host: GitHub
• URL: https://github.com/shahramshakiba/food-order-app
• Owner: ShahramShakiba
• Created: 2024-03-21T18:10:30.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-25T18:12:50.000Z (8 months ago)
• Last Synced: 2024-03-26T08:44:30.563Z (8 months ago)
• Topics: food-ordering, http-requests, react-project
• Language: JavaScript
• Homepage: https://food-order-solo-app.netlify.app/
• Size: 3.71 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#     Food Order Web Application 

###   _Description_

#### For this project, my goal is to create a web application for _"Ordering Food"_ that demonstrates my proficiency in React.js. 


- I plan to explore various topics such as _` Components `_, _` State management `_, _` Context API `_, _` Side Effects `_, _` handling HTTP Requests `_, and More. 


> 🧩 Through this project, I aim to showcase my understanding of _these concepts_ and _how they can be applied_ in building Interactive and Dynamic Web Applications.




> 🗝️ Which Concepts in Have I Covered :

-    _Building & Configuring Components_

  - Adding _Header_, _Meals_ & _MealItem_ Components

  - _Formatting_ & _Outputting Numbers_ as Currency

  - Creating a Configurable & Flexible _Custom Button Component_

  - Creating a Cart Component

  - Adding a custom Input Component

  - Handling Form Submission via built-in _FormData_ Feature

  - Creating an Error Component 



-    _Using State & Context_

  - Managing _Add Items_ & _Remove Items_ with CartContext & Reducer

  - Managing _Opening_ & _Closing_ Modal with ModalContext & useState

  - Opening the Cart in the Modal via ModalContext

  - Managing _Modal visibility_ on both Cart & Checkout

  - Manage _Increasing_ & _Decreasing Items_ from the Cart via Context

  - Handling HTTP Loading & Error States 



-    _Managing HTTP Requests & Side Effects_

  - Fetching Meals Data (_GET HTTP Request_)

  - Adding a Reusable _Modal Component with useEffect_

  - Sending a _POST HTTP Request_ with Order Data

  - Adding a _Custom HTTP Hook_ to manage HTTP-Request

  - Avoiding Common Errors and Infinite-Loop using useEffect & useCallback in HTTP Hook




 ### _Give it a go in real-time and give me a Star_       _Food Order Application_  

 - #### ⛔ NOTE:

   - To run the application successfully, navigate to the backend directory in the terminal and execute the command ` (node app.js) `.

 



https://github.com/ShahramShakiba/Food-Order-App/assets/110089830/4acf9e04-f34e-459c-a5f2-4e969ae74943

  
 

 ##  Find me around the Web