React Redux Ecommerce - Master MERN Stack Web Development

Set up a front-end React project for an ecommerce app using Create React App, create a back-end and a client folder, and run npm start to view in the browser.

Install and configure React Router DOM to create routes for home, login, and register, wrap the app in a browser router, and set exact paths.

Build a Bootstrap CSS based layout and an Ant Design navigation menu to route between login and register pages, using a header component, stateful menu, and icons.

Use ant design icons in a React Redux ecommerce navbar; update state on click with event keys, set home as default, and prepare login and register items for right alignment.

Bring in the Link component from react-router-dom to make navigation clickable, wiring home, register, and login paths for a responsive app using bootstrap and firebase authentication.

Build a phone registration form with email verification, sending a confirmation link via Firebase, storing the email in local storage, and guiding users to complete registration by entering a password.

Implement email link sign-in with Firebase in the register flow, sending a sign-in email, showing a toast notification, storing the email in localStorage, and preparing a complete registration page.

Configure environment variables with a dot env file and access them via process.env, ensuring they load after restart. Move the toast container to the top-level app to enable toast notifications.

Create a complete registration page that pre-fills email from local storage, includes a password field, and redirects after sign-in via firebase email-link passwordless authentication, then updates the password.

Implement passwordless registration with firebase using sign in with email link, verify email, and update the password for logins. Manage auth state with redux and handle token, storage, and redirection.

Set up Redux to create a global state for the user and token from Firebase, wire a root reducer with a user reducer, and enable Redux DevTools.

Update the Redux state with the Firebase authenticated user by subscribing to auth state changes, extracting the user email and id token, and dispatching a logged in user payload.

Implement a logout flow in the header dropdown by signing out from Firebase auth and clearing Redux state. Redirect to login and display the user’s name derived from their email.

Create the login page by adapting the register form to include email and password, placeholders, and a styled login button, with plans to use Firebase login and Google authentication.

Sign in with email and password via firebase auth, obtain the user id token, dispatch user and token to redux, handle errors with toast, and redirect to home.

Conditionally render navigation links based on user state using useSelector and dispatch in a Redux app, showing login/register when logged out and a user dropdown with logout when signed in.

Learn how to implement a forgot password flow in a React Redux app using Firebase. Create a forgot password link, send a reset email, and handle password reset redirects.

Redirect a logged-in user away from login and register pages using react redux hooks. Check the user token with useSelector and useEffect, then push to the home page.

Set up a backend API with Node and MongoDB. Validate Firebase token on the backend using Firebase Admin and store user data in MongoDB, enabling role-based redirects and Redux updates.

Set up a backend API by creating a server folder, running npm init -y, and installing core packages (express, body-parser, mongoose, cors, morgan) to connect to MongoDB and handle tokens.

Choose between a local MongoDB install or MongoDB Atlas to set up your database, then create a free cluster, whitelist IPs, and copy the connection URI into your env file.

Set up a node.js backend for a react redux ecommerce app by configuring mongo db (atlas or local), a dot env file, and an express server with mongoose.

Learn to auto load all route files by reading the routes directory with the fs module, dynamically require them, and apply them as middleware with a prefixed path using app.use.

Move route logic from roots into controllers, export and import functions, and use destructured exports to autoload routes while defining a user schema with name, email, and password.

Define a user schema and model with mongoose, including name, email (required and indexed), role, cart, address, and wishlist references, and enable created and updated timestamps.

Use a firebase admin based middleware to validate the front-end token from request headers before the controller. Wire the auth middleware into routes with next to pass user info.

Send the user token from the front end to the backend via axios with an auth header; the auth check middleware verifies it and Firebase admin tool retrieves user data.

Verify Firebase ID tokens in an Express middleware, then create or update users in the database using email, name, and picture for registration and login.

Learn how the API user response extends authentication data with name, role, and id, updates redux state on login and register, and persists user details through refresh via user endpoint.

Create a backend current user endpoint that authenticates with Firebase, returns username, role, and user ID by email, and fetch it on page load to sync Redux.

Implement role based redirects after login by inspecting the response row. Dispatch actions and route admins to /admin/dashboard and non-admin users to /user/history.

Create a loading to redirect component that shows a five-second countdown and redirects not logged in users to the homepage on a protected route, using useHistory, useState, useEffect, and setInterval.

Create a dashboard with a persistent left sidebar for user history, password, and a future wishlist, rendering content in the main area via react-router-dom links and firebase-powered password updates.

Build a password update page using Firebase auth, manage loading and form state, validate input, and display success or error toasts in a user dashboard.

Implement an admin check middleware to protect admin routes by verifying the user's admin role via backend validation. Use the existing auth middleware and return 403 if not admin.

Protect admin pages by verifying the current admin via a backend endpoint, using useEffect and auth/admin checks, then conditionally render the admin route and dashboard.

Learn to set up an ecommerce backend by creating category and subcategory schemas with full CRUD for admins. Then implement frontend integration to manage categories and start creating products.

Create a category schema using Mongoose with name and slug fields, applying trim, required, and length constraints. Export the model and prepare crud routes to manage categories in the backend.

Create and protect category routes and controllers for a MERN stack app by implementing CRUD endpoints with auth and admin middlewares, including listing and slug-based querying.

Learn to create categories in a React Redux ecommerce app using slugify to generate slugs, implement async create with status-based error handling on protected routes, and test with Postman.

Explore create, read, update, delete and list operations for categories in a mern app: list all categories, read a category by slug, and update or delete with slug-based routes.

Develop frontend category CRUD in a MERN app by implementing get all categories, get a single category by slug, and create, update, and delete methods with token-auth headers.

Create a dynamic dashboard link that redirects admins to admin/dashboard and subscribers to user/history, and implement a sidebar navigation for categories and products on the admin dashboard.

Develop and integrate an admin sidebar nav for the admin dashboard, introduce admin routes for category, products, and coupons, and implement create, read, update, and delete operations.

Create and list categories in a protected admin interface by building a React form, fetching categories on mount, and updating the list after creation using redux token and toasts.

Render categories with map, display category names, and provide edit and delete actions for admins, including a delete confirmation and backend removal by slug, then refresh the list.

Learn to add a category update page, fetch a single category by slug, pre-populate the form, and update the category with a redirect to the category list.

Learn to implement a searchable category list by tracking a keyword in state, wiring a search input, using a higher-order function with lowercased includes checks, and filtering categories.

Refactor the filter by extracting the search input into a reusable local search component, enabling keyword handling via props for reuse across categories, subcategories, and products.

Create a sub categories CRUD workflow by modeling sub categories with a parent reference to categories, mirroring the categories backend, and wiring routes, controllers, and frontend pages for full management.

Builds the front end for subcategories by creating a sub create page, adding admin navigation, and implementing CRUD API calls for subs with the same backend patterns as categories.

Create subcategory page in React Redux ecommerce app by fetching all categories, selecting a parent from a dropdown, and submitting name and parent to create a subcategory; handle validation errors.

Explore how to show sub categories, load subs alongside categories, and manage create, delete, and update actions in an admin interface, with filtering and real-time list refresh.

Develop the sub category update page by reusing the create flow, fetch a single sub by slug, populate name and parent, and submit the update.

Advance to back-end product creation by linking categories and subcategories, supporting multi-image uploads and updates for existing products; implement star ratings, cart, checkout with Stripe, and orders.

Define a product model with a Mongoose schema, including title, slug, description, price, category, subcategories, images, shipping, color, brand, ratings, and timestamps; export the model and prepare routes for crud.

Create a product backend by implementing a post /product route, admin middleware, and a create controller that saves a new product with a slug generated from the title.

Build the product creation page on the front end for the admin panel, starting with title, description, price, shipping, colors, and brands, then add features like categories and image uploads.

Build a product create form in React Redux by managing a single initial state object, handling dynamic input changes, and submitting to the backend to create a product.

Implement a dynamic handleChange to update product form state via event.target.name and value with the spread operator. Submit with createProduct using form values and user token, logging responses and errors.

Explains how to finalize product creation by displaying a browser alert with the created title, optionally reload to reset the form, and debug via the network tab during development.

Improve product creation by surfacing precise backend error messages in the frontend using axios, handling mongoose errors, and displaying specific messages like duplicate key errors for admins.

Create a public get endpoint to fetch all products, returning json from the product model, with plans to populate category and subcategory details.

Refactor the product creation flow to fetch and populate all categories in a dropdown, using get categories, useEffect, and state updates to attach category IDs to new products.

Select a category to reveal its sub categories; send the category ID to the backend, query subs by the parent ID, and return results for the dropdown.

Fetch subcategories by category id on the frontend by calling get category subs on category selection, and populate sub options for the product create form under the parent component.

Pass sub options as props to the product create form and toggle a show sub state so subcategories appear only after a parent category is selected, using an inline select.

Learn to implement Ant Design's multi-select for subcategories in a product form, managing an array of selected subs and wiring onChange to update state for backend creation.

Learn to implement multi image uploads in a React Redux ecommerce app by wiring Cloudinary endpoints, resizing images on the client, and saving image URLs with product data.

Configure cloudinary in a MERN stack ecommerce app by creating admin-protected upload and remove endpoints, wiring env credentials, and using cloudinary npm to upload and destroy images.

Resize images on the client with a reusable file upload component, then upload to cloudinary and store the returned URLs in the product images array for create and update flows.

Resize images client-side in React using the React image file resizer, handle multiple files, and send base64 data to the server with axios for protected cloudinary uploads via Redux token.

Upload multiple images by sending resized base64 data to the backend via axios, update a shared images array in state, handle loading, and store returned urls for database use.

Preview uploaded images as client-side resized thumbnails, enabling fast uploads and smaller file sizes, then render avatars from values.images with image urls.