⚡uperKit

SuperKit Documentation

A fully configured Next.js starter kit with Supabase and Paddle integration

Features

  • Next.js App Router with file-based routing and layouts
  • TypeScript config out of the box
  • TailwindCSS with dark mode support
  • Supabase
    • Email/password sign-up & sign-in
    • Google authentication
    • Session persistence
    • Example CRUD with Supabase client
  • Paddle Payments
    • Hosted checkout integration
    • Webhook handling for license management
  • Responsive design and mobile-friendly components
  • ESLint, Prettier, and Husky pre-commit checks

Prerequisites

Getting Started

1. Clone the repo

git clone https://github.com/zeeshana07x/superkit.git
cd superkit

2. Install dependencies

npm install
# or
pnpm install

3. Set up environment

Copy .env.example to .env.local and fill in your keys (see Environment Variables section).

4. Run in development

npm run dev
# or
pnpm dev

Environment Variables

Create a .env.local file at the project root:

# Next.js
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Paddle
NEXT_PUBLIC_PADDLE_ENV=sandbox # or production
PADDLE_API_KEY=
PADDLE_NOTIFICATION_WEBHOOK_SECRET=
NEXT_PUBLIC_PADDLE_CLIENT_TOKEN=

Authentication Flow

Email/Password Authentication

SuperKit comes with email/password authentication pre-configured through Supabase.

Google Authentication

To enable Google authentication with Supabase:

  1. Go to your Supabase project dashboard
  2. Navigate to Authentication → Providers
  3. Enable Google provider
  4. Create a Google OAuth application in the Google Cloud Console
  5. Add your authorized redirect URI from Supabase to your Google OAuth app
  6. Copy the Client ID and Client Secret from Google to Supabase
  7. Save your changes
  8. Update your app to include the Google sign-in button using the Supabase auth helpers

Paddle Integration

SuperKit integrates Paddle for payment processing and subscription management. Key features include:

  • Three-tier pricing page that's fully localized for 200+ markets using Paddle.js
  • Integrated checkout experience built with Paddle Checkout
  • Automatic syncing of customer and subscription data between Paddle and your app using webhooks
  • Ready-made screens for customers to manage their payments and subscriptions

For more details on setup, refer to the Paddle documentation.

Contributing

We ❤️ contributions! Whether it's reporting bugs, suggesting new features, improving documentation, or submitting code, your input is welcome.

How to Contribute

  1. Fork the repository – Click the "Fork" button at the top-right of the SuperKit repo page to create your own copy.
  2. Clone your fork locally
    git clone https://github.com/zeeshana07x/superkit.git
cd superkit
  3. Create a new branch
    git checkout -b feat/your-feature-name

    Use a descriptive branch name, e.g. fix/navbar-scroll or feat/paddle-webhook.

  4. Make your changes
    • Follow the existing code style
    • Add or update code as needed
    • Update documentation in README.md
  5. Commit your work
    git add .
git commit -m "feat: describe your feature or fix"
  6. Push your branch to GitHub
    git push origin feat/your-feature-name
  7. Open a Pull Request
    • Navigate to your fork on GitHub
    • Click "Compare & pull request"
    • Fill out the PR template, explaining what you changed and why

Reporting Issues

  • Please search existing issues before opening a new one
  • Use a clear, descriptive title and include steps to reproduce bugs or screenshots if applicable

Code of Conduct

This project follows the Contributor Covenant Code of Conduct to ensure a welcoming and respectful community for all contributors.