How To Create Full Stack Food Delivery Website In React JS, MongoDB, Express, Node JS & Stripe

Build Full Stack Food Ordering Website using React JS, MongoDB, Express, Node JS & Strip | Full Stack 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 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.

#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:

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:

[eegkehj]

Anyone who want more Full-Stack projects - Show your interest....

[RanjanKumar-pmbc]

00:02 Creating a Full Stack Food Ordering Web App using React JS
02:59 User enters name and address, proceeds to payment page
09:08 Setting up the folder structure for the React project
12:20 Creating and importing CSS file for the Navar component
18:41 Adding styling and alignment to website elements
21:33 Adding CSS properties for menu font, alignment, and button styling
27:27 Adding logic for menu click and CSS properties
30:03 Creating multiple pages in React project
35:52 Setting up routes for homepage, cart page, place order page
38:43 Create HTML structure for the header component.
44:46 Creating fade-in effect for text display
47:27 Creating HTML structure for menu component
53:18 Styling menu text and images in CSS
56:18 Styling and setting up menu text and explore menu component
1:02:17 Creating context API and store context provider for the food display component.
1:05:24 Setting up store context provider for project support
1:11:14 Creating a new component folder and file for food item display
1:14:10 Creating components and adding classes for styling
1:20:19 Adding CSS properties to enhance food delivery website
1:23:33 Adding CSS properties and creating an 'Add' button in the food item component.
1:29:23 Add CSS properties to the food item image container.
1:32:22 Managing product cart data using context
1:38:25 Integrating cart management with food items component
1:41:18 Managing and modifying cart items in the food delivery website.
1:46:52 Creating footer component with HTML elements.
1:50:04 Creating footer with contact information and copyright text
1:56:22 Adding CSS properties for social media icons, cursor pointer, and HR tag
1:59:24 Setting up app download component with CSS styling
2:05:10 Creating responsive design for header section
2:08:11 Making header, menu, and footer responsive
2:13:52 Implement smooth scroll effect in web page
2:16:36 Implementing login functionality with React state
2:22:16 Setting up input fields and buttons for user authentication
2:25:07 Creating the login and sign up interface with dynamic content based on the user state.
2:30:37 Styling properties for login display elements
2:33:35 Customizing CSS properties for login popup and cart page
2:39:41 Implementing dynamic routing and rendering specific components based on URL path
2:42:20 Create a display structure for cart items data
2:48:02 Adding functionality to remove products from the cart
2:50:28 Creating the cart and total price section for the food delivery website.
2:56:06 Adding CSS properties for various elements
2:59:12 Make input field and button design changes
3:05:09 Creating a function to calculate total cart amount
3:08:01 Implement visibility of cart indicator based on cart value
3:13:57 Creating input fields and displaying card total
3:16:55 Defining CSS properties for various elements
3:22:58 Setting up the backend for the food delivery website
3:26:08 Setting up backend functionalities and dependencies
3:32:08 Initializing middleware and setting up server endpoint
3:35:06 Setting up basic Express server with callback function
3:41:40 Setting up network access and connecting to the database
3:44:57 Setting up database connection and creating models for storing products.
3:51:54 Create model, controller, and route for adding food items
3:54:59 Creating API endpoints for food route
4:01:20 Adding logic to store product data in the database
4:04:30 Saving food data in database and handling responses.
4:10:44 Setting up endpoint and file access
4:14:02 Creating a new endpoint at /list to execute the list food function
4:20:14 Deleting food item and image from database and folder
4:23:02 Implementing API for removing food items
4:29:38 Setting up the admin panel for the food delivery website
4:32:50 Adding CSS properties for links, text decoration, HR tag, and background color
4:39:04 Creating Navar component with logo and profile image
4:42:02 Styling profile image and sidebar in React JS
4:47:43 Create folders and files for product list and orders display
4:50:34 Setting up routes and navigation using React Router Dom
4:56:07 Adding image upload, product name, and description fields.
4:59:16 Adding category and price for food delivery website products
5:05:25 Setting up layout and CSS properties for input fields and buttons.
5:08:32 Implementing image storage and preview functionality
5:14:26 Creating onchange handler functions for various input fields and testing with useEffect
5:17:24 Updating form fields and handling form submission
5:23:11 Setting up server and making API calls
5:26:05 Adding and resetting data in the database
5:31:52 Setting up initial state and fetching data from the database.
5:35:21 Creating fetch list function and displaying food data in list item page.
5:40:54 Styling the webpage components for responsiveness and visual appeal.
5:43:46 Implementing logic to remove items from database
5:49:15 Define URL in a centralized location for consistency
5:52:10 Creating user route and model in Express JS
5:57:46 Creating user registration and login endpoints and setting up user router in server.js file
6:00:54 Checking for existing user and validating email format
6:06:53 Creating and saving user data with hashed password
6:09:36 Generate JWT token for user authentication
6:15:10 Creating APIs for user registration and login
6:17:58 Implementing user login logic with bcrypt for password authentication
6:23:43 Setting up frontend environment and state variables in React JS
6:26:38 Connecting onchange Handler to Input Fields
6:32:15 Implementing user login functionality and API calls in the full stack food delivery website.
6:35:09 Implementing login and register APIs with authentication token handling
6:40:49 Implement logic to show profile icon instead of sign in button when logged in
6:43:46 Adding CSS properties for navbar profile and dropdown
6:49:31 Implementing logout functionality and fixing token storage on page reload
6:52:10 Integrated login functionality and database data retrieval in the food delivery website
6:57:41 Integrating images and updating cart functionality
7:00:28 Creating three essential functions for the user model
7:06:46 Creating middleware in React JS
7:10:02 Creating middleware for decoding and verifying JWT tokens.
7:15:55 Updating cart data and generating response
7:18:55 Demonstrating the 'add to cart' functionality in the food delivery website
7:24:46 Adding and removing items from the cart and testing the API functionality.
7:27:43 Integrated backend API with front end
7:33:16 Adding logic for cart functionality and API request handling.
7:36:14 Integration of API endpoint and managing cart data
7:42:21 Creating the order model and controller for placing user orders.
7:45:45 Creating 'order route' file and setting up endpoints in Express router
7:51:42 Creating and saving new orders
7:54:54 Setting up prices, currency and product data for food delivery website
8:01:34 Creating logic for placing an order with Stripe payment integration
8:04:29 Creating state variables for form field information
8:11:04 Handling input field changes and verifying form data
8:14:22 Creating function to place order and link with payment gateway
8:20:03 Creating and sending order data through API
8:23:06 Sending order data to API and handling response
8:28:59 Adding verification and logic for order payment in the backend
8:32:07 Integrating Verify Order API with Frontend
8:38:03 Creating the spinner animation for the payment verification process
8:41:06 Handle success and failure response from API for payment verification and navigation
8:47:08 Implementing user order functionalities
8:49:57 Setting up authentication token for accessing user orders and linking API with frontend
8:55:42 Creating logic to save user's order data in React website
8:58:20 Creating the structure for displaying user orders.
9:04:13 Adding CSS properties to components
9:06:59 Adding CSS properties for different elements on the webpage
9:12:41 Implementing navigation logic for cart and orders pages
9:15:40 Setting up payment gateway and configuring backend URL
9:21:18 Integrating the API with the admin panel
9:24:19 Importing and using toast notification in React JS
9:30:38 Creating order item details and displaying user's information
9:33:42 Adding user's phone number, item quantity, and order amount display functionality
9:39:15 Adding CSS properties to address and select menu items
9:41:57 Creating API for updating order status
9:47:45 Implementing order status update functionality in the admin panel with React JS
9:50:36 Implementing logic to reflect dropdown changes in the database
9:56:19 Adding functionality to track order status updates
9:58:59 Create full stack food delivery app with React JS, MongoDB, Express, Node JS & Stripe
Crafted by Merlin AI.

[eugeenhunter]

You promised and then delivered, you are the best

[deepasharma]

It's really nice and very helpful..
There are few missing to learn
1. Search functions and components
2. Email + forgotten password
3. Promo code function
4. To display img logo on browser using favicon

[mfdnl]

My first ever fullstack mern project, Thank you so much Sir !

[ritwikamahapatra]

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

[abdullahshafiq]

"Thank you so much for the video. I followed your instructions in this project and created my own. It was a great experience, and I learned a lot from it. I will watch more of your videos and do more projects. Thank you so much."

[TLTechbender]

Thanks so much Sir, your explanations are very easy to follow!!!
God bless!!

[aryanupadhyay]

this is the only video tutorial i followed completely by heart and it had literally helped me a lot thankyou ....

[zhbgosr]

You promised and then delivered, you are the best 😁😇

[fallingsnow]

Amazing tutorial. Thank you for your hardwork and dedication. Can you please also make a video on how to deploy this website ?

[greeneyek]

Thank you very much sir! I just finished my project a couple of seconds ago💓💓

[ABHIFFQ]

can u add some more feartures like map location it will makes it more engaging just a suggestion btw I love this project

[TLTechbender]

Thank you so much Sir, the tutorial is easy to follow through and straight to the point.... I was able to follow through everything, didn't feel 10 hours long long at all...

[juniorMr]

we are close to one Million😁, congrats bro

[nscopeo]

Great Video Sir, Thanks for your dedicated teaching, Every word is concise and clear .

[JBrogrammer]

This is really Helpful for Me❤ Thank you

[howtovidoes]

You missed one thing, the edit and update of items in admin. One of the most important part in CRUD.

[Bishnupriyasahoo-udyo]

Thank you sir 🙂 I was eagerly waiting for your backed vdo i found it so helpful.

[HarshSri_]

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 🫡