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

[@GreatStackDev]

Backend and admin panel: kzbin.info/www/bejne/enOwgYuAf8uEe6M

[@sameerbasnet2576]

Sir Can you also let the user choose whether he is a customer or a vendor

[@rexcharles6664]

good job

[@aytech2506]

Food display ko home.jsx me use karne per browser ki screen show q nhi ho rahi hai plese bata do koi

[@serahnderi]

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

[@maderapier2018]

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

[@swayamprakashkar9664]

00:02 Create a full-stack food ordering web app using ReactJS 02:59 User can enter name, address, and proceed to payment page. After successful payment, view order details and admin panel. 09:08 Setting up necessary extensions and file structure for React project. 12:20 Creating and importing CSS files for the component 18:39 Adding flexbox layout and padding to the app and logo 21:31 Styling the menu items and buttons 27:24 Adding logic for menu selection 30:02 Adding CSS properties for layout design 35:51 Setting up routes for homepage, cart page, and place order page 38:35 Creating header component structure and styling 44:42 Adding fade in effect to text display 47:27 Setting up assets folder for menu items and creating HTML structure for exploring menu component 53:18 Styling the Explore Menu Text 56:26 Styling and functional setup for Explore Menu in React app 1:02:20 Creating store context provider for filtering food items 1:05:21 Creating store context and provider for accessing data throughout the project. 1:11:14 Creating a new component for displaying food items 1:14:10 Setting up food item details in React component 1:20:19 Adding CSS properties for food items display 1:23:36 Styling food item description and price 1:29:32 Adding CSS properties for image tags and counter 1:32:30 Implementing cart functionality in the food delivery app using React JS 1:38:27 Integrating cart functionality using context in React JS 1:41:22 Managing and displaying food items in the cart 1:46:53 Creating footer component with image tags and social icons 1:50:09 Creating footer with multiple divs and tags 1:56:24 Adding CSS properties for social media icons, HR tag, and footer layout. 1:59:27 Setting up and styling the app download component 2:05:10 Designing the layout elements for the app UI 2:08:08 Making header and menu components responsive 2:13:47 Implementing smooth scroll functionality for menu links 2:16:28 Creating state variable for login display 2:22:06 Creating input fields for email and password with required properties 2:24:53 Adding conditional fields and state-specific messages 2:30:28 Styling the login popup 2:33:25 Styling login popup and creating cart page 2:39:25 Adding links to logo and cart icon 2:42:11 Successfully displaying cart items data and adding CSS properties 2:47:47 Adding functionality to remove products from the cart 2:50:18 Implementing add to cart and remove from cart functionality in the food delivery app 2:55:50 Adding CSS properties for different elements 2:59:05 Making input field and button responsive using CSS properties 3:04:57 Creating a function to calculate the total cart amount 3:07:44 Adding dollar sign as currency and implementing dynamic visibility for cart value 3:13:31 Creating input fields and displaying card total in the order page. 3:16:38 Adding CSS properties for the web page layout 3:22:37 Development of front-end for food delivery website completed

[@azeemrahman6416]

u nailed it

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

[@David-j5p1e]

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

[@suystha7]

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

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

[@youknowom]

@@divyanshuarya1022 bro right click on your project file then click on 'open in integreted termianl' after that type in terminal npm start (ps:pls ignore spelling mistakes )

[@aleksandrapiligriu7436]

@@divyanshuarya1022 are u typing cd frontend at first? could be that when u open the folder again its at the food-del folder... so first type in the terminal cd frontend, then type npm install then type npm run dev and then see if that works

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

[@Codewitheyezyc]

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

[@amanmujawar9176]

Absolutely awesome tutorial ❤ waiting for the next backend tutorial.

[@djfago6240]

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

[@theeagle4213]

Completed the project and waiting for backend. Thank You sir

[@KavyaP-yz7vq]

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

[@saritakumari9036]

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

[@detce415sudebpaul4]

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

[@samihamuntahamahin4987]

Today I completed this project!! Thank you so much

[@GreatStackDev]

I'm so glad to hear that you completed it! Thank You. Keep coding.😊

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

[@Anime12286]

Can you please share source code

[@kebihabesha7187]

NICE PROJECT PLEASE THE BACK END OLSO

[@AnaZivkovic1997]

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

[@vaishnavijadhav3005]

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

[@Jaikushal]

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

[@monalisabindhani9401]

This a awesome project . when will the second part come

[@inderpal_singh_]

Great Project sir 👏🔥

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

[@bhushansontakke3614]

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

[@hey-ir1be]

Super Thank you sir!❤❤

[@Verginia-Stories]

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

[@prakharagrawal8120]

can u pls share ur code

[@Smit-j8n]

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

[@GreatStackDev]

I'm so glad it helped you! Thank you.😊

[@kelvinnjuguna-i1q]

thenk you mahn....this the best tutorial i've watced on project based practice😁😁

[@kartikikhare670]

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

[@bhushansontakke3614]

This Project-Based learning channel is going to be the number one channel on KZbin 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...♥♥♥

[@Anshumanmishhra]

Bhai can you please share the gitHub repository for this project

[@nadiafahmi7013]

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

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

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

[@ranjaykumar9345]

Finally today complete this project Thank you sir🙏

[@GreatStackDev]

So happy to hear that. Keep coding. Thank you. 😊

[@mishaalvi4257]

Amazing project! very helpful in building concepsts of react👍

[@vinayaksutrave9245]

Thank you so much sir for this wonderful and amazing food delivery app and i completed this quiz and have a certificate about this project sir so once again thank you your videos are keep daily updated sir...

[@1zhann184]

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

[@omghoghari18]

Awesome Project waiting for second part

[@abhinavgupta1219]

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

[@vanshikaraut9064]

did it work

[@urstrulybhavana1432]

Thanks a lot sir.....Huge Respect for you we cant afford money to learn all these really thanks a lot from bottom of my heart

[@VishnuKishoretarini]

Great content with simple explanation along practical example.

[@TonyLe-q3c]

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

[@AnkitSingh-sy6sb]

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

[@RahulGavada-g2w]

Finally completed this awesome project and added it in a resume, Thank you so much.

[@sanskruti6798]

hello did ou completed the project please reply

[@studywithroman1997]

mash allha nice

[@sagarghosh1689]

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

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

[@WohSaadgi]

Thankyou very much Sir for this amazing Project

[@GreatStackDev]

Thank you. 😊

[@WavesOfSecurity]

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!

[@oreokapoor577]

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

[@MuhammadShaheer-e9m]

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

[@harshilpatel4769]

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

[@NIYONKURUSamuel-eu3tg]

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

[@ahmadanjum1816]

Thank u GreatStack man very help full this tutorial 😍😍

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

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

[@faiqahmed740]

This is just too good

[@GreatStackDev]

Glad to hear that. Thank you so much. Keep learning.

[@pmjackofficials5885]

​@@GreatStackDevHi Sir. In 23.01 you have given that border: 1px solid tomato. Why the border is in gray. Not in tomato color please explain sir

[@pmjackofficials5885]

​@@GreatStackDevIn 23:01

[@SATOTE_GAMING]

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

[@supremeleader5516]

Good, finaly i got overview of react website

[@abhishekkumarmehta743]

Done with the frontend part waiting for the backend :)😍

[@tushar3549]

can you share?

[@bishtrohit8380]

i m having an error regarding vite is working but nothing shwoing in the web locallhost any fix?

[@b_40_nishantlandage18]

same happning with me bro @@bishtrohit8380

[@b_40_nishantlandage18]

do any one have any suggestions

[@prakharagrawal8120]

can u pls share share github..i m getting error in store context part

[@theeagle4213]

amazing sir Thank you for your services.

[@codingiseasy8312]

Nice Website Design😀😀😀

[@nikhiljangid903]

completed it just now and i can definitely say this is the best project for the react beginners must recommended🙌👋

[@Anime12286]

Can you please share source code

[@aashishgupta9392]

please share src code

[@sandeeppradhan4697]

plz share the source code

[@ritikaaaa15]

Can you please help me with running the code as when I m running the navbar.jsx code after adding asset it is asking me for sign in with I'd and PW?? What to do now plz help

[@Ibrahim_webdeveloper]

Can't believe you did all these for free 😭😭 having someone like you Make programming easy. Much love from Nigeria ❤❤

[@Haiderium_313]

Bro in Storecontext.jsx Line no 28 My ItemInfo.price not working and through error price undefined

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

[@eugotavias9967]

God bless you sir tank you for this class

[@gurughantal59]

One of the best tutorial to learn reactjs

[@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 KZbin and you've been massive in my developement Congrats on 1M in advance

[@ryanranjith672]

am getting error in 1:40:00 when i click on add button all items are adding at once instead of one item....Anyone knows how to solve this?

[@pratikawadhiya5457]

did you solve the problems?

[@ryanranjith672]

@@pratikawadhiya5457 yeah bro

[@paythongamer9558]

@@ryanranjith672 how bro tell me

[@vid-savage619]

Same problem. How to fix-> open assets.js at export const food_list rename _id to id every menu.

[@ryanranjith672]

@@vid-savage619 Thanks

[@ainakhanna6347]

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

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

[@venkatrohit5993]

I'm waiting for part-2 video..😊

[@GreatStackDev]

We are working on it, will be uploaded in April

[@SATOTE_GAMING]

​@@GreatStackDev Please upload second part in 1st week of aprill if possible

[@JeginiLokesh-t2f]

1) 1:25:24 increment and decrement

[@tsholzzmoralo]

You're Brilliant bro ❤

[@ymedjalil]

Good job it simple and usefully

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

[@eugeenhunter7384]

waiting for the back end will be grateful

[@edsHTML]

Cool video bro😎😎

[@simonmengue8504]

amazing project. order notification could have been implemented for better management

[@saimanikantaandey3302]

please also include the deployment bro !

[@lekan1007]

I really appreciate everything you have been doing... Sometimes i ask why you do this much. For whatever reason you do this... You will have peace of mind, fulfilled and thank you.

[@orlandopedrazzoli2790]

You are the best

[@atangacheboh8634]

How did u solve the eslint problem to choose category in 1:44:53? Can anybody help, after doing this ,categories stops displaying for me ..

[@Phantom-md8qi]

Did you somehow fix this? I have the same problem, can you help me please?

[@drff7249]

yes same problem did you solve it ? 🥲

[@prabhatkumar4266]

same problem bro ! Can anyone help me to solve this issue

[@youknowom]

it is solved ? i got same erroer

[@JagmeetSingh-ym6jj]

Hi, Manpreet hereThank you so much sir. I hv made this project watching 3hour video. I can understand how much work hard you do to make such videos. I don’t need source code. But I pay for source code to say Thank you

[@CodingWork-p1g]

Bro can u give me source code as I am getting error 😢

[@kts_computer]

Super 🤩🤩🤩

[@AksharBhesaniya]

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

[@rehanulredoy9107]

you are awesome brother

[@yaiphare3638]

I love it bro 🔥

[@ashutosh61290]

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

[@Top01Comment]

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

[@loveandlike6747]

Thanks a lot , can you make one project for very beginner react please?

[@ShivaKumar-oi7se]

Great greatstack❤

[@gklelei5163]

When to expect the backend tutorial because its just dope following along as you code

[@GreatStackDev]

If more people are interested to watch the backend tutorial, we will upload it. Expecting 5k likes on this tutorial. Once i reach that, then backend tutorial will we live.

[@taranimalayala1895]

Once you upload automatically it will be 5k likes 😅

[@KhushbooRathore-ri2hj]

I have tried to use ContextApi but my screen goes blank after wrapping my app component to it. Before wrapping it up my code works perfectly. what should I do sir?

[@rajeevsharma9979]

1:00:34 at this stage my output is showing blank what can be reason have done the exact same as u have done

[@user-BP2020]

Thank Q sir 😍😍😚😚

[@Anshumanmishhra]

hey can you please share the github repo for this project

[@anupriyasehgal652]

please make video on backend also.

[@funnys10]

Thank you bosss❤

[@dhanarajccs]

Awesome Brother