MERN From Scratch | eCommerce Platform

Structure a pro shop project with a front end built with create react app, a back end with express and mongoose, and an initial git workflow with a remote repository.

Install and configure react bootstrap, bootstrap CSS, and react icons to build a header and footer for MERN eCommerce front end, with a navbar including brand, login, and right-aligned cart.

Apply a custom bootstrap theme to your MERN eCommerce platform by importing bootstrap CSS from assets styles and adding a logo to the header for a distinct look.

List dummy products from a products array with fields like underscore id, name, image, price, stock, and rating, and render them on the home screen as React Bootstrap cards.

Connect to the database with mongoose and define a products model with a schema including product name, price, and description.

Seed your MERN e-commerce database by running a dedicated seed script that wipes and resets users, products, and orders using mongoose models and an admin user.

Overwrite Express's default error handler with a custom middleware that handles 404 not found and cast errors, returns a json message with stack trace in development, and wires into server.js.

Organize Express backend by creating a product controller with get products and get product by id, using an async handler and a router.route setup, and prepare for Redux in front-end.

Create a products API slice and a get products endpoint using Redux Toolkit, inject endpoints, and fetch data with use get products query while handling loading and errors.

Create a loader and a message component with React Bootstrap in a MERN e-commerce app. Validate spinner, alert messages, and variant defaults on home and product screens.

Master adding items to cart in a MERN eCommerce app by managing quantity state, showing a stock-aware selector, and dispatching add-to-cart with navigation and local storage.

Build a cart screen with add-to-cart flow, cart item listing, quantity controls, item removal, and a subtotal with proceed-to-checkout using React and Redux.

Implement JWT-based authentication using a cookie parser to read an http-only jwt cookie, protect routes with user and admin middleware, and attach the user to requests.

Learn to implement secure user profile endpoints in a MERN app by retrieving and updating profile data, handling authentication via cookies, and safeguarding password updates.

Create a login screen with a reusable form container and sign-in form, featuring email and password fields, React Bootstrap, local state, and a link to register.

Implement a register mutation and register screen in a MERN app, posting name, email, and password to /register, validating password confirmation, and auto-signing in after registration.

Build a four-step checkout steps component in React showing sign in, shipping, payment, and place order, with steps enabled or disabled based on current step.

Create an order details page in a mern app by fetching order details with a get order details query and displaying shipping, payment, items, and totals.

Update and display user profile data, including name, email, and orders, using a put /profile mutation and a profile screen form with real-time state updates and credentials handling.