MERN Stack : React ,Redux ,Node ,Mongo - Pizza Delivery App

Create a node and express backend by initializing npm, installing express and nodemon, building a server.js with a home route, and running the server on localhost.

Learn to set up a MongoDB Atlas database, create a users collection, and connect your Node.js app with Mongoose, including secure handling of credentials via environment variables.

Learn to add static JSON data to MongoDB by preparing keys and values in double quotes, exporting a data file and an import file, and importing into a new collection.

Define and export a mongoose model for the bizarre collection, including name, variance, prizes, category, image, and description with timestamps, then fetch all documents.

Install redux, react-redux, and redux-thunk; implement actions and reducers to fetch business data from the back end with axios, and configure the store.

Set up the redux store by combining reducers, creating the final reducer, and configuring createStore with initial state, applyMiddleware, and redux devtools extension, then wrap with provider.

Learn to expose a backend get all business route with express, dispatch the get all business action from the home screen, and connect the store to display data.

Bring the get all businesses data to the homepage using useDispatch and useSelector, manage loading and error states, and render the business list with unique keys.

Learn to build a cart in the MERN pizza app: add pizzas with variants and quantities, update totals, and persist cart data in local storage using Redux actions and reducers.

Design the cart screen using react-router-dom routes, render cart items from redux state, and implement quantity controls, item image, and a delete button, with plans to compute the subtotal.

Update the pizza quantity on the home page and cart page without duplicating items, so quantity changes update the existing item and reflect subtotals in real time.

Learn how to delete items from the cart by dispatching a delete action, filtering the cart in reducers, updating local storage, and enforcing a maximum quantity and zero removal.

Learn to compute the cart subtotal by summing item prices using JavaScript's reduce function, updating the subtotal dynamically as items change, and displaying it alongside a checkout button.

Build and demo the registration and login screens for the MERN pizza delivery app, wiring routes, input fields (name, email, password, confirm password), and basic client-side validation.

Create user registration actions and reducers in a MERN stack app, dispatching request, handling success or failure, and posting data to the backend user register route.

Create the user model with a mongoose schema, defining name, email, password, and an isAdmin boolean defaulting to false. Export the model for the users collection with timestamps enabled.

Build a backend user registration route using Express to save new users with name, email, and password, with error handling and success responses.

Design and implement a login flow in the MERN pizza app by converting registration to login, updating front-end and back-end to handle email and password and show success or failure.

Complete authentication in this MERN stack lecture by sending the user object (name, email, admin status, ID) from backend to frontend, store in local storage, and persist login.

Implement loading, error, and success components in a MERN app, display loading spinners during requests, show error and success alerts, and wire login, register, and logout flows.

Demonstrates Stripe payment gateway integration for online payments in a pizza delivery app, including cart interactions, order placement, and testing mode before production.

Implement stripe front-end integration with react stripe checkout to generate a token, capture shipping address, and send to the backend using publishable keys and INR.

Create actions and reducers for Stripe payments in a MERN app, handling place order, token, subtotal, and passing current user with cart items to the backend.

Learn to implement Stripe backend for a MERN pizza delivery app (frontend in React, backend in Node) by installing Stripe, building an orders route, and charging with an idempotency key.

Create an order model to persist details such as name, email, user, order items, shipping address, amount, status, and transaction id, using a mongoose schema with timestamps.

Save orders in the database after successful payment by creating an order from current user, cart items, subtotal, shipping address, and transaction id, stored in the orders collection.

Design the orders screen and implement redux actions and reducers to fetch the current user's orders, connect to a backend route, and display loading, success, and errors.

Design the orders screen for a MERN stack pizza delivery app by fetching user orders with Redux and displaying each order’s items, address, total, date, and transaction id.

Design and implement a filter component with an input field, a category selection, and a filter button, wired to dispatch actions in a three-column bootstrap layout.

implements filter component logic in the MERN pizza delivery app by defining actions and reducers, dispatching filter actions, and filtering by input values and category.

Explore the admin panel for the pizza delivery app, including adding and editing products, managing users and orders, and tracking app state with create, read, update, and delete tasks.

Design the admin panel with access and nested routes for users list, orders list, and add views. Validate admin rights on login and use router links to avoid page refresh.

Build the pizzas list screen in the admin panel, creating a table with name, prices, category, and actions; show small, medium, and large prices and provide delete and update icons.

Design and implement a pizza add form in a React app, manage name, category, image, description, and a prices object with small, medium, large, then prepare for database submission.

Add a new bizarre to the database by wiring frontend actions, reducers, and a backend route to post name, image, description, category, and small, medium, large prices.

Design an update screen for pizzas in the admin panel, prefill fields from a selected pizza, fetch by id via redux actions, and update the record to refresh the list.

Update pizza front-end logic focuses on implementing the bizarre component, copying variables and inputs, wiring state, dispatching update actions, and handling loading, errors, and success to reflect live data.

Implement the backend update logic for pizzas by receiving updated pizza data through the router and applying changes to name, description, images, category, and price.

Implement delete functionality in the admin panel of a MERN pizza delivery app by dispatching a delete action, posting to the backend, and refreshing the view.

this lecture guides building an admin orders list in a mern stack app, fetching all orders, displaying them in a bootstrap table, and delivering orders to update status.

Admins use a deliver button to mark orders as delivered, triggering a backend deliver order endpoint and refreshing the orders list after state updates.

Explore building a users list in a MERN stack pizza delivery app by fetching all users, enabling delete actions, and wiring Redux actions and reducers in the admin panel.

Apply final CSS to implement animate on scroll animations, margins, and padding for both user and admin panels, achieving production-ready styling.

Deploy a MERN stack pizza delivery app to the Hiroku server by pushing changes from GitHub, configuring the production environment, and setting client build paths and server scripts.

Push your MERN stack pizza delivery app to Heroku by connecting GitHub and publishing the repository. Prepare production environment code and the Heroku script to ensure a successful deployment.