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.

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.

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.

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.

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.

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.

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.

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

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.