SaaS with Next.js: Build 4+ Full-Stack Prod Ready Projects

Learn to set up and use GitHub Desktop to create, commit, push, fetch, and synchronize repositories across devices, publish to cloud, and manage history.

Clone a GitHub repository to your local machine by selecting a local path, clicking clone, and review the Git commit history in the newly created project folder.

Delete the hidden .git folder when copying a project to initialize a fresh repository, then use GitHub Desktop to create, publish, and manage changes, and discard changes if needed.

Open VS Code, create a project folder, generate a Next.js app with Tailwind CSS, follow the Tailwind guide, run npm run dev, and test styling in a page.

Describe how clerk handles authentication and billing, gatekeeping dashboard and product access, while supabase stores user records linked by email and user ID.

Log in to Supabase and create a new project named dev. Copy the service role secret key and dotenv keys into your env file for Next.js app router.

Create a lib folder to centralize utilities, configurations, and shared code, enabling reusable, type-safe business logic such as subscription checks with clerk authentication across components.

Create a reusable navigation bar component for a Next.js SaaS app. Implement client-side interactivity with useState, next/link, sign in and sign out, and a responsive mobile menu.

Learn to change a font in a Next.js SaaS app by importing a variable font like bricolage grotesque or Roboto, setting a global font family, and applying a dark theme.

Finalize the starter kit by adding a dashboard folder and page, gate content by login and pro plan, and enable a seven-day trial with a personalized welcome for the user.

Configure Supabase and Clark integration, add Clark as an authentication provider, paste the Clark URL to connect, and create user tables with policies for insert, edit, delete, or update.

Create and secure a Supabase table with a primary key, foreign key to Clark's user, auto timestamps, indexing, and row-level security policies driven by JWT sub.

Test the starter kit by configuring a Supabase client, environment variables, and dashboard components to perform create, read, update, and delete operations for the logged-in user, with Clerk integration.

Connect to the Supabase database with a server-side Supabase client, obtain the token from Clerk, and enforce per-user access so each user can only modify their own data.

Create a marketing folder and move the landing page and related assets there, using parentheses in the path so the landing page remains at localhost:3000.

Build the Clerk starter kit UI how it works section by repurposing a hero component, wiring step cards with icons, and applying staggered fade-in motion with Tailwind grid.

Align the page with a container and center it, then animate the hero steps with initial states, per-item delays, and a gradient connector plus a borderless navigation bar.

Design and implement a linktree-like SaaS app with user profiles and shareable links. Develop core functionality, basic UI, theme options, and premium features to attract and retain users.

Toggle a link's enabled state and reorder links by validating the user id, retrieving current is_enabled, updating is_enabled and display_order, and revalidating dashboard and public URL paths.

Fetch a public user profile by username, return enabled links, handle not found or private cases, and track link clicks with Supabase; also check username availability.

Coordinate dashboard components by wiring get profile and get links actions to render link manager and profile setup, export and import components, and handle database error.

Create and edit user profiles with a client-side profile setup component that validates usernames, checks availability with debounced server actions, and submits via create or update profile actions.

Create a link manager UI component that renders conditionally after profile exists, accepts initial links and username as props, and supports adding, updating, deleting, and validating URLs with server actions.

Learn to build a dynamic public profile page at /[username], with a dedicated component structure, client-side state management, link click analytics, and theme-aware styling using tailwind class helpers.

Render a link manager UI component with conditional username display, public URL preview, copy link, and a form to add, validate, and manage links (enable, edit, delete).

Render a responsive public profile view with avatar handling, display name, and username, bio, and conditional links, styled by theme-aware Tailwind classes and interactive hover animations.

Build a client-side conditional navbar that hides on public profile pages by using usePathName from next/navigation, render it in the app layout, and enable profile sharing with link analytics.

Build a responsive navbar as a client component in Next.js, with next/link and Clerk sign-in/out handling. Integrate desktop and mobile navigation with a toggleable menu and purple styling.

Build the landing page hero section for a Next.js app by creating a reusable hero component and integrating it into the app layout with a navbar, rings, and icons.

Create a reusable button glowing component in Next.js that accepts text and href, renders an inline-flex link with a chevron icon, and adds a hover gradient glow for landing page.

Gate the dashboard content with authentication and an active-subscription check, redirecting non-subscribers to pricing while preparing file input, AI analysis, and a payment-success message via URL params.

Design a dashboard with pdf upload and analysis, using tailwind styling, hover effects, and a disabled analyze button until a file is selected for pdf ai analysis.

Begin implementing handleAnalyze to extract text from the selected pdf, validate file, show loading while sending text to the API for analysis, and update the UI with results using useCallback.

Explore Pdf.js in-browser text extraction using a Jsdelivr web worker, with a max text length and an async function that loads, processes pages in parallel, and returns full pdf text.

Test your app by extracting text from a PDF using PDF utils in the library. Load the file, extract content, and set the stage for AI analysis.

Implement a rate limiter for the api using an in-memory lru cache to cap requests at five per minute, with a 1000-entry cache and one-minute reset.

Define a Next.js API route that accepts pdf text, validates input, rate-limits requests, and calls Google Gemini AI to produce a structured, summarized JSON response with robust error handling.

Format a summary content function that parses raw text into paragraphs and detects main headings and subheadings with hashtags. Return styled outputs with gradient and typography for headings and paragraphs.

Set Clerk, Supabase, and Stripe secret keys in the dot env file, then expose locally with ngrok and configure a webhook endpoint at /api/webhooks using the signing secret.

Set up a Supabase backend by creating an organization and free-tier project, paste the database URL and direct URL into environment variables, reset password, and enable pgbouncer with one-connection limit.

Demonstrates sign in and sign up with Clark components, pasting code, styling with flexbox to center UI, and Google sign-in with Clerk and a webhook to save users in Supabase.

Set up a Clerk webhook integration by creating a route.ts, installing swyx, and saving new user data to Supabase via Prisma, with error handling.

Install Prisma, run npx prisma init, define a user model with a 1-to-1 subscription and stripe fields, push to Supabase, and create a shared Prisma client.

Expose localhost with Ngrok to test the Clerk webhook, configure the /api/webhooks/clerk endpoint for user events, and set the webhook secret so the user is saved in Supabase after login.

Implement stripe integration in a next.js project by creating a stripe client, installing the stripe npm package, and building a get stripe session function to create checkout session for subscriptions.

check auth and subscription function verify user login with Clerk, fetch subscription via Prisma, and redirect unauthenticated or unsubscribed users to pricing, all in server-only code.

Create a pricing page enabling subscription purchase and management, using next.js server components, stripe, prisma, and clerk for authentication, with data fetching and a customer portal.

Create a client side redirect component using use client and useEffect to push the destination url, with a loading spinner and server side authentication check routing to pricing or dashboard.

Refactor a Next.js SaaS dashboard by preserving auth with Clerk, keeping Stripe payments and webhooks, and turning the PDF analysis tool into a reusable starter kit.

Configure environment variables for AI, Clerk, Supabase (database URL and direct URL for Prisma), and Stripe (publishable key, secret, price ID, webhook secret), with guidance on reusing or separating projects.

Configure clerk by linking your workspace and project, manage api keys and webhook secrets as environment variables, and test webhooks with ngrok for user events like user created.

Install ngrok to expose localhost 3000, test clerk webhooks with superbase, and generate a public link; configure the endpoint api/webhooks/clerk/user_created and set the webhook secret in environment variables.

Connect to Supabase, create your org and project, copy env vars, and paste them into your environment. Generate and reset the database password in project settings and update credentials.

Configure Stripe environment variables by obtaining publishable and secret keys, price ID, and webhook secret, then update .env. Use Stripe CLI to listen on localhost 3000 and forward to /webhook.

Set up a Stripe listener, obtain webhook secret, and test the webhook by triggering a payment intent with Stripe, confirming HTTP 200. Test subscription and create the user in Superbase.

Demonstrate end-to-end testing of sign-in with Google via Clerk, user creation in Superbase, subscription purchase through Stripe, and validation of webhooks and security dashboards.

Run Postman to test the API after starting the server on localhost 3000, then access your dashboard with an active subscription and explore default get and post requests.

Set up the Postman environment by extracting the underscore session token from the localhost 3000 cookies and defining base URL and auth token variables.

Log in, verify subscription, and copy session token to Postman as an environment variable. Call test records API with bearer token and observe data and token refresh when unauthorized.

Demonstrates a secure get request flow for authenticated users, including auth via clerk, rate limiting at 20 requests per minute, Prisma data retrieval, and robust error handling.

Secure post requests validate id and content type as json, apply a 20 per minute per user raid limiter, then create the record with title, description, status, and user id.

Learn to secure a SaaS app by keeping service role and enum keys out of the browser, enforcing server-side row level security, and implementing authentication, authorization, and rate limiting.

Postman tests show data isolation by using the session cookie to fetch only the current user's records, confirming tenant isolation and off-token validation.

Demonstrate Postman API testing to verify data isolation, perform create, read, update, delete operations, and validate security layers, content type checks, and rate limits in a SaaS application.

Explore security anti-patterns, including missing user ID filters and client-side filtering, and learn server-side filtering, ownership checks, error handling, and rate limiting to prevent data breaches and costs.

Build the SaaS dashboard atop a starter kit by creating components and Prisma tables, updating API routes, deploying with production Clerk and Stripe, and implementing pricing, logo, catchphrase, and subscribe.

Learn to build a Next.js navigation bar with a theme toggle, client components, and conditional links (dashboard, profile, pricing) integrated into the layout with flexbox.

Delete the Next.js template and build a landing page hero with a centered heading and two call-to-action buttons, then implement dashboard, profile, and pricing routes with a subscription flow.

Set up clerk in a Next.js app to enable sign in and sign out, configure environment variables and middleware, and wrap the app with the clerk provider for dashboard redirects.

Synchronize Clerk data with your Next.js app via webhooks and ngrok, then persist new users to your database using Prisma and webhook secret configuration.

Set up Stripe keys, create a product and price, and implement a webhook-driven flow with checkout sessions and subscription handling.

Create client-side payment pages in a Next.js app by adding a payment folder with cancelled and success pages, TSX components, a Next.js link to pricing, and flexbox styling.

Structure authentication for Next.js by creating an auth folder with sign in and sign up pages, then style them and add links between them.

Query the user’s subscription with prisma, redirect to sign in if needed, and render the dashboard product only when the status is active; otherwise show you are not subscribed.

Build a client side thumbnail Previewer in a Next.js SaaS app, using React hooks and placeholder images, with a YouTube style responsive grid and randomize feature.

Learn to build a reusable framer motion animation container for a Next.js landing page hero, with gradient text, gradient buttons, and a responsive call-to-action.

Import assets and thumbnails and icons to build a responsive steps section in a Next.js app, wrap steps in an animation container, and render three steps with hover effects.

Create a landing page demo that animates an app image with Framer Motion using scroll progress, transforming rotation and opacity through a client component.

Create an interactive FAQ section on a landing page for a Next.js SaaS project by toggling three questions and answers with useState and animating transitions using Framer Motion's AnimatePresence.

Create a pricing landing in Next.js with a dollar-sign price badge, interactive pricing cards, feature lists with check icons, and a sign-up call to action.

Build a dynamic landing page section featuring a rotating circle of thumbnails with framer motion and next/image, followed by a responsive footer with updates and navigation links.

Build a new navbar for the landing page using next/link and theme toggles. Incorporate Clark authentication with sign in/out and a mobile menu toggle.

Create a profile page where users set and save their channel name, auto-populated on login. Use Prisma queries and a server action to update and revalidate.