Get Started

Procodinnaaaa! Hey maker, welcome to LaunchKit 👋

Here’s a quick overview of the boilerplate. Follow along to get your app up and running.

Once you’re done, start with the Launch in 5 minutes tutorial to launch your project in 5 minutes. Let’s build that startup, FAST 🚀

What’s Included Out of the Box

Authentication

Magic link authentication
OAuth providers (Google, GitHub, etc.)
Protected routes with middleware
User session management

Payments

Stripe checkout integration
Multiple pricing plans
Subscription management
Customer portal
Webhook handling

UI Components

25+ pre-built components
Dark/light mode support
Responsive design
Accessible components
Loading states and animations

Email System

Transactional emails with Resend
Welcome emails
Password reset
Custom email templates

Marketing

SEO-optimized pages
Blog system with MDX
Lead capture forms
Analytics ready

Security and Performance

Row Level Security (RLS)
Input validation with Zod
Error boundaries
Optimized images and fonts
TypeScript for type safety

Tech Stack Overview

LaunchKit comes with a modern, production-ready tech stack:

Frontend

React 19 - Latest React with concurrent features
Next.js 15 - App Router with Server Components
TypeScript - Type safety throughout
Tailwind CSS - Utility-first styling
Shadcn/UI - Beautiful, accessible components
Framer Motion - Smooth animations
next-themes - Dark/light mode with system detection

Backend

Next.js API Routes - Serverless API endpoints
Supabase - PostgreSQL database with Row Level Security
Supabase Auth - Authentication with OAuth providers
Stripe - Payment processing and subscriptions
Resend - Transactional email delivery

Start a local server

In your terminal, run the following commands one-by-one:

git clone https://github.com/flyingwebie/LaunchKit.git [YOUR_APP_NAME]
cd [YOUR_APP_NAME]

npm install
npm run dev

pnpm install
pnpm run dev

yarn install
yarn run dev

bun install
bun run dev

Remove GitHub Remote origin

git remote remove origin

LaunchKit requires Node 18.17 or greater. Type node -v in your terminal to check version.

Rename .env.example to .env

mv .env.example .env.local

Go to the Supabase dashboard, create a new project and paste your 3 Supabase environment variables NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY in .env.local
Open http://localhost:3000 to see your site. And voila!

You will see errors in the console but nothing important.

Next.js 15 project structure

LaunchKit uses the latest Next.js 15 with App Router for optimal performance and developer experience:

/app → Pages (1 folder + page.tsx = 1 page)
/app/api → API routes (1 file = 1 API endpoint)
/components → React components (25+ pre-built components)
/libs → Libraries helper functions (Stripe, Resend, Supabase, SEO, etc.)
/types → TypeScript type definitions
/public → Static assets

Key directories breakdown:

Directory.claude/ Custom Instructions for Claude Code
- Directorycommands/
  - …
Directory.cursor/ Custom Instructions for cursor
- Directoryrules/
  - …
- mcp.json
Directoryapp
- Directory(auth)/ Authentication pages
  - Directorymagic-link/ Use Magic Link from Supabase
    …
  - Directoryreset-password/ Reset Password
    …
  - Directorysignin/ All Sign in/up and Supabase 0Auth
    …
  - Directoryupdate-password/ Update Password after the rest
    …
  - Directoryverify-password/ Verify email using OTP
    …
- Directory(legals)/ Lead capture
  - Directoryprivacy-policy/ Basic Policy privacy
    …
  - Directorytos/ Basic Terms of Service
    …
- Directoryapi/ API routes
  - Directoryadmin/ Dashboard Admin
    …
  - Directoryauth/ Auth system
    …
  - Directorygithub/ Grant access to Repo
    …
  - Directorylead/ Manage Leads
    …
  - Directoryproducts/ Featch products
    …
  - Directorypurchases/ Featch Purchases
    …
  - Directorystripe/ Payment processing
    …
  - Directorytest-email/ Test your Email templates
    …
  - Directorywebhook/ Webhook handlers
    …
- Directoryblog/ MDX blog system
  - …
- Directorydashboard/ Protected user area
  - Directoryadmin/
    …
  - Directoryorders/
    …
  - Directoryproducts/
    …
  - Directorysettings/
    …
  - layout.tsx Dashboard Layout
  - page.tsx Main dashboard page
- layout.tsx Main Layout
- page.tsx Homepage
Directorycomponents/ React components
- Directorybuttons/ Helpful buttons
  - …
- Directorydashboard/ Dashboard Components
  - …
- Directoryemails/ EMail templates
  - …
- Directorynavigation/ Easy dashboard navigation
  - …
- Directorysections/ Components for the landingpage (frontend)
  - …
- Directoryui/ Shadcn/UI components
  - ButtonSignin.tsx Auth components
  - Pricing.tsx Pricing table
  - Hero.tsx Landing page hero
  - … 25+ other components
Directorydocs/
- init_supabase.sql
Directorylibs/ Utility libraries
- Directorysupabase/ Database clients
  - …
- stripe.ts Payment processing
- resend.ts Email service
- seo.tsx SEO utilities
- … 10+ other libs
Directorypublic/ Media files
- …
Directorysupabase/ Instructions for Supabase local
- Directorymigration/ Migrations for the database
  - 20250708202432_init_db.sql Use this migration for init the database
- config.toml Supabase Settings
CLAUDE.md Instructions for Claude Code
config.ts App configuration
.env.example Duplicate and rename .env

config.ts file

This is the backbone of your LaunchKit app. It centralizes all configuration including:

App settings: Name, description, domain
Stripe plans: Multiple pricing tiers with features
Email settings: From addresses and support email
Authentication: Login/callback URLs
Theme settings: Dark mode configuration
Integrations: Crisp chat, AWS S3, etc.
Analitycs Configuration: GA4, GTAG, Umami, Plausible

Each key is documented to know how and why it’s used. Have a thorough look at it as it controls most of your app’s behavior.

.env.local file

Rename the .env.example file to .env.local. The file content should look like this:

# -----------------------------------------------------------------------------
# GitHub
# -----------------------------------------------------------------------------

GITHUB_TOKEN=

# -----------------------------------------------------------------------------
# Resend
# -----------------------------------------------------------------------------
RESEND_API_KEY=

# -----------------------------------------------------------------------------
# Database URI
# -----------------------------------------------------------------------------
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# -----------------------------------------------------------------------------
# Stripe
# -----------------------------------------------------------------------------
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=