Launch your SaaS in days, not months. A complete, production-ready starter template with authentication, payments, database, and beautiful UI β all pre-configured and ready to use.
Built with Next.js 15, TypeScript, Tailwind CSS, DaisyUI, Clerk, Supabase, and Polar.sh.
- Features
- Why Choose GetShipKit?
- Quick Start
- Prerequisites
- Setup
- Customization
- Deployment
- Troubleshooting
- Learning Resources
- Contributing
- License
- Next.js 15 App Router: Server components, routing, and API routes in one place
- TypeScript: Full type safety across the entire codebase
- Tailwind CSS & DaisyUI: Beautifully designed components with minimal effort
- Clerk Authentication: Secure user management with social logins, MFA, and more
- Supabase Database: Powerful PostgreSQL database with real-time capabilities
- Polar.sh Payments: Subscription management and payment processing
- PWA Ready: Offline support with web-manifest & install prompt
- SEO Optimized: Automatic sitemap & robots.txt generation out of the box
Stop wasting weeks on boilerplate setup. GetShipKit gives you:
- Zero Configuration Needed: All integrations are already connected and working
- Production-Ready Code: Battle-tested patterns and best practices included
- Modern Tech Stack: Built with the latest and most popular technologies
- Complete Features: Authentication, database, payments, and UI components out of the box
- SEO & Performance: Optimized for search engines and lightning-fast loading
- Easy Customization: Clean, well-documented code that's easy to modify
This template comes with all integrations already set up and working. You just need to:
- Add your API credentials
- Copy-paste the provided SQL schema
- Start building your SaaS product features
Get up and running in less than 5 minutes:
# 1. Clone this repository
git clone https://github.com/yourusername/getshipkit-template.git my-saas-project
cd my-saas-project
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys (see setup guide below)
# 4. Start the development server
npm run devOpen http://localhost:3000 in your browser to see your SaaS application running!
Next steps: Follow the Simple Setup Steps below to configure your API keys and deploy your app.
Before you begin, ensure you have:
- Node.js 18+ and npm (or yarn/pnpm)
- Git for version control
- Accounts with these services (all have free tiers):
# Clone the repository with your desired project name
git clone https://github.com/yourusername/getshipkit-template.git my-saas-project
# Navigate to your project directory
cd my-saas-project
# Optional: Remove git history and start fresh
rm -rf .git
git init
git add .
git commit -m "Initial commit"npm installClerk Authentication Setup
- Create a new application in Clerk Dashboard
- Copy your API keys from the dashboard
- Paste them into your
.env.localfile:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key
Note: All Clerk integration code is already implemented in the project.
Supabase Database Setup (Super Simple)
- Create a new project in Supabase Dashboard
- Copy your project URL and anon key from Project Settings > API
- Paste them into your
.env.localfile:NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key - Set up your database schema by simply copying the contents of
schema_export.sqland pasting it into the SQL Editor in your Supabase dashboard
Note: All Supabase integration code is already implemented in the project.
Connecting Clerk with Supabase
This important step ensures your Clerk authentication seamlessly integrates with your Supabase database:
- Visit Clerk's Supabase Setup Page
- Select your Clerk application
- Copy the URL provided by Clerk
In your Supabase dashboard:
- Go to Project Settings β Authentication β Third Party Authentication
- Click "Add Provider" and select "Clerk"
- Paste the connection URL you copied from Clerk
- Save the configuration
Now your Clerk users will automatically sync with Supabase, allowing you to use row-level security with the authenticated user's ID.
Note: This integration allows you to use Supabase's powerful row-level security while leveraging Clerk's superior authentication experience.
Polar.sh Payments Setup
- Create an account on Polar.sh
- Generate your access token and webhook secret from the dashboard
- Paste them into your
.env.localfile:POLAR_ACCESS_TOKEN=your_polar_access_token POLAR_WEBHOOK_SECRET=your_webhook_secret_from_polar
Note: All Polar.sh integration code is already implemented in the project.
Setting up the Customer Portal:
The Polar Customer Portal allows users to manage their subscriptions. This boilerplate includes a "Manage Subscription" button on the billing page that redirects users to the Polar Customer Portal.
- The portal is configured at
/app/portal/route.tsusing theCustomerPortalfrom@polar-sh/nextjs. - Make sure your
POLAR_ACCESS_TOKENis set in your.env.localfile. - The portal uses the user's email as the customer ID by default. Modify the
getCustomerIdfunction if you need a different identifier.
Setting up Webhooks for Local Development:
During development, you need a public URL to receive webhook events from Polar. Here's how to set it up:
- Install ngrok if you haven't already
- Start your Next.js application:
npm run dev
- In a new terminal window, create a tunnel to your local server:
ngrok http 3000
- Copy the HTTPS URL provided by ngrok (e.g.,
https://a1b2-103-199-202-181.ngrok-free.app) - In the Polar dashboard, set your webhook URL by appending the API path:
https://your-ngrok-url.ngrok-free.app/api/webhook/polar - Polar will generate a WEBHOOK_SECRET for you
- Update your
.env.localfile with this new secret:POLAR_WEBHOOK_SECRET=your_new_webhook_secret
Now Polar can send real-time payment events to your local development environment!
Create a .env.local file in the root directory:
# Copy the example env file
cp .env.example .env.localThen add your API keys to the file. Here's a complete template:
# Authentication - Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# Set to either "sandbox" or "production"
POLAR_MODE=sandbox
# Polar Payments
POLAR_ACCESS_TOKEN=your_polar_access_token
POLAR_WEBHOOK_SECRET=your_webhook_secret_from_polar
POLAR_SUCCESS_URL=http://localhost:3000/dashboard/billing?success=true
# Polar Product IDs
POLAR_PRO_MONTHLY_ID=your_pro_monthly_plan_id
POLAR_PRO_ANNUAL_ID=your_pro_annual_plan_id
POLAR_ENTERPRISE_MONTHLY_ID=your_enterprise_monthly_plan_id
POLAR_ENTERPRISE_ANNUAL_ID=your_enterprise_annual_plan_id
# Payment Model Configuration (options: 'subscription' or 'onetime')
NEXT_PUBLIC_PAYMENT_MODEL=subscription
# Product IDs with display names (JSON ID:NAME format)
NEXT_PUBLIC_PRODUCTS={"starter_monthly":"b62c857d-4bd6-41ac-9721-5b26f592c19c:Basic","starter_annual":"96503da7-e3db-43d4-96e5-afbae18dc83f:Basic","pro_monthly":"20b937bc-fcba-4076-886b-621be00277e8:Premium","pro_annual":"0af3136d-4653-455b-a206-7b99f4ea7712:Premium","enterprise_monthly":"4b25a4af-fd24-459d-a8b3-385f2889116b:Ultimate","enterprise_annual":"f74696b1-55a1-498c-b776-d62e2ba17cd5:Ultimate","one_time":"e7a07f01-3323-44c5-8965-0bcd2ddea7af:Forever Access"}
Important: Replace the placeholder values with your own API keys from your service dashboards.
npm run devYour SaaS application will be running at http://localhost:3000
βββ src/
β βββ app/ # Next.js App Router
β β βββ api/ # Backend API endpoints
β β β βββ webhooks/ # Webhook handlers (Polar, etc.)
β β βββ auth/ # Authentication pages (sign-in, sign-up)
β β βββ dashboard/ # Protected dashboard pages
β β βββ pricing/ # Pricing page
β β βββ ... # Other public pages
β βββ components/ # Reusable React components
β β βββ ui/ # Base UI components (buttons, cards, etc.)
β β βββ dashboard/ # Dashboard-specific components
β β βββ layout/ # Layout components (header, footer)
β β βββ pricing/ # Pricing components
β β βββ ... # Other components
β βββ lib/ # Utilities and configurations
β β βββ supabase.ts # Supabase client setup
β β βββ clerk.ts # Clerk authentication utilities
β β βββ polar.ts # Polar.sh payment integration
β βββ middleware.ts # Authentication middleware
βββ public/ # Static assets (images, icons, etc.)
βββ supabase/ # Database migrations and types
βββ schema_export.sql # Database schema (ready to import)
βββ .env.example # Environment variables template
βββ package.json # Project dependencies
βββ tailwind.config.js # Tailwind CSS configuration
βββ next.config.js # Next.js configuration
This project uses DaisyUI and Tailwind CSS for a beautiful design system:
- Update
tailwind.config.jswith your brand colors:
// Customize your brand colors
theme: {
extend: {
colors: {
// Primary brand color with shades
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9', // Base color
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
// Secondary/accent color
secondary: {
50: '#f5f3ff',
// ...other shades
500: '#8b5cf6', // Base color
// ...other shades
},
// Neutral colors
neutral: {
50: '#fafafa',
// ...other shades
900: '#171717',
},
}
}
}-
Follow the 60-30-10 color rule for a balanced design:
- 60%: Primary neutral colors (backgrounds, containers)
- 30%: Secondary colors (sections, cards, secondary UI)
- 10%: Accent colors (buttons, links, highlights)
-
Design tips:
- Use consistent spacing (0.5rem, 1rem, 1.5rem, etc.)
- Prioritize visual hierarchy with size and weight contrasts
- Use interactive elements instead of static text where appropriate
-
Update company information in:
src/app/layout.tsx(metadata)src/components/footer.tsx(links and copyright)public/(favicon, logos, and images)
-
Modify pricing plans in:
src/app/pricing/page.tsx- Sync with your Polar.sh subscription tiers
Deploy your SaaS to production in minutes with Vercel:
Steps:
- Click the "Deploy" button above or connect your GitHub repository on Vercel
- Add all required environment variables from your
.env.localfile - Click "Deploy" and your app will be live in seconds!
Don't forget to:
- Update your Clerk redirect URLs to your production domain
- Configure your Polar.sh webhook URL to point to your production API endpoint
- Update CORS settings in Supabase if needed
Railway
- Connect your GitHub repository to Railway
- Set environment variables
- Deploy with:
npm run build && npm start
Docker
-
Build your Docker image:
docker build -t my-getshipkit-app . -
Run your container:
docker run -p 3000:3000 --env-file .env.production my-getshipkit-app
Authentication Problems
-
Issue: Users can't log in
- Verify Clerk API keys are correct in your .env file
- Check that redirect URLs match exactly in both Clerk dashboard and your code
- Look for CORS issues in browser console
-
Issue: Social logins not working
- Ensure social providers are properly configured in Clerk dashboard
- Check callback URLs are correctly set
Database Connection Issues
-
Issue: "Error connecting to database"
- Verify Supabase URL and keys are correct
- Check if your IP is allowed in Supabase dashboard
- Make sure your database schema matches the expected structure
-
Issue: Missing tables or columns
- Ensure you've pasted the full contents of
schema_export.sqlinto Supabase SQL Editor - Run the SQL commands in the Supabase dashboard
- Ensure you've pasted the full contents of
Payment Processing Errors
-
Issue: Payments not processing
- Verify Polar.sh credentials
- Check webhook endpoints are correctly configured
- Test with Polar.sh's sandbox mode first
-
Issue: Webhooks not being received
- Use a tool like ngrok to expose local endpoints for testing
- Check webhook secret is correctly set
- Next.js Documentation
- Tailwind CSS Documentation
- DaisyUI Documentation
- Clerk Documentation
- Supabase Documentation
- Polar.sh Documentation
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details. You are free to use, modify, distribute, and sell this software with minimal restrictions.
