Project Structure

KitRocket follows a feature-based directory structure. Each module is self-contained so you can add or remove features without breaking unrelated code.

Top-level overview

my-saas/
├── src/
│   ├── app/              # Next.js App Router pages and API routes
│   ├── components/       # React components organized by domain
│   ├── lib/              # Business logic, services, utilities
│   └── db/               # Database schema and migrations
├── content/
│   └── blog/             # MDX blog posts (Pro)
├── prompts/              # Claude Code prompt recipes
├── public/               # Static assets (images, fonts, favicon)
├── CLAUDE.md             # AI project context for Claude Code
├── .cursorrules          # AI context for Cursor
├── drizzle.config.ts     # Drizzle ORM configuration
├── next.config.ts        # Next.js configuration
├── tailwind.config.ts    # Tailwind CSS configuration
├── components.json       # shadcn/ui configuration
└── .env.example          # Environment variable template

src/app/ — Pages and API routes

src/app/
├── (auth)/
│   ├── login/page.tsx        # Login page
│   ├── register/page.tsx     # Registration page
│   └── layout.tsx            # Auth layout (centered card)
├── (dashboard)/
│   ├── dashboard/page.tsx    # Main dashboard
│   ├── settings/page.tsx     # User settings
│   ├── billing/page.tsx      # Subscription management
│   └── layout.tsx            # Dashboard layout (sidebar + header)
├── (marketing)/
│   ├── page.tsx              # Landing page
│   ├── pricing/page.tsx      # Pricing page
│   ├── blog/                 # Blog pages (Pro)
│   └── layout.tsx            # Marketing layout
├── api/
│   ├── auth/[...all]/route.ts    # Better Auth catch-all
│   ├── checkout/route.ts         # DodoPayments checkout
│   ├── webhook/dodo/route.ts     # Payment webhooks
│   ├── ai/chat/route.ts          # AI chat endpoint (Pro)
│   └── user/profile/route.ts     # User profile CRUD
└── layout.tsx                     # Root layout

The route groups (auth), (dashboard), and (marketing) keep layouts separate without affecting URL paths.

src/components/ — UI components

src/components/
├── ui/                   # shadcn/ui primitives (button, card, input, etc.)
├── landing/              # Landing page sections
│   ├── hero.tsx
│   ├── features.tsx
│   ├── pricing.tsx
│   ├── faq.tsx
│   ├── testimonials.tsx
│   └── cta.tsx
├── dashboard/            # Dashboard-specific components
│   ├── sidebar.tsx
│   ├── header.tsx
│   └── stats-card.tsx
├── auth/                 # Auth forms and buttons
│   ├── login-form.tsx
│   ├── register-form.tsx
│   └── oauth-buttons.tsx
└── shared/               # Shared across the app
    ├── theme-toggle.tsx
    ├── user-avatar.tsx
    └── loading-spinner.tsx

src/lib/ — Business logic

src/lib/
├── auth/
│   ├── client.ts         # Better Auth client instance
│   ├── server.ts         # Better Auth server instance
│   └── middleware.ts      # Auth middleware for protected routes
├── payments/
│   ├── dodo.ts           # DodoPayments client
│   ├── checkout.ts       # Checkout session creation
│   ├── webhook.ts        # Webhook handler and verification
│   └── plans.ts          # Plan definitions and pricing
├── ai/
│   ├── client.ts         # AI provider client (Pro)
│   ├── chat.ts           # Chat completion logic (Pro)
│   └── tokens.ts         # Token counting and tracking (Pro)
├── email/
│   ├── resend.ts         # Resend client instance
│   ├── send.ts           # Email sending utility
│   └── templates/        # React Email templates
│       ├── welcome.tsx
│       ├── magic-link.tsx
│       └── receipt.tsx
├── db/
│   └── index.ts          # Drizzle client and connection
├── analytics/
│   ├── posthog.ts        # PostHog client (Pro)
│   └── events.ts         # Event tracking helpers (Pro)
└── utils/
    ├── cn.ts             # Tailwind class merge utility
    ├── format.ts         # Date and currency formatters
    └── constants.ts      # App-wide constants

src/db/ — Database

src/db/
├── schema/
│   ├── users.ts          # Users table
│   ├── sessions.ts       # Sessions table
│   ├── accounts.ts       # OAuth accounts table
│   ├── subscriptions.ts  # Subscriptions table
│   └── usage.ts          # AI usage tracking (Pro)
├── migrations/           # Generated migration files
└── index.ts              # Schema exports

prompts/ — Prompt Recipes

prompts/
├── implement.md          # /project:implement
├── review.md             # /project:review
├── fix-bug.md            # /project:fix-bug
├── add-api.md            # /project:add-api
├── add-page.md           # /project:add-page
├── add-component.md      # /project:add-component
├── refactor.md           # /project:refactor
├── test.md               # /project:test
├── deploy.md             # /project:deploy
├── security.md           # /project:security
├── performance.md        # /project:performance
└── document.md           # /project:document

Config files

File	Purpose
next.config.ts	Next.js settings, MDX plugin, image domains
tailwind.config.ts	Theme colors, fonts, custom utilities
drizzle.config.ts	Database connection, migration output directory
components.json	shadcn/ui component style and paths
tsconfig.json	TypeScript compiler options, path aliases
.env.example	Template for all environment variables
CLAUDE.md	Project context for Claude Code
.cursorrules	Project context for Cursor

Key conventions

• Path aliases: @/ maps to src/, so import { Button } from "@/components/ui/button"
• Server vs client: Components are server components by default. Add "use client" only when needed.
• Colocation: Related files live together. Auth components sit in components/auth/, auth logic in lib/auth/.
• No barrel exports: Import from specific files, not index files. This keeps tree-shaking effective.