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

Подписаться 1 млн

Просмотров 135 тыс.

50% 1

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

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 390

@GreatStackDev 25 дней назад

Backend and admin panel: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DBMPXJJfQEA.html

@NIK-el1nz 3 дня назад

hi can u give me ur contact info

@maderapier2018 2 месяца назад

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.

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

@eyezyc1723 2 месяца назад

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

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

@nikhiljangid903 3 дня назад

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

@suystha7 2 месяца назад

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

@AnaZivkovic1997 2 месяца назад

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

@kartikikhare670 Месяц назад

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

@user-tc5do1ps9p 23 дня назад

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

@amanmujawar9176 2 месяца назад

Absolutely awesome tutorial ❤ waiting for the next backend tutorial.

@bhushansontakke3614 Месяц назад

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

@djfago6240 2 месяца назад

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

@detce415sudebpaul4 2 месяца назад

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

@hey-ir1be 2 месяца назад

Super Thank you sir!❤❤

@tushar.musicx 2 месяца назад

wonderful project sir, eagerly waiting for part 2 backend

@nadiafahmi7013 Месяц назад

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

@saritakumari9036 2 месяца назад

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

@AnkitSingh-sy6sb 2 месяца назад

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

@fazleali2443 2 месяца назад

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

@inderpal_singh_ 2 месяца назад

Great Project sir 👏🔥

@mangeshdhok-xj4bo 2 месяца назад

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

@1zhann184 Месяц назад

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

@KavyaP-yz7vq Месяц назад

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

@user-sv7od8kj3m 14 дней назад

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

@abhinavgupta1219 2 месяца назад

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

@vanshikaraut9064 Месяц назад

did it work

@thearshow4423 2 месяца назад

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 2 месяца назад

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

@miralvaghasiya3271 2 месяца назад

Hello plz give me your project

@prayanshu5208 2 месяца назад

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

@eugotavias9967 13 дней назад

God bless you sir tank you for this class

@ymedjalil 2 месяца назад

Good job it simple and usefully

@oreokapoor577 2 месяца назад

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

@user-ee6gk9eh7j 2 месяца назад

Yes bro please do this.....

@GoldEnrolled1 2 месяца назад

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- 2 месяца назад

Yes

@dadciraouf134 2 месяца назад

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 ♥

@waad1503 Месяц назад

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

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

@omghoghari18 2 месяца назад

Awesome Project waiting for second part

@codingiseasy8312 2 месяца назад

Nice Website Design😀😀😀

@harshilpatel4769 2 месяца назад

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

@gurughantal59 Месяц назад

One of the best tutorial to learn reactjs

@leoodion1154 2 месяца назад

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.

@kebihabesha7187 2 месяца назад

NICE PROJECT PLEASE THE BACK END OLSO

@yaiphare3638 2 месяца назад

I love it bro 🔥

@mircrypti5417 Месяц назад

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

@prakharagrawal8120 Месяц назад

can u pls share ur code

@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

@Kelvin-nh3to Месяц назад

You are amazing brother

@alvaro8580 2 месяца назад

thank for the video

@user-fb5sr5nx6u 2 месяца назад

Thank you bosss❤

@ShivaKumar-oi7se 2 месяца назад

Great greatstack❤

@gamerzchoices 2 месяца назад

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

@GreatStackDev 2 месяца назад

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

@patel_05_roma Месяц назад

@@GreatStackDev i need help

@studywithroman1997 2 месяца назад

mash allha nice

@dhanarajccs 2 месяца назад

Awesome Brother

@MrVashu-sc9od 2 месяца назад

Awesome 😊

@rehanulredoy9107 2 месяца назад

you are awesome brother

@Jaikushal Месяц назад

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

@orlandopedrazzoli2790 2 месяца назад

You are the best

@ScamShieldTech 2 месяца назад

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!

@ainakhanna6347 2 месяца назад

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

@ashutosh61290 2 месяца назад

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

@nadiafahmi7013 2 месяца назад

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

@TheCodingCollege8462 2 месяца назад

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

@monalisabindhani9401 2 месяца назад

This a awesome project . when will the second part come

@NIYONKURUSamuel-eu3tg 2 месяца назад

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

@vaishnavijadhav3005 Месяц назад

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

@ramendrasoni3368 2 месяца назад

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

@SATOTE_GAMING 2 месяца назад

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

@saitejm8582 2 месяца назад

Thank u anna❤❤

@kts_computer 2 месяца назад

Super 🤩🤩🤩

@eugeenhunter7384 2 месяца назад

waiting for the back end will be grateful

@Vampire_robux69 2 месяца назад

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

@pasindusheshan8555 24 дня назад

thank you

@almannazyrov394 2 месяца назад

Good design

@edsHTML 2 месяца назад

Cool video bro😎😎

@AksharBhesaniya Месяц назад

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

@d21421d 2 месяца назад

good bro!

@SipheleleZulu-jg4wr 2 месяца назад

Thank you so much

@GreatStackDev 2 месяца назад

Glad u liked this tutorial

@kingiboy8976 Месяц назад

this is the best

@hugomendez7659 2 месяца назад

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

@nazarfariddhuddikhan6847 2 месяца назад

Nice

@mahammadalthaf8199 2 месяца назад

Devine ….!!!!!

@saimanikantaandey3302 2 месяца назад

please also include the deployment bro !

@kwabijoe9906 2 месяца назад

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

@goodnessuche1430 2 месяца назад

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

@atombyte7743 2 месяца назад

Hope you can help us with deployment too, thanks.

@NitinSharma-qx4ff 2 месяца назад

when will part 2 come?

@AkashGupta-vl5xk 2 месяца назад

bhai pta chal jaye to bata dena

@NitinSharma-qx4ff 2 месяца назад

@@AkashGupta-vl5xk agle mahine ayega bhai

@AkashGupta-vl5xk 2 месяца назад

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

@ImranAbbas-ox3fu 25 дней назад

nice

@RohitSampannavar-vt9xy 2 дня назад

do we have update operations in this Project?

@mohsin_maqbool 2 месяца назад

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

@mehek2736 2 месяца назад

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

@alvaro8580 2 месяца назад

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