Documentation Index

Welcome to the B2B SaaS Starter documentation.

What is B2B SaaS Starter?

B2B SaaS Starter is a B2B SaaS application. It's built with Next.js 16, TypeScript, and modern best practices.

Tech Stack

Framework: Next.js 16 with App Router
Language: TypeScript (strict mode)
Styling: Tailwind CSS + shadcn/ui components
State: Zustand for global state
Data Fetching: TanStack React Query
Authentication: Stytch B2B
Payments: Stripe/Polar integration

Core Guides

Getting Started Setup, installation, and first run.
Authentication Protecting routes and checking login status.
Permissions & Roles Using RBAC (Admin, Manager, Member) and permissions.
Payments & Billing Checking subscription status and paywalls.
Making API Requests Using apiClient and Repositories.
Creating Pages Server vs Client components.
Creating APIs Route handlers and security patterns.
Using Hooks Data fetching (Query) and modifying (Mutation).
Adding a Feature High-level checklist for comprehensive features.

Quick Reference

Auth: requireMemberSession() (Server) / useStytchMember() (Client)
Permissions: getServerPermissions() (Server) / usePermissions() (Client)
Data: apiClient.get() or useQuery()

Project Structure

next_b2b_starter/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   ├── auth/              # Login page
│   └── dashboard/         # Protected pages
├── components/            # React components
│   └── ui/               # shadcn/ui components
├── lib/                   # Utilities and business logic
│   ├── api/              # API client and repositories
│   ├── auth/             # Authentication utilities
│   ├── hooks/            # React hooks
│   └── contexts/         # React contexts
├── middleware.ts          # Route protection
└── docs/                 # This documentation

Core Concepts

Server vs Client Components

Server Components run on the server. Use them when you need:

Direct database/API access
Sensitive operations
SEO-optimized content

Client Components run in the browser. Use them when you need:

Interactivity (buttons, forms)
Browser APIs
React hooks

Repository Pattern

Don't call APIs directly. Use repositories:

// Good
const profile = await profileRepository.getProfile();

// Avoid
const response = await fetch('/api/profile');

Permission-First Development

Always check permissions before showing features:

Define permission in lib/auth/permissions.ts
Check permission before rendering UI
Re-check permission in API route

Need Help?

Check next_b2b_starter/README.md for project-level info.

3.2 KiB Raw Permalink Blame History