mickasmt/next-saas-stripe-starter

Open-source SaaS Starter with User Roles & Admin Panel. Built using Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe, Server Actions.

2,967 stars TypeScript 12 components 12 connections

Full-stack SaaS starter kit with authentication, billing, and admin features

User registration/login creates database records, subscription events flow through Stripe webhooks to update user status, and authenticated users access role-based dashboards with real-time subscription state

Under the hood, the system uses 2 feedback loops, 3 data pools, 4 control points to manage its runtime behavior.

Structural Verdict

A 12-component nextjs app with 12 connections. 190 files analyzed. Well-connected — clear data flow between components.

How Data Flows Through the System

User Authentication — Auth.js handles OAuth/credentials login and creates/updates user records in Prisma
Subscription Creation — Stripe checkout session created based on selected plan and user status
Payment Processing — Stripe processes payment and sends webhook events to update subscription status
Access Control — Middleware checks user role and subscription status for route access
Dashboard Rendering — Role-specific dashboards render with user data and subscription features

System Behavior

How the system actually operates at runtime — where data accumulates, what loops, what waits, and what controls what.

Data Pools

User Database (database)
User profiles, roles, and account metadata via Prisma

Subscription Store (database)
Stripe customer IDs, subscription status, and plan details

Content Cache (file-store)
Generated static content from MDX files for docs and blog

Feedback Loops

Stripe Webhook Processing (polling, balancing) — Trigger: Payment events from Stripe. Action: Update user subscription status in database. Exit: Successful database update.
Session Refresh (cache-invalidation, balancing) — Trigger: User data changes. Action: Revalidate cached user session. Exit: Updated session data.

Delays & Async Processing

Stripe Checkout (async-processing, ~immediate redirect) — User redirected to Stripe for payment processing
Webhook Processing (eventual-consistency, ~seconds) — Subscription status updates after payment completion
Content Generation (batch-window, ~build-time) — Blog and docs content pre-generated during build

Control Points

Stripe API Keys (env-var) — Controls: Payment processing environment (test vs production)
Database URL (env-var) — Controls: Which database instance to connect to
Auth Providers (feature-flag) — Controls: Which OAuth providers are enabled
User Roles (feature-flag) — Controls: Route access based on ADMIN vs USER roles

Technology Stack

Next.js 14 (framework)
React framework with App Router

Prisma (database)
TypeScript-first ORM for database operations

Neon (database)
Serverless PostgreSQL database

Auth.js v5 (library)
Authentication with multiple providers

Stripe (library)
Payment processing and subscription management

Shadcn/ui (library)
Component library built on Radix UI

Tailwind CSS (framework)
Utility-first CSS framework

React Email (library)
Email template framework

Resend (infra)
Email delivery service

Contentlayer (library)
Content management for docs and blog

Key Components

generateUserStripe (handler) — Creates Stripe checkout sessions or billing portal access based on user subscription status actions/generate-user-stripe.ts
UserAuthForm (component) — Handles both login and registration with OAuth and email/password options components/forms/user-auth-form.tsx
NavBar (component) — Main navigation component with authentication state and user menu components/layout/navbar.tsx
getCurrentUser (function) — Retrieves current authenticated user from session with database sync lib/session.ts
getUserSubscriptionPlan (service) — Determines user's subscription status and Stripe customer details lib/subscription.ts
updateUserName (handler) — Server action to update user profile information with validation actions/update-user-name.ts
Icons (utility) — Centralized icon library combining Lucide icons with custom SVGs components/shared/icons.tsx
BlogCard (component) — Displays blog post previews with author information and blur images components/content/blog-card.tsx
ModeToggle (component) — Theme switcher dropdown for light/dark/system preferences components/layout/mode-toggle.tsx
stripe (service) — Stripe client instance for payment processing and subscription management lib/stripe.ts
prisma (service) — Prisma client singleton for database operations lib/db.ts
auth (config) — Auth.js configuration with providers, callbacks, and session handling auth.ts

Configuration

components.json (json)

$schema (string, unknown) — default: https://ui.shadcn.com/schema.json
style (string, unknown) — default: default
rsc (boolean, unknown) — default: true
tsx (boolean, unknown) — default: true
tailwind.config (string, unknown) — default: tailwind.config.ts
tailwind.css (string, unknown) — default: styles/globals.css
tailwind.baseColor (string, unknown) — default: neutral
tailwind.cssVariables (boolean, unknown) — default: true
+3 more parameters

Explore the interactive analysis

See the full architecture map, data flow, and code patterns visualization.

Analyze on CodeSea

Related Nextjs App Repositories

Frequently Asked Questions

What is next-saas-stripe-starter used for?

Full-stack SaaS starter kit with authentication, billing, and admin features mickasmt/next-saas-stripe-starter is a 12-component nextjs app written in TypeScript. Well-connected — clear data flow between components. The codebase contains 190 files.

How is next-saas-stripe-starter architected?

next-saas-stripe-starter is organized into 5 architecture layers: Route Groups, Authentication & Authorization, Component System, Data Layer, and 1 more. Well-connected — clear data flow between components. This layered structure enables tight integration between components.

How does data flow through next-saas-stripe-starter?

Data moves through 5 stages: User Authentication → Subscription Creation → Payment Processing → Access Control → Dashboard Rendering. User registration/login creates database records, subscription events flow through Stripe webhooks to update user status, and authenticated users access role-based dashboards with real-time subscription state This pipeline design reflects a complex multi-stage processing system.

What technologies does next-saas-stripe-starter use?

The core stack includes Next.js 14 (React framework with App Router), Prisma (TypeScript-first ORM for database operations), Neon (Serverless PostgreSQL database), Auth.js v5 (Authentication with multiple providers), Stripe (Payment processing and subscription management), Shadcn/ui (Component library built on Radix UI), and 4 more. This broad technology surface reflects a mature project with many integration points.

What system dynamics does next-saas-stripe-starter have?

next-saas-stripe-starter exhibits 3 data pools (User Database, Subscription Store), 2 feedback loops, 4 control points, 3 delays. The feedback loops handle polling and cache-invalidation. These runtime behaviors shape how the system responds to load, failures, and configuration changes.

What design patterns does next-saas-stripe-starter use?

5 design patterns detected: Server Actions, Route Groups, Component Composition, Role-Based Access, Subscription Management.

Analyzed on March 31, 2026 by CodeSea. Written by Karolina Sarna.