How To Create Complete Food Delivery App Using React JS Step By Step Tutorial 2024

Build Complete Food Ordering Website / Web App using React JS | Full Stack React JS project for students 2024

❤️ Complete this quiz after watching this tutorial and get project completion certificate:

SUBSCRIBE: @GreatStackDev

❤️ Complete JavaScript Course with Certification:
- Beginner + Advance + ES6 + Notes
- 30 Project With Source Code
- React Beginner course with project
- Course Completion certificate
- Chat Support

-------------------

In this single tutorial you will learn to build a food ordering website / app step by step using React JS. In this React JS project we will create the Home page to display the menu and food items, then cart page and order page. Then we will make the Sign In / Sign Up popup.
In the next part we will make the back-end and admin panel of this food delivery website / web app. We will make the project full stack with the help of MongoDB, Express, React and Node JS.

#ReactJS #Ecommerce #FoodApp #GreatStack

Timestamp:

00:00 Project Overview
06:39 React Project Setup
11:53 Create navigation bar
30:55 Create Pages
33:47 Setup React Router
37:13 Create Website Header
46:17 Create Menu Items
01:02:42 Create Food List component
01:45:39 Create Footer
01:58:50 Create Add Download component
02:04:38 Make the website responsive
02:15:03 Create Sign in / Sign up Component
02:35:34 Create Cart Page
03:09:42 Create Place order page

-------------------------------------
Build more React JS projects:

Complete Portfolio Website In React:

Build ChatGPT Clone In React:

Build AI Image Generator with OpenAI In React

Create Weather App In React

-------------------------------------
Recommended HTML and CSS Projects:

Learn Complete HTML and CSS from basics:

Make A Complete Website for college using HTML & CSS:

How to make personal resume website step by step:

How to make an Ecommerce Website Design:

How to make travel website design with HTML CSS Bootstrap:

-------------------------------------
Connect with me:

Connect with GreatStack:

[thearshow]

This is so awesome project, i am gonna use it as my college final year project.. thank you for making all these awesome real projects when other youtubers are just talking about roadmap and some non sense topics which is just waste of time in most of the cases. Thanks again for this react js project, i really learnt a lot from your past projects, mainly from your mern ecommerce project. 😊

[serahnderi]

Really waiting for the backend tutorial for this app. I'm using the knowledge to build a similar ecommerce app.

[maderapier]

I love the simplicity it s clear you have the skill to bring down advanced concepts

[saritakumari]

Sir! Please make one website with redux toolkit, integrates an open source API through middleware

[mangeshdhok-xjbo]

Honestly this is the best way to clear the doubts and gain the knowledge. Great job. post backend also.

[AhmadBhatti-ofdc]

I've not seen this video completely yet but after Demo I'm sure you're a very very talented developer
I am just waiting for Admin panel video and here You make my day!!!! Thanks a lot sir ....

[Vampire_robux]

next time if you build web please add a scroll to top button that will help user to scroll to top without scrolling up...

[oreokapoor]

Plz make one tutorial on reacts like your javascript plzz bro . In depth from basic to advanced plzzz

[theeagle]

amazing sir Thank you for your services.

[agatha]

wow wow so a great proiect. I can understand react very well now.Pls it will be great if you can add other payment methods to support you like paypal or google pay.

[bkimking]

What a great journey, its been an amaizing week jus learning and even creating. from a beginner in react in less than 1 weeks. can't wait for the rest of the video, to get the whole experience. Thanks.

[bhushansontakke]

Amazing Explanation Sir Thank you so much ❤❤ i am creating this front end project for my better understanding🧑‍💻

[bhushansontakke]

This Project-Based learning channel is going to be the number one channel on YouTube in some days. I have never seen these types of projects and such easy explanations. Thanks a lot from my bottom of the heart Sir...♥♥♥

[ahmadanjum]

Thank u GreatStack man very help full this tutorial 😍😍

[suystha]

Thank you so much... Waiting for next video...

[Codewitheyezyc]

Wow ❤ you just helped me understand how to achieve my project.. thank you

[djfago]

GreatStack is a genius. Thank you for always sharing your knowledge with us for free sir.

[amanmujawar]

Absolutely awesome tutorial ❤ waiting for the next backend tutorial.

[waad]

amaizing tutorial can you please provide us a video about the back-end for this project

[monalisabindhani]

This a awesome project . when will the second part come