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.

Implement react-router-dom in the front end, install it, configure createBrowserRouter with createRoutesFromElements and an outlet in index.js, and replace anchors with Link and react-router-bootstrap link containers for the nav.

Add a rating component that renders full, half, and empty stars based on a numeric value and shows the number of reviews beside it, and integrate into the product card.

Build a product details page that uses useParams from react-router-dom to get the id and display image, name, rating with reviews, price, stock, and add-to-cart button.

Install nodemon and concurrently as dev dependencies, then set up scripts to run the backend with nodemon and the frontend with dev command that starts both and uses environment variables.

Learn to configure environment variables with the dot env package, define a dot env file for port and node environment, restart the server, and run the dev script with concurrently.

Fetch products from the back end using Axios with a development proxy, and fetch a single product in a React component using useEffect and useState.

Set up a MongoDB Atlas cloud database for your MERN e-commerce app by creating a free M0 cluster, configuring a user, and storing the connection string in a .env file.

Download and install Compass, a cross-platform desktop app, then connect to Atlas with the copied connection string, and explore the pro shop database by viewing and editing the products collection.

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

Model and implement a full data layer in a MERN app by defining product, user, and order schemas with mongoose, including reviews, timestamps, and references, then seed sample data.

Prepare seed data by creating product and user seed scripts in the data folder, removing ids, hashing passwords with bcrypt.js, and exporting dummy users including an admin for database seeding.

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.

Set up Postman with a workspace, environment, and a products collection using a base URL variable for http://localhost:5000/api to test the backend. Prepare for fetching products and future database integration.

Create a dedicated product router linked to api/products, fetch all products with the model's find, and wrap routes with a custom async handler to return 404 when not found.

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.

Explore how Redux and Redux Toolkit simplify state management by centralizing app state, enforcing updates via dispatched actions and reducers, and differentiating component state from global state.

Learn to set up a Redux store with Redux Toolkit, create an API slice and product, user, and order endpoints, and connect via React-Redux to manage server data efficiently.

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 get product details query with Redux Toolkit to fetch a single product by id and integrate it into the product screen.

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.

Create a cart slice using Redux Toolkit, initialize state from local storage, and implement reducers for add to cart, remove, and save shipping address and payment method.

Build an add to cart reducer in a MERN eCommerce app, handling item payloads, quantity updates, shipping and tax calculations, with local storage persistence, and export as an action.

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.

Learn to display the cart item count in the header by using React Redux useSelector to read state.cart, compute total quantity with reduce, and show a badge when items exist.

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 remove from cart by updating the cart slice and wiring a delete action that updates local storage and UI. It covers checkout redirects to login with Json web tokens.

Create a complete user authentication backbone by scaffolding user routes and controllers, implementing login, register, logout, profile management, and admin user controls via api/users.

Demonstrates building login in a MERN app by parsing JSON and URL-encoded bodies, validating a user by email, and comparing passwords with bcrypt, returning user data or a 401 error.

Learn how json web tokens enable secure authentication between server and client, with header, payload (user id/role), and signature, stored as http-only cookies.

Implement json web tokens in the backend by creating a 30-day signed token and storing it in an http-only cookie named JWT with secure and same-site settings.

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 how to log out a MERN e-commerce user by clearing the JWT cookie with an http-only flag and immediate expiry, tested via Postman on protected routes.

Learn to build a secure MERN registration endpoint with input validation, existing-user checks, bcrypt password hashing in a pre-save hook, and a reusable JWT cookie generator.

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 redux auth flow with an auth slice managing local storage credentials and a users API slice for login via post to /users/auth, using jwt in http-only cookies.

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 login flow by calling the login mutation, store user details in local storage via the auth slice (not the token), show toast errors, and redirect after login.

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 the shipping screen, capture address details, save them to the cart state and local storage, and proceed to payment with a default PayPal method.

Learn to build a private routes component using React Router Dom and Redux to protect shipping pages by redirecting unauthenticated users to login, with outlet rendering for authorized users.

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.

Implement a payment screen that saves the selected payment method to cart state and local storage, with PayPal as default and forward navigation to shipping and place order steps.

Create and manage order routes and an order controller in a MERN ecommerce backend, including add order items, get my orders, and admin routes for pay, deliver, and all orders.

Create and validate orders by parsing the request body, map items to product IDs, then save and retrieve user orders or a specific order with user name and email.

Implement an order API slice and a place order screen, introducing a create order mutation, clear cart items on order placement, and redirect checks for shipping address and payment method.

Finish the place order flow by wiring the UI to create order mutation, show order items and totals, manage cart state, and navigate to the new order.

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.

Implement a put route to mark orders as paid, wire the PayPal API, and expose the sandbox client ID via /api/config/paypal for the frontend.

Install the React PayPal JS package, wrap the app with PayPal ScriptProvider, and configure the pay order mutation and client ID query to enable PayPal buttons on the order screen.

Implement PayPal buttons in a MERN eCommerce app with React PayPal JS, destructured order data, and conditional unpaid-order rendering, plus loading, order creation and approval, and sandbox testing.

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.

Display order history on the user profile by querying the backend for the current user's orders, then render a responsive table with id, date, total, paid and delivered status.