How To Create Full Stack Food Delivery Website In React JS, MongoDB, Express, Node JS & Stripe
HTML-код
- Опубликовано: 20 май 2024
- Build Full Stack Food Ordering Website using React JS, MongoDB, Express, Node JS & Strip | Full Stack Project for students 2024
👉 Source Code: 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 tutorial you will learn to create a complete food ordering website / app using React JS, MongoDB, Express, Node JS and Stripe payment gateway. In this Full Stack Food delivery app project we will create the Frontend website, Admin Panel and Backend server.
We will create the user authentication system so that anyone can create an account and login this food order website.
We will create the shopping cart functionality so that user can add food items in their cart and order food from this app. We will also integrate the Stripe payment gateway to place the order and with online payment. Then we will create the order status update features also.
Download the assets: drive.google.com/file/d/197J9...
👉 React Introduction Tutorial: • What Is React (React J...
#ReactJS #Ecommerce #FoodApp #GreatStack
Timestamp:
00:00 Project Overview
06:39 Create Frontend food delivery website
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
03:23:23 Create Backend of Food App
03:38:12 Setup MongoDB Atlas for database
04:28:12 Create Admin Panel using React JS
05:31:75 Display food list in the admin panel
05:51:35 Create user authentication (login & registration) feature
06:52:49 Fetch food data on frontend from databse
06:59:58 Create Shop Cart functionality
07:39:12 Create place order feature and stripe payment integration
08:45:12 Create user order page
09:16:46 Display orders in admin panel
09:42:09 Create order update feature
-------------------------------------
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
![ChatGPT Can Now Talk Like a Human [Latest Updates]](/img/1.gif)
👉 Source Code: greatstack.dev/go/tomato
hi i am getting one while adding food i choose category but in database i always show "salad" what ever i choose
@@Abhishekmishra-bq5xm when add new category first chose another category and then choose when you want like if you want to add cake category first select salad then again click on cake 🍰
Hi if I purchase this project will I get this right away
@@aditipareek8293 yes I also purchased...You will get source code and their is one pdf for how to run project also a youtube link for setup...
Can you please give a solution of stripe payment method? I’m getting error when I press proceed to payment. In my case, placeOrder return undefined. Video starts from 8:23:34
Anyone who want more Full-Stack projects - Show your interest....
I want MERN full stack projects
Yes we want
Yes, i want MERN Full-Stack projects plz...
Yes i want MERN stack project
Hey can I show this projects to my final year projects submission
We want more full stack projects
Bade Bhai phle ye he bnalo😅😅
@@lakshayjain2309 plz give the code of this video if you have (if only frontend you have then also plz give)
plz give the code of this video if you have (if only frontend you have then also plz give)
@@tanmaygoel3910 Han bhai maine front end toh bana li.....
@@lakshayjain2309 backend hai???
Thanks so much Sir, your explanations are very easy to follow!!!
God bless!!
I really love your projects....are you a self taught engineering
You always motivate me.... always....now working on JavaScript projects thanks
thanks alot for this . i wast waiting for this from a whole week
Thank you once again for the good work you do for free.
You promised and then delivered, you are the best
plz give the code of this video if you have (if only frontend you have then also plz give)
Thank you very much, sir. I gained a lot from this video.😊👍
Thank you great stack for this amazing project , really appreciate your effort
nice projects keep going with latest terminologies
thanks to giving like full stack projects
thanks for this amazing session , no would teach these kinda things freely.
You are only the Indian person who tell projects in very easy to understanding please some more videos published like this based on mern stack projects 🫡
Thank you sir ❤
Thank you sir 🙂 I was eagerly waiting for your backed vdo i found it so helpful.
Please how did you handle the responsiveness on the order page? can you help me please? frontend
plz give the code of this video if you have (if only frontend you have then also plz give)
Amazing tutorial. Thank you for your hardwork and dedication. Can you please also make a video on how to deploy this website ?
can u add some more feartures like map location it will makes it more engaging just a suggestion btw I love this project
we are close to one Million😁, congrats bro
I was working on the frontend part of this project from the previous video and was eagerly waiting for the complete tutorial
Thankyou so much!!
Please how did you handle the responsiveness on the order page? can you help me please? frontend
plz give the code of this video if you have (if only frontend you have then also plz give)
@@charlesegbe546 try using the trial and error method after inspecting in the browser. You can watch some 10-15 minute videos readily available on RUclips, especially focusing on responsiveness.
@@charlesegbe546 did your changes made in Nvabar.css was showing in localhost?Kindly tell!
Thank So well for this
Mash allah nice tutorial sir
I wanted to express my deepest gratitude for incredible teaching videos you provide. Your selfless dedication to sharing knowledge has touched countless lives including mine. I am truly thankful. You are the beacon of light in the realm of web development education
Sir your explanation is very good
This is really Helpful for Me❤ Thank you
plz give the code of this video if you have (if only frontend you have then also plz give)
thank you so much, sir😊
Thank you so much GreatStack❤
plz give the code of this video if you have (if only frontend you have then also plz give)
@@tanmaygoel3910 .
God bless you and your family 😊 thank you for the hard work
plz give the code of this video if you have (if only frontend you have then also plz give)
Pls more such types of projects sir
Thank you ❤
Thankyou 🎉❤
awesome tutorial...❤
huge thanks !
Simply great
More full stack projects❤❤
Thanks, it is very help full tutorial pleas do on deployment
Thank you bhaiya
Best project on RUclips ❤❤❤❤❤❤
Need more fullstack video... I was waiting for this....
plz give the code of this video if you have (if only frontend you have then also plz give)
Great Project
1st view 1st like and 1st comment watched after 30sec of broadcast
very nice tutorial
Finally been waiting like forever, i am having a problem with the removeFood function when i try to fire it up i get an error in the console that it can read the properties of id , help
make a DELETE request, it should be like this : const response = await axios.delete(`${url}/api/food/remove`, { data: { id: foodId } });
I can't wait to begin this one...
Please how did you handle the responsiveness on the order page? can you help me please? frontend
plz give the code of this video if you have (if only frontend you have then also plz give)
Thank you very much
You are king of web ❤
Please how did you handle the responsiveness on the order page? can you help me please? frontend
Successfully completed 🙏
has he also coed the front end part in this tutorial?
did you add all the food and description in the admin panel yourself?
@@lovizakashif8125 Yes
@@goodnessuche1430Yes I did
Yes @@lovizakashif8125
Thanks sir..😊
But you haven't added functionality for search 🔍 icon button.😊
I love you man
its a great video... can you post fullstack project with react native mobile app please
Thanks
More mern stack projects asap please
Something like LMS, medical management system, TWITTER CLONE ,
Can you make a video of deploying this project
Sir please make a video on how to host this project
Can you please build an expense tracker using JavaScript. Is very important and can improve our JavaScript
I have been patiently waiting for the backend
HaHaha same,The first time when I saw this project,I wanted to learn to create this
i only node react js, is there any pre requisite to learn mongo db, node js ? can i learn them on the fly ?
Bro can u please make a full website with react,python and django.
sir we want more full stack projects
good job
2:15:03 make navbar sticky and background white it will be more useful
Please how did you handle the responsiveness on the order page? can you help me please? frontend
@@charlesegbe546 there is two divisons (div1 = delivery info,div2 = cart details) firstly we used in normal page display:flex;
flex-direction: row;
to get both side by side in mobile we use flex-direction: column ; thats it i hope you understand 😊😊
Sir please teach us how to host this Mern project
Which vs code theme are you used in this video ?
How do I retrieve the email or name value from the Navbar UI for display purposes?
@GreatStackDev how to deploy backend part of this project please help
Please do the same project in Java Spring Boot annd react js
Please make react projects
when i add stripe secret key after that page was not redirected to payment gateway but query saved in mongodb as you described in video as i check stripe and vs terminal this shows me your account in not verified __________________kindly explain or reply this comment answer please I'm stuck at this point
Are you get any solution??
Hello I am learning backend development now so to make project I show you tube channel or doing it myself
Please sir create one full stack LMS with react and node
I want to purchase the source code that will you provide both source code for user panel and admin panel .
Upload more MERN Full stack project
We can use this project as personal use sir
We want more mernstack project make a school softwear usnig mern
Sir Please Create an Website with help of frontend HTML,CSS , Javascript And for Backend PHP MySQL Only
when i send request to add data to database it is giving errors i spend days but still cant find the solution
Can you please make tutorial on fullstack church website
please put react native project with node js mobile app project
Hii how did u add this many food data to database?
at what time search functionality working ?
can i show this proejct in clg for final year project
I am getting this error while applying background image Failed to resolve import "./header_img.png" from "src/assets/assets.js". Does the file exist? any solution?
Koi bata sakta is project ma context api use huwa ya redux toolkit?
how to make the stripe payment work fully
can anyone tell that inseatd of deleting product from admin panel can we toggle visible /invisible
U can add the inStock property and u can add filter for this property in frontend
I am facing issue in add to cart functionality, cannot read cartData null properties
Can anyone help?
Please use tailwind css in project 🙏
I use tailwind while copying her project
Please make doctor appointment booking website
What if I want to add products of different sizes and colors
why you not use tailwind css
Sir please create MERN admin dashboard
Did anyone find any solution of stripe payment method?
asset given in drive, rename food_list id from "_id" to "id" , then it should work fine
its not working
please help
Thnkuu so muchhh
@@dikshamalik2565please help me it's not working i tried the steps
@@dikshamalik2565 please help me it's not working
heyy , I am getting trouble again in this condition when i am fetching the images form the database can u help out if you know ?
how to deploy this project....?
Bro how to do you get such design ideas? 😅
sir without delivery boy and restaurant it is not food delivery website.
so please make all these functionality.
What if u want to run the project again in VS code ....What commands are required or any other way .....Pls help
First run the backend part with command "npm run server" then run frontend part with command "npm run dev"
I wonder what happened to playlists
Yes yes yes
sir img code in css is not working ?
bro the amount of unskipable ads every 5-10 mins is crazy man 😒