Web Development MERN Stack + Redux Project, Ecommerce SaaS

Set up the MERN stack project environment by installing Visual Studio Code, Node.js with npm and nodemon, MongoDB, and key VSCode extensions for React and Redux workflows.

Set up the back end for a MERN ecommerce project by configuring npm, installing key dependencies, and building a simple Express server that returns hello world on the root route.

Define APIs and position them as the bridge between backend and frontend in a MERN stack, enabling RESTful data exchange via JSON using Express, Node.js, and MongoDB, with async handling.

Connect your server to MongoDB by building a config/db connection module, using a .env file with process.env for the URL and port, and configuring express, cookies, and CORS.

Define a mongoose user model with email, password, first and last names, profile photo, subscriptions, verification tokens, and saved product references, then implement a register flow in the MERN backend.

Create a user registration route using express, handle POST /api/users/register, hash passwords with bcrypt, store in MongoDB, and issue a JWT token as a cookie for authentication.

Finish the user model by implementing account verification and password reset token logic, generating 32-byte random hex tokens, hashing with sha-256, storing hashed tokens, and setting ten-minute expiry.

Code the products model using Express and Mongoose, defining fields for title, description, ad copy, creatives, pricing, images, external links, keywords, and a user reference, with timestamps.

Finish implementing the users controller to create a Stripe customer and store its ID on new users, then complete the products controller and middleware routes, and test registration.

Develop the login logic to authenticate a user via postman, create and store a cookie, and sign a JWT token, using bcrypt for password verification and a login route.

implement a jwt-based auth middleware to verify tokens from headers or cookies and attach the user to the request. guard routes and enable fetching user details via the attached user.

Create a simple fetch all users controller that uses a basic find query to retrieve every user from the user collection and return them.

Fetch all Stripe subscriptions by listing prices with an async route, using try/catch and await. Return a 200 response with success and the prices data for linking users to plans.

Develop a password update flow in a mongoose controller using async handler, bcrypt compare and hash with salt rounds 10, save updated user, and expose a put update password route.

Implement the forget password flow by building a NodeJS password reset controller that generates and stores a token and sends a reset link via SendGrid.

Finish the reset password flow by validating the email token, hashing the new password with bcrypt, clearing the token and expiry, and saving the updated user via an unauthenticated route.

Implement the first part of verify account by sending a Gmail verification email, generating a token, and saving updates to the user before clicking the link.

Verify a user’s account after clicking the email link by hashing the URL token, confirming it matches the stored token and is not expired, then mark the user as verified.

Enable updating allowed user fields through a secured put route in express.js with mongoose; authentication supplies the user id, updates apply, and the updated user is returned with password hidden.

Implement save product functionality by retrieving the product id, pushing it into the user's saved array with duplicate checks, and returning a populated saved list for the frontend.

Implement unsafe product logic to remove a product from a user's saved array, updating the user via find by id, update, and populate operations, with upcoming stripe checkout integration.

Create a Stripe checkout window to finalize purchases by generating a checkout session with the user, price ID, and success or cancel URLs for a hosted Stripe flow.

Update a user's stripe subscription status and transition their role to subscriber in a mern stack app by retrieving the stripe customer id, listing subscriptions, and updating the user model.

Build a Stripe subscription portal flow: create a portal session URL for users to manage subscriptions and update user roles after cancellation, revoking access when the period ends.

Implement Stripe subscription renew logic in a MERN stack app, updating the user's subscription status after renewal and labeling active till end or active based on renewal.

Show how the front end connects to the back end through the user controller logic, endpoints, and authentication, with Postman testing and json responses used by Redux and Axios.

Build the products controller in a MERN stack ecommerce SaaS, create the first product with title, ad copy, and description using the product model, and wire up routes and auth.

Configure multer to handle multipart form data using disk storage, then upload images to Cloudinary via a dedicated middleware, with environment variables for cloud name, api key, and secret key.

Configure cloudinary v2 and multer to upload images and videos in a MERN app, save image URLs, and organize media into images and creatives for the front end.

Master updating the user controller to populate saved products, implement save/unsave product logic, and fetch all products with authenticated, sorted results in a MERN stack ecommerce project.

Fetch three free products with an async handler in a MERN stack ecommerce SaaS, sorting by createdAt and populating the user, accessible without authentication.

Create and export a fetch paid products controller that queries products where free is false, sorts by creation date with newest first, and requires user authentication for subscription.

Implement and test API endpoints to fetch TikTok, Facebook, and Google products for premium users, filtering by best platform to sell, populating user data, and sorting by newest.

Fetch a single product by id using an async handler, get the id from request params, populate the user, and return the product (free or paid) with a 200 status.

Update the product logic in the products controller by finding by ID, applying request body changes, associating the editing user, and returning the updated product with a 201 response.

Implement delete product single and delete all endpoints in your MERN backend, using mongoose findByIdAndDelete and deleteMany. Secure these routes with admin authentication and expose RESTful delete routes for products.

Explore how Redux and Redux Toolkit manage application state through a central store, actions, and reducers. See how dispatching updates creates predictable UI changes and enables efficient debugging.

Learn redux toolkit by building a small project with a counter and API posts. Create a store with slices and async thunk, and explore persisting state.

Build a Redux store with Redux Toolkit, create counter slices, and wire the provider, actions, and selectors to manage and display state in a React app.

Learn to fetch data from an API using createAsyncThunk in Redux Toolkit, using axios get requests, handling loading and errors, and rendering posts in the UI.

set up the react app for the front end and launch the local server. clean starter files and add a redirect file for spa routing.

Install and configure Tailwind CSS to style the site with Tailwind CSS classes. Import the Google font Poppins and update tailwind.config.js and index.css.

Install redux, redux toolkit, axios, cloudinary video player, file saver, react cookie, react icons, router, dropzone, moment, select, yup, and html5 video to set up the mern ecommerce app.

Explain the purpose of key dependencies in the MERN stack ecommerce project, including axios for requests, cloudinary video player, file saver, js-cookie, react dropzone, react moment, yup, and redux toolkit.

Set up a Redux store with Redux Toolkit, configure reducers for users and products, and apply middleware to disable the serializable check. Scaffold async thunks with Axios for user registration.

Create a utils folder with base url and date formatter using moment for axios, configure headers and credentials, then store user info and token in local storage after registration.

Test the register slice in a MERN Redux ecommerce app, wiring a register component to the backend post request and configuring routes with React Router and cookies.

Complete the register component by wiring the form (name, surname, email, password) to redux actions, handle errors, and ensure proper redirects and local storage user persistence.

Implement the login user action with createAsyncThunk, perform a post to /api/users/login, handle errors, and persist the user in local storage and app state.

Create and wire the login JSX component, convert anchors to links, set up routing to /login, and validate inputs with Yup via formic while dispatching login actions with Redux.

Modify the login form with formik, bind email and password, and dispatch the login action to authenticate via the api/users/login endpoint and store the user in local storage.

Implement a robust logout flow in a MERN stack project by creating a Redux logout action, clearing local storage and cookies, and navigating to login.

Fetch user details via a Redux async action that calls the backend with Axios, stores the user in localStorage, and updates the store with the returned user data.

Implement save product functionality by sending the product ID to the backend with Axios and updating the user's saved array in Redux and local storage.

Develop the unsave a product action by wiring async logic to call the unsave endpoint, update the user's saved products in state and local storage.

Fetch stripe subscription prices and plans from the backend with Redux createAsyncThunk and axios get, hitting the stripe prices endpoint and updating state with extra reducers.

Develop a send email feature in a MERN stack app by building a send email controller and route, integrating SendGrid and a bad words filter, with Redux-triggered API calls.

Create a Stripe session using the price ID, post to the API, receive a session URL, and open the hosted checkout window for users.

Update stripe subscription after successful payment: update the user's subscription status to subscriber via a backend endpoint, refresh Redux local state, and redirect to the success page.

Code the customer portal access in a MERN stack app by fetching the stripe portal URL via an async Redux thunk and opening it in a new window.

Code an async thunk to fetch all users with an Axios get request in a Redux Toolkit setup. Manage pending, fulfilled, and rejected states with server and application error handling.

Implement a change password flow in a MERN stack app by building an async update password action, calling the API, handling responses, and ensuring the updated user excludes password.

Implement password reset by sending a reset url to the user's email, dispatching a Redux action, calling the backend with axios, and updating the state with the reset url.

Develop the password reset flow after users click the reset link by sending password and token via an axios put request, handling responses with a Redux async action and reducers.

learn to implement sending a verification email with a token, wiring a redux action and backend endpoint to deliver a verification URL to the user.

Showcases verifying a user after clicking the verification link with a put request, token handling, redux updates, and local storage of the verified user.

Learn to update a user field like the first name using redux and axios, wiring a front-end form to a back-end endpoint and reflecting changes instantly in ui and database.

Implement the subscription update after cancel flow in the MERN stack, wiring the Redux user slice to refresh subscription status after cancellation and test via the customer portal.

Master updating subscriptions after renewal in a MERN stack ecommerce app by implementing a put request, syncing frontend state with redux slices and local storage, and coordinating stripe renewal flows.

Create a product slice with Redux Toolkit, implement a create product async thunk, send multipart form data to api/products/create product, and redirect the user on success.

Learn to fetch all three and paid products using Axios in a Redux setup, copy and adapt boilerplate, wiring async thunks and reducers to retrieve product data from API endpoints.

Implement redux async actions to fetch TikTok, Facebook, and Google products, configure endpoints and extra reducers, and test with UI buttons while handling token expiration.

Code and test a fetch single product action in a Redux slice using axios get to /api/products with the product id from params, and extend to fetch free products.

Implement update product fields in a MERN stack app using a dynamic id from the payload and a put request in an async thunk to modify title, description, and competitiveness.

Develop delete single product and delete all products functionality in a MERN stack app using Redux and axios, wiring endpoints with request params and payload through Redux reducers.

Create a responsive navigation bar in a mern-redux ecommerce app. Clean the home page, set up imports, and wire user state, routing, cookies, and admin checks for dynamic UI.

Continue building the navbar to show admin create product link, premium versus free products, render dynamic user details, and toggle the mobile menu with login and logout.

Replace the home page component with a downloaded home page component, configure react, router, cookies, and redux imports, and implement a top scroll effect for the ecommerce homepage.

Create and render the what we offer component with imported images and tailwind styles, then fix the navbar logout flow by correcting the dispatch usage and removing useEffect dependencies.

Code the stats component by importing the JSX and the stats SVG, then apply Tailwind grid classes for responsive one, two, and three-column layouts.

Builds a pricing component using React and Redux, maps subscription prices, and handles pro plan clicks to create a Stripe checkout session or access the customer portal.

Finish the pricing JSX component with user and subscription checks, render actions for get started, free products, or checkout, and wire Stripe checkout via the customer portal and price IDs.

Create and integrate the FAQ, guarantee, and reviews components using React and Tailwind CSS, featuring an accordion with useState toggles and conditional rendering.

Build and integrate a footer component for the MERN stack ecommerce SaaS project using Tailwind, React Router, and Redux, featuring login/register actions, user state handling, and conditional premium links.

Code the about page by integrating the call to action component and setting up routes, while using redux to show start free trial or go pro based on user subscriptions.

Fix the mobile navigation bar with a dynamic menu toggle and implement pricing page routing and purchase plan button that adapts to user login and subscription state for stripe checkout.

Create a features page with the features component and images, set up routing, and render a register link or premium products for logged-in users with reviews and hover effects.

Build and validate a contact page in a MERN app using formic and yup, wiring recipient email, subject, and message fields to dispatch a send email action via redux.

Create a free products page in a MERN stack app by fetching free products with Redux, implementing pagination, and rendering product details with a date formatter.

Build a free product details page by fetching a single product with Redux and React Router, render images, video, and descriptions, and implement download and copy interactions for assets.

Build a create product page in a MERN stack app with redux, formik and yup validation, dropzone image uploads, and an admin form covering title, descriptions, prices, links, and stats.

Build and render a premium product page by fetching paid products, implementing pagination and category filters, and enabling users to like and save products with real-time updates.

Create the premium product details page for paid items by fetching a single product from redux, enabling like and save actions, and presenting descriptions, stats, and media with download capabilities.

Build a responsive profile page using tailwind, React, and Redux to manage subscription, change password, verify email, logout, and view saved products in a MERN ecommerce SaaS app.

Learn to implement a save product page in a MERN stack ecommerce app, building a saved products page with Redux, actions, and pagination to save items for later.

Create a change password page using formik and yup for validation, dispatch a change password async via redux, and navigate on success after passwords match.

Build a complete reset password flow in a MERN stack app, with reset password sent and reset password pages, token-based URLs, and form validation via Formik and Yup.

Create a verify email page in a MERN stack app, dispatch verify account actions with a token, and navigate to the user profile upon successful verification.

Create and organize privacy policy, terms of service, and refund policy pages with folders and routes. Add Stripe success and cancel pages to finalize the pricing and payment flow.

Build stripe cancel and stripe success pages in a MERN stack app, wiring redux actions, updating subscription status, handling navigation, and syncing local storage.

Fix an auto logout by clearing local storage when the cookie expires, so the user is signed out on refresh if the token is gone.

Deploy the backend of a MERN stack to vercel by configuring vercel.json, renaming index.js to app.js, enabling MongoDB access, and pushing to GitHub, then deploy and test.

Deploy the frontend to Netlify by linking a GitHub repo and pushing code, and configure the public redirects file. Set environment variables and link a Vercel backend for production.