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
👉 Source Code (Frontend + Backend): greatstack.dev/go/tomato
SUBSCRIBE: @GreatStackDev
❤️ Complete JavaScript Course with Certification:
👉 greatstack.dev/go/javascript-...
- 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.
Download the assets: drive.google.com/file/d/1b9a2...
👉 React Introduction Tutorial: • What Is React (React J...
#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:
👉 • How To Make Portfolio ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Gene...
Create Weather App In React
👉 • How To Create Weather ...
-------------------------------------
Recommended HTML and CSS Projects:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

[@GreatStackDev]

Backend and admin panel: ruclips.net/video/DBMPXJJfQEA/видео.html

[@maderapier2018]

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

[@serahnderi]

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

[@AnaZivkovic1997]

Thank you! I have learn a lot from you. Keep going, you have one plus subscriber

[@eyezyc1723]

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

[@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.

[@oreokapoor577]

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

[@user-ee6gk9eh7j]

Yes bro please do this.....

[@GoldEnrolled1]

Yea also once your done don't watch tutorials, you got the basics so build something simple and then watch tutorials as you go like if u need a loading screen for your random joke generator website make one

[@Learn-with-Sumon-]

Yes

[@djfago6240]

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

[@bhushansontakke3614]

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

[@saritakumari9036]

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

[@amanmujawar9176]

Absolutely awesome tutorial ❤ waiting for the next backend tutorial.

[@suystha7]

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

[@kartikikhare670]

Thank for ur guidance. Such a great project with live demonstration. Please post the next part.

[@AhmadBhatti-of7dc]

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 ....

[@user-tc5do1ps9p]

I'm super excited to get started on this. Thank you so much for all of your hard work.

[@thearshow4423]

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. 😊

[@GreatStackDev]

I am glad, it is helping you in your college project.

[@miralvaghasiya3271]

Hello plz give me your project

[@prayanshu5208]

@@GreatStackDev Please upload backend part too.

[@NehaSharma-rl4qy]

​@@GreatStackDevplease upload backend part too as fast as possible. Please 🥺

[@patel_05_roma]

@@GreatStackDev i need help i cnat bale to render file in home.jsx file doing same thing but not rendering

[@detce415sudebpaul4]

This is an interesting project..I have learnt lots of things about react from this project..

[@hey-ir1be]

Super Thank you sir!❤❤

[@fazleali2443]

This was a very informative video and was meant to teach Thank you for helping us please upload backend video as soon as possible

[@mangeshdhok-xj4bo]

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

[@divyanshuarya1022]

can you help
how i can re run my app once i closed window. i tired wverything (npm start , npm run , npm run start , npm run dev, npm run serve

[@nadiafahmi7013]

Sir, .. , your great job changed my life so pls .. I'm Waiting for your back-end video

[@KavyaP-yz7vq]

Waiting for the backend video.Your videos are amazing💕💕

[@inderpal_singh_]

Great Project sir 👏🔥

[@abhinavgupta1219]

Thanks for this awesome react js project. ❤ i will make it this weekend

[@vanshikaraut9064]

did it work

[@dadciraouf134]

Hey, thanks a lot for breaking down such complex topics, can you teach us how to add or build a dashboard to handle the orders please ♥

[@tushar.musicx]

wonderful project sir, eagerly waiting for part 2 backend

[@waad1503]

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

[@1zhann184]

amazing work, i hope you publish the backend guide soon!

[@agatha51453]

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.

[@leoodion1154]

Great and interesting project. Learnt so much from it?... When is the part two coming out can't wait to finish the back end of the project. Great job GreatStack🙇

[@sagarghosh1689]

SIr, the video is nice. Please make part-2 as soon as possible.

[@Jaikushal]

Awsome Work dude!! Can i Know when will i find the next part please???

[@ashutosh61290]

are sir ye toh ecomeerce wale components bhi hai.. jaise ki sign up page. admin panel. great stuff

[@gurughantal59]

One of the best tutorial to learn reactjs

[@harshilpatel4769]

It is completely amazing tutorial, however if you add checkout payment gateway integration and deploy then that would be excelllent for everyone.

[@gamerzchoices]

You are very good developer and instructor. I love building this ordering application. ❤

[@GreatStackDev]

Glad you like it! Just let me know once you complete this food ordering app.

[@patel_05_roma]

@@GreatStackDev i need help

[@mircrypti5417]

Oh man, that was cool. I'm waiting for the continuation)

[@prakharagrawal8120]

can u pls share ur code

[@AnkitSingh-sy6sb]

it is great video to learn. I am waiting.... for 2nd part.

[@vaishnavijadhav3005]

Waiting for backend plz upload assp..ur video are too good❤

[@NIYONKURUSamuel-eu3tg]

Thank you a lot sir ,but bring us part 2 it will be good

[@saimanikantaandey3302]

please also include the deployment bro !

[@yaiphare3638]

I love it bro 🔥

[@user-fb5sr5nx6u]

Thank you bosss❤

[@ScamShieldTech]

Whoa! 🚀 This tutorial is an absolute game-changer! 🌟 As someone diving into React JS, this step-by-step guide to building a complete food delivery app is like striking gold. The clarity and depth of explanation make even the most complex concepts feel totally manageable. And the best part? It's not just another run-of-the-mill tutorial - it's a journey of innovation and creativity, showing us how to craft a cutting-edge app that stands out in today's crowded market. Hats off to the instructor for delivering such valuable content! 🎩💻 Can't wait to see what other groundbreaking tutorials you have in store for us!

[@SATOTE_GAMING]

Waiting for 2nd part of this video. Please upload fast

[@monalisabindhani9401]

This a awesome project . when will the second part come

[@TheCodingCollege8462]

thank you so much brother your videos are awesome it helps me allot

[@ramendrasoni3368]

Kya bat hai... Ab Mai sochta hu ki react seekh lu... Verna abhi Tak koi mujhe ready nahi kar paya ki Mai react seekh lu... Lekin Mai abhi bhi darta hu is bat se ki react keval simple things ko complex kar deti hai...

[@kebihabesha7187]

NICE PROJECT PLEASE THE BACK END OLSO

[@ymedjalil]

Good job it simple and usefully

[@goodnessuche1430]

pls when are you dropping the back-end segment
It's kinda good and bad that your channel is blowing up and getting to 1M subs
I found you when you were still a hidden gem on RUclips and you've been massive in my developement
Congrats on 1M in advance

[@omghoghari18]

Awesome Project waiting for second part

[@kwabijoe9906]

Thank you so much but for the react project initialization, you type npm create and the other word is not clear so can you please give me the command

[@studywithroman1997]

mash allha nice

[@nadiafahmi7013]

Thank you for being such an inspiring person.. thank u for offering such a valuable material.. the knowledge i gained from will be always engraved in my mind.
can't wait to attend the upcoming "backend" sessions 🤗

[@prakharagrawal8120]

can u pls share ur code i m getting error

[@AksharBhesaniya]

Great 🤩🤩🤩
When will you upload the backend part ?

[@bhalibekindff1772]

The best ever react project even for begineer. The great one project over youtube. Thanks a lot GREAT STACK. waiting for backend (2nd part).

[@idevkr]

2nd part is already uploaded on channel

[@hugomendez7659]

In your next projects can you add pagination and upload more images ? Thanks.

[@ainakhanna6347]

Aamzing video!!! When will you upload the backend video?

[@Kelvin-nh3to]

You are amazing brother

[@codingiseasy8312]

Nice Website Design😀😀😀

[@ShivaKumar-oi7se]

Great greatstack❤

[@Vampire_robux69]

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

[@NitinSharma-qx4ff]

when will part 2 come?

[@AkashGupta-vl5xk]

bhai pta chal jaye to bata dena

[@NitinSharma-qx4ff]

@@AkashGupta-vl5xk agle mahine ayega bhai

[@AkashGupta-vl5xk]

Bhai agr tumne bana liya ho to GitHub link de do apna css copy kr lunga m

[@SalmanAhmad-gm1cf]

​@@NitinSharma-qx4ffkaise pta chala bhai mai tao bhut beshabri sea wait kr rha hu

[@atangacheboh8634]

How did u overcome the footer not being responsive

[@saitejm8582]

Thank u anna❤❤

[@loveneeshgarg1408]

plz make one project on complete inventory management system that we can also integrate with these kind of website at backend so if items get finished it automatically shows
out off stock or remove the item at real time

[@orlandopedrazzoli2790]

You are the best

[@mysecretfindings]

do you use an external API in this project?

[@alvaro8580]

Waiting for 2nd part of this video.
Please upload fast .
assignment deadline is about finish.
if complete not possible.
please provide complete frontend tutorial : admin dashboard,search...

[@gurughantal59]

Please create more videos on reactjs using tailwind css

[@retheeshsteph]

Waiting for your back-end video

[@GreatStackDev]

We are working on it, will be uploaded in April

[@issrabrahmi9245]

@@GreatStackDev the beginning of april or the end sir because i need it for my end of year project in april ! thank u so much for this excellent work

[@mehek2736]

Any suggestions about unique projects for resumes ? As companies are asking something different

[@divyanshuarya1022]

its a great project tutorial thanxx. but what about backend sir. when you upload next video please soon . otherwise we will stuck

[@alvaro8580]

thank for the video

[@pasindusheshan8555]

thank you

[@eugeenhunter7384]

waiting for the back end will be grateful

[@Babytok-ig4yu]

Thank you very much but can you make a delivery app like Uber, Indrive and Jumia?
Please!!!

[@celticspyd5887]

we need edit option in admin page for items

[@SalmanAhmad-gm1cf]

Sir please upload part 2 as soon as possible

[@thedailyeducation5345]

Please upload it's backend part also, make it complete full stack project....

[@rehanulredoy9107]

you are awesome brother

[@anupriyasehgal652]

please make video on backend also.

[@alvaro8580]

@GreatStackDev Hello Sir! Please provide next complete video

[@atombyte7743]

Hope you can help us with deployment too, thanks.

[@mohsin_maqbool]

Please make a video about the Online doctor appointment booking website as soon as possible I need this, I made my FYP

[@sourishchatterjeechatterje2953]

Sir what are the prerequisites for this project please can you guide us

[@mdmajid2136]

Sir please make the backend I am waiting for back because I am completed front End .

[@akshayt1303]

state management should be using Redux-toolkit , pls next project can us add

[@ArchanaSekar-om9qg]

Hi...Can you put a video on deploying this application

[@ArunKumar-bq7oo]

Waiting for backend

[@mahammadalthaf8199]

Devine ….!!!!!

[@muhammaduseram9405]

please do deployment of these projects as well

[@dhanarajccs]

Awesome Brother

[@kingiboy8976]

this is the best

[@v1shal_yadav]

where I can find backend video for this project

[@SipheleleZulu-jg4wr]

Thank you so much

[@GreatStackDev]

Glad u liked this tutorial

[@alvaro8580]

many of our friends are waiting for it. whole class semester

[@almannazyrov394]

Good design

[@MrVashu-sc9od]

Awesome 😊

[@ajiteshmishra0005]

Please upload one video containing concepts Redux, Redux Saga, Redux Thunk in any React Application
If it is possible to JWT also so it will be good for React Aspirants