React Node Stripe MongoDB MERN Stack Subscription App

Set up routing for multiple pages and install Bootstrap CSS via npm or CDN, add the Bootstrap link to public/index.html, and run the app to render Bootstrap components.

Create a pages directory with login, register, and home, implement components, and wire them with routes so users visit the correct page (home, login, register) based on URL.

Build a top navigation bar by creating a reusable navigation component with bootstrap, using link components for client-side routing, and ensuring a responsive hamburger menu on small screens.

Build a reusable input component in a React MERN app to handle name, email, and password fields for login and registration, using label, value, and state update props.

Create a reusable React button component with props for type, size, text, and onClick, defaulting to primary, medium, and be used in the registry form with full width.

Post user data with axios to a backend and display toast notifications using React Hot Toast and toaster; debug with the network tab, and handle errors and success during registration.

Initialize the server with npm, install express, configure cors and environment variables, set up a MongoDB connection with Mongoose, and implement JWT authentication and Stripe integration.

Apply middleware with app.use to handle json data and define routes for get and post requests, connecting to MongoDB via Mongoose and running the server.

Create and organize express routes by building a routes file, auto loading from a folder, and moving route logic to a controllers module, then plan validation and database integration.

Learn to implement form validation and error messaging in a MERN stack subscription app by validating name, email, and password, handling post requests, and displaying server-sent errors to users.

Create a user schema and model with name, email, and password, enforcing trimming, required fields, and password length 6 to 64, then prepare to save users to the database.

Create a user by checking email uniqueness, hashing the password, and saving the user to the database, then return the user data without the password.

Register a new user, verify the MongoDB generated ID and hashed password, remove the password from the response with the rest operator, then redirect to login after signup.

This lecture guides building a login page by adapting registry code to handle email and password, connect to a login endpoint, and redirect users based on subscription status.

Create a login flow that finds the user by email, verifies the password, signs a jwt with the user id and seven-day expiry, and returns the token and user data.

Learn how to persist authentication by saving token and user data in local storage during signup and login, ensuring persistence across page reloads with a JSON payload.

Learn to fetch the current user from local storage with a reusable helper and render conditional navigation links that show login or logout, and redirect on logout.

Create a React context to manage global user state with a provider, initialize from localStorage, and configure Axios to send the token in authorization headers for seamless authentication.

Learn to implement and access a global user context with useContext, updating state on login and logout, and reflect changes instantly across navigation and pages.

Create and populate pricing cards on the home page to showcase three subscription plans—basic, standard, and premium—using a reusable card component and dynamic data from the server.

Create and price Stripe products—basic, standard, and premium—and fetch their recurring monthly prices via a backend, then display them dynamically in a React app.

Fetch pricing data from the server and render dynamic price cards on the home view, using useEffect and useState to enroll users in a subscription plan.

Create dynamic pricing cards in a React MERN app, mapping nicknames to prices, reversing order for basic, standard, premium, and formatting currency for subscriptions.

Create a Stripe customer on user signup and save the Stripe customer ID in the database, updating the user model and enabling dynamic sign up and login flows.

Switch the button text between sign up and plan enrollment based on the logged in status using the user context and state, and set up a backend Stripe subscription flow.

Protect the subscription route for logged-in users with a require signin middleware that verifies a token using a secret and HS256, then creates the subscription via a backend endpoint.

Validate the logged-in user via context, send the price id to the back end to create a subscription, then open Stripe checkout in a new window for payment.

Learn how to implement Stripe Checkout for a React Node app by creating a subscription, handling user data via middleware, and redirecting to success or cancel flows.

Create a Stripe success and cancel page that credits the user, updates subscription status via backend calls, syncs the database, and redirects to the chosen plan, with a loading indicator.

Create a protected route using the Route component and Redirect to gate access with user context, redirecting non-logged-in users to the login page.

Build a subscription status server that queries Stripe for the user's customer data, updates MongoDB, and provides an endpoint for the React client.

Fetches the user’s subscription status from the backend, handles redirection when no subscription exists, and displays or upgrades plans using a Stripe-backed MERN stack client.

Navigate to the account page, fetch and display the user's subscription information from the backend, update local storage with subscription status, and handle redirects in the mern stack app.

Learn to fetch a logged-in user's subscriptions by wiring a secure API call with context-based authentication, handle unauthorized errors, and render plan data like price and nickname.

Display and format each user subscription on the account page by mapping subscriptions, showing the plan nickname, price, last four digits of the card, and the end date.

Update user subscription by syncing backend data to local storage and context state, then redirect based on enrollment status. Ensure local storage and context reflect subscription updates.

Implement a responsive dropdown navigation using Bootstrap in the React app, showing account options when logged in and a logout link, with nav items and link components.

Determine and display a user’s paid subscription access by checking subscriptions, updating state, and navigating to the corresponding plan page.

Implement access control for plan pages in a React app, creating basic, standard, and premium bases that display different stocks and restrict viewing to subscribed users.

Implement access control on the subscription plans page using a user context and useEffect to restrict access to logged-in users based on basic, premium, and standard plans, redirecting non-subscribed users.

Open a Stripe customer portal to let users manage subscriptions—pause, resume, update plans, and edit payment details—while the server creates the portal session and the front end opens it.

Learn to manage subscriptions client-side with a Stripe-powered customer portal, including enabling pause, cancel, and resume flows, and handling portal settings for your MERN stack app.