Documentation

Adding Features

Treat StartupKit as the base layer for any SaaS. This guide shows where to plug in new domains, APIs, or UI without breaking the upgrade path you sell to customers.

1. Extend the Data Layer

  1. Add Prisma models in prisma/schema.prisma for your feature (projects, tasks, AI runs, etc.).
  2. Run npx prisma generate and npx prisma db push.
  3. Create typed helpers in src/lib or src/server (e.g., src/lib/projects.ts).

2. Build API Routes

  • Use the App Router API routes (src/app/api/feature/route.ts) with NextResponse.
  • Import getServerSession from next-auth and validate access before mutating data.
  • Return JSON the dashboard can consume (status messages, pagination metadata, etc.).

3. Connect to the Dashboard

  1. Add new routes inside src/app/dashboard. The `page.tsx` files are server components so you can fetch data directly with Prisma.
  2. Compose UI from the primitives in src/components/ui and layout helpers insrc/components/dashboard.
  3. Gate access with isPlanFeatureEnabled or hasFeatureAccess to keep upsell flows consistent.

4. Update Pricing & Docs

  • Edit STRIPE_PLANS to toggle the new feature per tier.
  • Update src/components/pricing-comparison.tsx and any marketing copy.
  • Mention the new capability in this documentation page before shipping an updated zip to customers.

5. Release Process

  1. Test locally with multiple accounts and plans.
  2. Run npm run lint and npm run build to ensure the template still compiles.
  3. Zip the project (excluding node_modules if you want a smaller download) and send it to your customers.

Pro Tips

  • Keep feature-specific logic in isolated folders so buyers can remove what they do not need.
  • Document manual steps (API keys, third-party services) inside /documentation so resale customers stay unblocked.
  • Use feature flags or env variables when experimenting—only bake in what is production-ready before exporting the zip.