MERN E-Commerce with Razorpay & Password Reset Email

Connect your MERN backend to a MongoDB database using mongoose, configure a db.js with a local MongoDB URI and a connect function, and import it in server.js.

Create a product schema with mongoose, defining fields for name, description, price, stock, category, images, and reviews, then export the product model for MongoDB.

Create a product API by wiring the product model, building an asynchronous create function, using express.json to parse request bodies, posting to MongoDB products collection, and returning the created product.

Implement get all products in the product controller using an async function and the find method to retrieve all documents as a products array, and test with postman.

Update products in a MERN app by implementing a put route that updates a product by id using find by id, request body, and validators to return the updated product.

Delete a product in a MERN e-commerce app by using find by id and delete, wiring the delete route, and testing the operation with Postman.

Learn to implement get single product by id, handle not found, and return 200 with the product; refactor routes to remove duplicate update and delete logic.

Build robust backend error handling by creating a custom HandleError class (extends Error), implementing error middleware, and using next with 404 and 500 status codes in the product controller.

Wrap async express controllers with a handle async error middleware to catch validation errors from MongoDB and forward them to error handling, preventing server crashes.

Handle uncaught exception errors in a server script by using process.on('uncaughtException'), log the error message, and exit the process to prevent crashes.

Identify and handle MongoDB cast errors when an invalid id is provided, display an invalid resource message with the affected path using a custom error class and error handling middleware.

Develop a dedicated API functionality class to parse the query string and keyword, enabling filtering, case-insensitive name search, and pagination for products.

Implement filter functionality to search products by category in the API. Create a query copy, remove page, keyword, and limit fields, and apply the remaining category to a find query.

Learn to implement API pagination in a MERN app by configuring results per page, deriving the current page from the query string, and applying skip and limit to fetch products.

Learn to implement robust pagination in a mern e-commerce app by building a filtered query, counting products, calculating total pages, and validating page requests.

Define a user schema for backend authentication by creating a user model with name, email, password, avatar, role, reset password token and expire fields, and timestamps, using mongoose and validator.

Register a user with a controller and route, using an async error middleware to validate name, email, and password, and a post /api/v1/register endpoint returning status 201.

Explore hashing user passwords with bcrypt js in a MERN app, using a pre-save hook to hash only when the password is modified, and manage profile updates and password changes.

Generate a signed json web token (jwt) to authenticate and authorize users by encoding the user id as payload, signing with a secret key, and expiring in three days.

Handle MongoDB duplicate key errors in a mern e-commerce app by intercepting the error code and returning a user friendly message like email already exists with a 400 status.

Implement login functionality by validating email and password, retrieving the user by email with password access, generating a JWT token, and returning the token and user details on success.

Verify the entered password against the stored hash using bcrypt js in a custom user model method, so login occurs only when email and password match.

Refactor the MERN e-commerce auth by creating a jwt token helper that generates a token and stores it in an http-only cookie with expiry, used in login and registration.

Authorize users in a MERN app by validating cookies and JWTs to grant access to all products, using cookie-parser, verify user auth middleware, and protected routes.

Implement logout functionality by expiring the authentication token in a http-only cookie and setting the token to null. Ensure access to products and checkout requires reauthentication after logout.

Learn how role-based authorization controls admin and user access in a MERN e-commerce app, distinguishing authentication and permissions to create, update, delete, or view products.

Link product to the user model by referencing the user id in the product schema, and assign the admin's id from the request during product creation to track ownership.

Generate a secure reset password token with crypto random bytes, hash it using sha256, and store the hash with an expiration in the user schema; return the plain token.

Implement the request password reset function in the user controller, generate and hash a reset token, store it with expiry, and expose a password forgot route.

Generate a reset password link containing the token, email it to the user, and enforce a 30-minute expiry stored in the database, then clear token and expiry after reset.

Develop a complete reset password flow in a MERN app, generating and hashing a reset token, sending a password reset email, and validating token expiry before updating the password.

Learn to implement an authenticated get user details endpoint in a MERN app, retrieving the logged-in user's profile by id and returning complete user information.

update user password in a MERN e-commerce app with Razorpay, by verifying the old password, ensuring new password matches confirm password, hashing, and saving after authenticating the user.

Update user profile enables changing name and email, with future profile picture support, via findByIdAndUpdate in MongoDB with runValidators, returning the updated data after authentication.

Learn to implement admin-only authorization in a MERN e-commerce app by configuring role-based access for product routes, updating to admin paths, and enforcing authentication for create, update, and delete actions.

Set up an admin-only get all products endpoint with authentication, admin authorization, and product querying using find, including pagination, search, and filters.

Fetch all users via an admin-protected MERN endpoint, using user.find() to retrieve every user and return a 200 response with the complete users list, enforcing admin-only access.

Admin fetches a single user by id via a get route, validates login, and responds with the user data or an error if not found.

Admin-only functionality updates user roles by destructuring the role from the request body and updating the user by ID, with admin authorization and error handling for missing users.

Delete a user profile as an admin by verifying login, locating the user by id, and removing the user with a 200 success response.

Learn to fetch product reviews in a MERN e-commerce app by querying the product id, handling not found errors, and returning the product's reviews accessible to all users.

Learn to delete a product review by product and review IDs, enforce user authentication, and update the product’s reviews, average rating, and review count in the database.

Develop the order API by modeling a mongoose order schema with shipping info, order items, user and product references, and Razorpay payment id, status, and pricing.

Learn to create a new order in a MERN app by building the order controller and routes, destructuring shipping, items, and payment data, and saving the order with user association.

Fetch a single order by ID via admin/order/:id, with role-based access and populate user name and email.

Fetch all orders for the currently logged-in user by using the user id in a find operation and return a 200 status with the orders.

Create an admin-only endpoint to fetch all orders from the order model and calculate the total amount by summing each order’s total price, returning the results.

Update order status and concurrently adjust each order item's product stock on delivery, saving updated stock in the product model and ensuring admin-only actions.

Implement a delete order function that finds an order by id, throws 'no order found' if absent, and deletes only the matching order when delivered, with admin-only access.

Set up the front end for the MERN e-commerce project by creating a React app, installing dependencies, running the dev server, and configuring routes with react-router-dom.

Build a responsive MERN e-commerce navbar with links, a search form using a material ui icon, a cart badge, a mobile hamburger menu, and authentication-based icon visibility.

Build an auto-rotating image slider in a React MERN e-commerce app by mapping banner images from public/images, cycling slides, and enabling dot navigation via current index and translateX.

Start the backend server and connect MongoDB, fetch and render two products in a React frontend, and implement product components, props, and routing by product id.

Build a rating component for a MERN e-commerce app, featuring five stars, hover and click to rate, displaying average rating and reviews, with a disabled state and rating change handling.

Create a reusable page title component that updates the document title via useEffect based on a title prop, enabling consistent page titles across home and product pages.

learn to implement state management with redux toolkit by creating a product slice, setting up initial state and reducers, configuring the store, and providing it to the app via react-redux.

Fetch products API data using redux toolkit create async thunk, axios get requests, and extra reducers to manage loading, error, and product data in the MERN e-commerce course.

Access the full product list from the backend with a Redux toolkit slice, using useSelector and useDispatch to fetch on mount, and render data in an image slider.

Configure a local proxy to connect the frontend on port 5173 with the backend on port 8000, enabling access to products, pagination data, and images.

Learn to implement a loading component and toast-based error messages in a MERN app, showing a loader during pending states and auto-dismissing backend errors after display.

Build a dynamic product details page in a MERN app by routing to /product/:id and rendering image, title, description, price, stock, and user reviews.

Render product details in the UI by fetching data via Redux using the URL id, handling loading and errors, and displaying title, image, price, ratings, and reviews.

Implement conditional rendering for product stock and reviews to build a dynamic product details page. Show in-stock versus out-of-stock indicators and render reviews using product.reviews, with no reviews messaging.

Explore filter features, including search, categories, and pagination, by creating a toggleable, controlled search input with a submit handler that navigates to products using a safely encoded keyword.

Learn keyword-based product search in a MERN app. Pass a dynamic keyword via the url, parse it with React Router, and query the backend by product name.

Build and navigate a paginated product list by connecting the backend's product controller to the app's state, displaying four products per page and enabling first, last, and page navigation.

Build and render an advanced, reusable pagination component for a six-product demo, displaying four items per page with first, previous, next, and last controls and dynamic page numbers.

Learn to handle page changes and render a reusable pagination component by syncing URL page parameters, updating state, and preventing unnecessary rerenders in a MERN app.

Implement category filtering for products with dynamic url parameters, manage pagination, and display appropriate messages for no results or errors when users search by category or keyword.

Develop the registration front end by wiring the register component to app routes and building a reusable sign up form with username, email, password, and avatar input with live preview.

Implement a single onchange handler to manage name, email, password, and avatar fields, updating the user state and rendering a live avatar preview via a file reader and data url.

Implements a register submit handler to prevent default form submission, validates required fields, constructs a FormData object, iterates entries, and previews data flow from front end to backend.

Create a registration API in a MERN app by building a user slice, using createAsyncThunk with axios post to /api/v1/register (multipart form data), and handling loading, error, success, and authentication.

dispatch register actions in a MERN e-commerce app using useSelector and useDispatch, passing user data and handling success and error states.

Create a login form in a MERN app by building login.js, wiring routes, and styling with form.css; implement controlled email and password inputs with onChange and onSubmit.

Explore the login async operation in a MERN app by adapting the register flow to send email and password via json, and manage pending, success, and error states.

Dispatch the login action and monitor the user state with selectors, using isAuthenticated to navigate to the home page on success, and show a toast on successful login.

Set up Cloudinary for media management in a MERN e-commerce app by installing express file upload and Cloudinary, configuring cloud name and keys via config.env, and using uploader.upload for images.

Implement avatar uploads for user profiles in a MERN e-commerce app by using express file upload and cloudinary, storing public id and secure URL during registration.

Load the logged-in user profile by creating a load user API in the user slice, handling loading, success, and error states for authenticated sessions and profile retrieval via API/v1/profile.

Dispatch load user on app mount only when authenticated, then render the user dashboard with complete user information and avatar using React Redux selectors and dispatch.

Build a dynamic user dashboard in a MERN app, displaying the logged-in user's profile picture and name, and rendering reusable menu options (orders, account, logout) with admin-only dashboard access.

Dispatch logout using redux toolkit unwrap to return promises, toggle a menu to reveal options with an overlay, and navigate to login on success while handling errors.