MERN Stack React Node Ecommerce from Scratch to Deployment

Build a basic express server for an ecommerce API by installing express and dotenv, creating a home route, and running on port 8000 with nodemon.

Learn to set up a database using MongoDB Atlas, explore cloud Atlas versus local MongoDB options, and visualize collections, products, and categories with a tool called Robot 3D.

Create a user model and schema in a new models folder using mongoose, including name, email, hashed password with salt, role, purchase history, and timestamps for a MERN ecommerce app.

Define virtual fields and add password methods in a user schema to hash passwords with salt, enabling authentication and readying routes for user signup.

Register a new user in a mern stack app by posting to a sign-up route, using body-parser and cookie-parser, and saving via a mongoose model; test with Postman.

Sign up a user with Postman by sending a json body to the sign up route, including name, email, and password, and explore handling unique emails and friendly errors.

Implement a database error handler to produce friendly messages for duplicate key errors, expose only safe data, and sanitize sensitive fields like salt and hashed password.

Implement user sign in with JWT by validating email and password, generating a signed token, and storing it in a cookie to securely authenticate users.

Implement a user by id middleware that runs when a user id parameter is present in the route and attaches the user to the request as profile.

Create and apply isAuth and isAdmin middlewares to protect routes by validating the currently authenticated user and enforcing admin-only access with 403 errors.

Create a category model with a name and timestamps, then set up a category route and controller to handle creating new categories for the e-commerce section.

Learn to create categories in a MERN stack ecommerce app using postman, enforcing admin authentication with middleware, user population, and token-based access control.

Define a product model with fields name, description, price, quantity, shipping, and a category reference using a Mongoose schema, linking products to the category model.

Create a product by id middleware to preload a product, attach it to the request, handle errors, and expose a read single product route without heavy photo data.

Learn to delete a product in the mern stack ecommerce app by implementing a delete method, validating admin authorization, and returning a deleted product message.

Learn to implement category CRUD in a MERN app by building a category middleware, retrieving all and single categories, and supporting update and delete operations.

Learn to implement category management in a MERN stack ecommerce app by adding update, delete, and get all category routes, with admin authentication and proper request handling.

Learn to return products by sales or arrivals in a MERN e-commerce app using query parameters for limit, sort, and category population while omitting photos.

Fetch products using postman by applying request query parameters, sorting by sold or created date, and limiting results to retrieve relevant ecommerce items.

Implement a list by search feature that filters products by category and price range via a post request, and enable a shop page with skip and limit for load more.

Implement a product photo route as middleware in a MERN app, retrieving photo data from product control and sending it with the correct content type to the client.

Install the cors package in the api and apply it as middleware to enable cross-origin requests between the backend (port 8000) and the frontend (port 3001), preventing cross-origin errors.

Explore how React hooks enable state and other features in functional components using useState and useEffect. See how hooks replace class components and handle side effects, dramatically simplifying React development.

Learn why class components were used to manage state, lifecycle methods, and props, then transition to functional components with hooks, starting with a simple counter app and useState.

Build a simple React counter from a class component with state and an increment method, render the count, then refactor to hooks, using create React app.

Demonstrates using the useState hook to manage a count in a functional component, initialize state with a default value, update with setCount, and increment on action, then introduces useEffect.

Replace class lifecycle methods with the useEffect hook to manage side effects, and build a simple app that updates the document title as the count changes.

Learn to implement a React search input that updates a search query state and re-renders news using useEffect, with the query as the dependency.

Learn to control useEffect by waiting for a user submission instead of triggering on every keystroke, preventing default form submission, and updating the query only on button click.

Learn to implement a leading indicator using React hooks by managing a loading state with useState, showing a loading spinner while data fetches, and hiding it when data arrives.

Organize a React app by extracting loading, news fetching, and other user interface logic into separate functions for readability, and highlight server-side rendering benefits for search engine optimization.

Implement routing for sign up and sign in using React Router, wrap the app with a BrowserRouter, and build a home landing page to support a MERN e-commerce app.

Style the react app with bootstrap and build a navigation menu for home, sign in, and sign up using Link and withRouter, using isActive to highlight active link in orange.

Build a reusable shared layout component for the MERN ecommerce app, using props for title, description, and children to render content with a default value, including a jumbotron and menu.

Learn to implement a user signup flow by capturing name, email, and password, posting to the backend with proper headers, and handling responses and errors.

Demonstrates implementing user sign in in a React MERN app by sending email and password to the backend. Handles loading and errors and redirects to the dashboard upon success.

Implement sign out by removing the token from local storage, calling the backend logout API, and redirecting the user to the home page while updating navigation.

Show or hide sign in, sign out, and sign up links with a localStorage-based isAuthenticated helper, and build a flexible admin and user dashboard for a MERN ecommerce app.

Display user information such as name, email, and role on the Despard dashboard, show purchase history from authenticated data, and redirect by role to admin or user dashboards.

Add and organize user dashboard links, including cart and profile, on a left panel with a right panel for user info and purchase history, using a 12-column grid and components.

Build a private admin route by validating authentication and the admin role, redirecting non-admins to login or home. Prepare admin dashboards and future categories and products management.