Food Ordering App - React Node.js Full Tutorial | MERN Stack

In this tutorial, we build a food ordering app using MERN Stack.

👾Join my Discord:

✉️Sign up for my newsletter:

🌐GitHub URL:

📝Dev Resources List:

Topics covered in the video:

1. State management using Redux (redux-thunk & new redux dev tools)
2. Creating custom hooks & re-usable components
3. Setting up router and pages
4. Setting up express server
5. Creating models & queries using mongoose
6. Creating a MongoDB Database
7. Generating dummy data using Faker-js
8. Implementing Authentication
9. Integrating Payments using Stripe

0:00 Demo
3:08 Creating React App
3:45 Installing Modules
6:26 Building the first component
12:00 Navigation
21:00 Homepage
38:08 Setting up server
1:06:35 Displaying Products
1:23:32 Redux
1:55:19 Menu
2:36:24 Checkout
3:40:28 Payments
4:16:37 Firebase Authentication
4:55:10 Thanks for watching!:)

Some f the links included in the video description are affiliate links. I am affiliated, but not sponsored. This means I might make money when you purchase paid services through the links provided and I might be able to offer discounts when available.

[jaminirmalviswas]

00:01 Building a food ordering app using MERN stack

02:45 Creating a React app with React Router Dom and adding Tailwind CSS for styling.

08:35 Setting up navigation for the food ordering app using React Router

11:52 Creating folders and initializing index.js files for each page

18:15 Styling and updating links and text in the app's UI

20:56 Build a banner component for the home page

26:10 Creating reusable button component in React

29:04 Create a utility for creating conditional classes in React

34:10 Creating font attributes and about component in React

37:12 Setting up the backend server with Express and required packages

42:35 Setting up the file structure and defining the product model

45:06 Creating model and defining routes in the Food Ordering App.

50:37 Setting up the server and testing the routes

53:57 Using faker.js to populate data in the database

58:54 Creating products in the Food Ordering App

1:01:29 Creating a route to get products by categories

1:07:19 Displaying the 'products' section on the homepage

1:09:49 Debugging and displaying products in React app

1:15:18 Adding styling and carousel functionality to the products preview

1:17:52 Creating a button component to add a product to the cart

1:22:58 Setting up line clamp and redux stores

1:25:21 Setting up the root store and importing necessary functions

1:30:57 The video discusses how to manage actions and state in a food ordering app using React and Node.js.

1:33:29 Exporting products from the cart slice

1:40:05 Dispatch actions using the 'useDispatch' hook and 'add to cart' function

1:42:50 Create a slice and define initial state for the product

1:49:42 Implementation of async reducer and payload handling in the app

1:52:31 The video explains how to update the status of a product in the root reducer

2:00:07 Displaying products and creating a card for product details

2:04:05 The video discusses the implementation of a product detail card in a food ordering app.

2:10:32 Creating a tab item component for a food ordering app

2:13:30 Implementing tab functionality in the Food Ordering App

2:19:43 Fixing typos and updating tab display and functionality.

2:23:25 Changing the display layout to columns and making texts smaller

2:31:10 Updating tabs, cart count, and header in the Food Ordering app

2:34:12 Creating a cart page with three different forms

2:40:41 Creating a custom hook for tab switching

2:44:13 Implementing tab switch functionality in the Food Ordering App

2:50:22 Building the address form component

2:53:29 Building a form using React hooks

2:59:30 Creating a Redux store for the address information

3:03:38 Creating the address slice and reducers

3:09:37 Create a product summary component and display products and prices.

3:13:05 Update product quantity and UI styling

3:20:05 Implementing a product summary card and displaying the image

3:22:52 Save stripe secret keys in env file and set up APIs for making payments from the client side.

3:27:33 Configuring environment variables and setting up web hooks and payment endpoint

3:30:07 The function calculateOrderAmount is used to calculate the total price of the order

3:36:03 Create order and user models for the food ordering app

3:38:53 Setting up the order details and saving it in the database

3:44:52 Implementing Stripe payment integration in the Food Ordering App.

3:48:38 Setting up payment processing and navigation

3:55:42 Implementing payment functionality using stripe module

3:59:14 Creating a customizable alert component in React

4:06:25 Implementing the card payment feature

4:09:00 Setting up a Food Ordering App with React Node.js using MERN Stack.

4:15:29 Setting up authentication using Firebase in the Food Ordering App

4:17:50 Create a Firebase configuration file and install necessary modules

4:25:26 Creating a form with fields for name, email, and password, and a submit button

4:31:24 Authentication instance and user creation

4:39:09 Creating an API call to fetch user data and navigate to the main page

4:43:35 Updating the sign-in functionality and error handling in the food ordering app

4:50:09 Implementing user logout functionality

4:53:46 Demonstration of logout functionality and updating session status.

[brendantreynor]

This took a while, but once again, terrific tutorial. It was almost overwhelming at times to keep up. Thankfully, you are very articulate with your explanations and reasonings behind what you are doing. It's tough in the marketplace and doing your tutorials help fill a void left by college and waiting to hear back from prospective opportunities. I will continue learning from you as much as I can. Thank you once again.

[prajwalwalde]

Hi, first of all I would like to say great work and great content. Secondly I would suggest as there are many beginners here, who are watching this tutorial, for them maybe entering the data into database and displaying the same might be tough. So you could have also shown that on your video as well that how to make connection using mongoDb and how to use CRUD operations, so that they can get a clear view of what is happening in the backend. Apart from this, everything else was quite easy to understand. Make more like these.

[cccheesebread]

Thank you so much for the tutorial!! This is my first time practicing code following a complete full stack project. Although I stuck in a few steps for a long time, e.g. the sign up page, when I finally figured out those errors, I felt pay-off. I plan to start the second round for a better understanding.

[joelgomez]

Genial proyecto y explicación, voy a aguardar por mas proyectos del stack MERN

[pipinstallshan]

I wouldn't be able to thank you enough for this amazing tutorial. <3

[alexanderkhutsianidze]

Wow! This was very helpful, I’ve learned so much. Thank you!!

[easywebdevelopment]

thanks a lot for making this tutorial and we waiting more videos from you. thanks again for your efforts

[sirikamkanampati]

When the items from the menu card are added, it 's showing undefined in the summary page . But when items are added from the main page it's showing correctly...

[KakashiSensei-punc]

Thank you so much for this. Your hard work is appreciated

[arasuramanan]

i need the postman data that you have sent, bcoz i am getting error in that

[stevefox]

Judy.
You are Awesome.
Thanks for beautiful tutorial.

[softea]

haiii thank you for the tutorial! but may you please guide me on how to add the product manually in the database and also how the images are uploaded please????

[Basha]

great tutorial
The font in vscode is too small, please increase it to altesat 18px

[kengan]

Спасибо тебе за такие масштабные проекты. Ты мне очень помогаешь! Привет из России!

[mirniyazulhaque]

before starting this tutorial i want to know have you implemented Payment method from Card or UIP?

[prajwalwalde]

Can somebody help with the postman data? It is throwing errors.

[anagublessing]

Thank you so much, really... Thank you ❤❤

[singhsgaming]

Your content is fire!!! But without login how can someone order there must be a check

[sankaryadav]

Thanks for the tutorial. could you tell me whether you design your own design for the app or you take inspiration from somewhere?