Next.js & OpenAI - Build SaaS AI Powered Interview Prep App

Watch a complete demo of Prep I, an AI-powered interview prep app built with Next.js 15 and OpenAI, featuring AI-generated interviews, scoring, subscriptions, social login, and dashboards.

Install and set up essential tools for this course, including Visual Studio Code, optional git bash, and MongoDB Compass to work with MongoDB as the database.

Install and verify MongoDB community server on macOS using Homebrew, including installing Xcode command line tools and running basic mongo commands.

Download and install MongoDB community server, MongoDB shell, and MongoDB compass on Windows. Set the system path, start mongod, and connect via the MongoDB shell or compass to manage databases.

Access the official git repo to follow along and obtain code for each course section. Browse branches from 001 project setup to the 20th final deploy branch.

Switch from next UI to hero UI; install hero UI / react and import from hero UI / react, update hero UI provider usage and button imports, keeping code same.

Launch a new Next.js project, install and integrate Next UI, and configure app routing with server components, data fetching, and nested layouts while enabling dark mode through Next themes.

Explore the prep components repo for the Next.js 15 OpenAI powered interview prep app, featuring login, form inputs, and buttons built with Tailwind for the landing page.

Set up a landing page by creating a components structure, building the home page, wiring Next.js routing with static data and tailwind styling, and adding a stats section with charts.

Add and render testimonials, pricing, and an interview process section on the landing page using static data and Next UI cards. Create a three-step interview process with card components.

Design and render the header and footer for the Next.js OpenAI interview prep app, including a logo, links, dynamic year, and a Next UI navbar with a user menu.

Design a header announcement component on the landing page that shows a promotional message to unsubscribed users, with a subscribe link and gradient styling using Tailwind.

Connect to a MongoDB database using a Mongoose-backed cache in a Next.js backend, configuring environment variables and local versus production URIs for reliable, reusable connections.

Create a Mongoose user model in a Next.js project, with a user interface. Define Google and GitHub as auth providers with Stripe-based subscription fields, plus optional password handling.

Create an auth controller function to register the user by connecting to the database, encrypting the password with bcrypt, and saving the user with credentials for Next.js server actions.

Explore building a Next.js 15 user registration flow with server actions. Create a form that posts to a server action, encrypts passwords, and saves the user via an auth action.

Learn to implement credential, Google, and GitHub login in Next.js using next-auth; set up api/auth/[...nextauth], configure credential providers, authorize function with database check and bcrypt, and enable JWT-based sessions.

Learn to implement a login flow with next-auth credentials, wrap the app with a session provider, and configure JWT and session callbacks to expose the full user in the session.

Render the current user in the header from session data, displaying avatar, name, and email when logged in, or a login button when not, with a skeleton while data loads.

Render the current user in the mobile menu, show sign-in or user menu based on login state, and close the menu on router navigation.

Learn to log out users by invoking NextAuth's signOut function from the navbar, update header state, and verify signing in with a password, setting the stage for future social authentication.

Set up social authentication with Google and GitHub using next-auth, including a sign-in callback. Handle credential vs social logins and manage user records in the database.

Register a GitHub OAuth app, obtain the client id and secret, configure a GitHub provider in next-auth, and redirect to app/dashboard after login.

configure google oauth in a next.js app by creating the google client id and secret, setting the redirect URI, and integrating the google provider for login.

Enable and manage multiple social logins in a Next.js 15 app by updating the user’s auth providers, adding new providers when emails match, and handling profile pictures.

Protects routes using Next.js middleware to block unauthenticated users and redirects to login, enabling all /app paths to require authentication.

Create a reusable generic submit handler that manages loading state and form data, passes typed data to callbacks, and enables loading indicators on login and register submit buttons.

Create a global catch async errors wrapper for backend controllers, extract and format error messages and status codes, and enable front-end display of validation and duplicate email errors.

Show how to display backend errors and success messages in the frontend with react-hot-toast, wiring toasts for registration and login feedback.

Set up Cloudinary for image hosting and implement upload and delete file helpers to manage user profile pictures in a Next.js app.

Learn to update a user profile in a Next.js app by editing the name, previewing a new avatar, uploading it to Cloudinary, and refreshing the NextAuth session.

Update the user password end-to-end, validating new and confirm passwords, updating the user record in the backend, and ensuring a credentials provider is added for password-based login.

Add reset password token support by generating a 20-byte hex token, hashing with sha-256, saving the hash with a 30-minute expiry, and returning the token for email delivery.

Set up nodemailer and an HTML reset password template in a Next.js app, implement a mailer with a transport, and configure mailtrap-based SMTP credentials and env vars.

Implement a password recovery flow by generating and saving a reset token, emailing a reset link, and providing a frontend forgot password page.

Implement a secure reset password flow by validating the token and updating the password. Hash the token with crypto, verify expiry, clear the token, and redirect to login after reset.

Create a nested layout in the Next.js app directory with layout.tsx, set up a Tailwind grid with a sidebar and content, and outline app pages, nested pages, breadcrumbs, and icons.

Create an app sidebar using a list box to render pages, wired to routing with a selected key for the active item, plus icons and colors.

Learn to implement dynamic breadcrumbs across pages in a Next.js 15 app by building a breadcrumb component, a use page title hook, and path matching for the current path.

Build a loader component with a customizable spinner and a reusable error UI for a Next.js app, and wire routing back support.