DOCSEARCHbyAlgolia
Submit Docs

Hikari SaaS Starter Kit

repository·main·Indexed 18 days ago

https://github.com/antoineross/hikari

A feature-rich Next.js 14 SaaS starter kit built with the App Router, Supabase for authentication and database management, and Stripe for billing and subscriptions. It includes integrated documentation via Fumadocs, styling with Tailwind CSS, and UI components from shadcn/ui and magicui. The kit provides pre-built infrastructure for landing pages, dashboards, and a fixture-based system for bootstrapping Stripe products and pricing.

Tokens
17.1K
Snippets
62
Records
80
Agent score
63%

What's inside Hikari

  1. Overview of Hikari SaaS Starter

    main

    Hikari is an open-source Next.js starter kit designed to accelerate the development of SaaS applications. It provides a pre-integrated foundation using several key technologies:

    • Next.js: Core framework
    • Supabase: Backend-as-a-service (Database, Auth, etc.)
    • Stripe: Payment processing
    • Vercel: Deployment platform
    • MagicUI & SyntaxUI: UI components
    • Fumadocs: Documentation framework

  2. Overview of the Hikari tech stack

    main

    Hikari is an open-source SaaS starter template built with the following core technologies:

    • Next.js 14 (App Router): Provides modern routing, automatic code splitting, and a hybrid approach using both Server Components (for performance/SEO) and Client Components (for interactivity).
    • Supabase: Handles the backend, including PostgreSQL database management, User Authentication (including social auth), and Real-time data synchronization.
    • Stripe: Manages billing, including Stripe Checkout flows, subscription tiers, and automated billing cycles via webhooks.
    • Tailwind CSS: Used for utility-first styling and rapid UI development.
    • Fumadocs: Integrated for managing documentation and the project blog.

  3. Core technologies and stack in Hikari

    main

    Hikari is a Next.js starter template designed for building SaaS applications. It is built upon a specific stack of modern tools to provide documentation, authentication, and database management out of the box:

    • Framework: Next.js
    • Documentation: Fumadocs (replaces Contentlayer for Next.js 14+ compatibility)
    • Authentication & Database: Supabase (provides Postgres database and authentication services)
    • UI Components: ShadcnUI and MagicUI
    • Styling & Design: A cohesive, responsive design system optimized for landing pages, documentation, blogs, and dashboards.

  4. Explore Hikari UI components and design

    main

    Hikari provides a comprehensive set of UI elements and pre-built pages to accelerate frontend development:

    UI Libraries

    • shadcn/ui: For accessible and customizable components.
    • magicui: For enhanced UI elements.

    Landing Page Components

    Includes ready-to-use sections for:

    • Hero sections
    • Feature highlights
    • FAQ sections
    • Pricing components
    • Wall of love (testimonials)
    • Navigation (Regular and unique floating circular navigation bars)

    Dashboard and User Management

    • Dashboard: Pre-built using shadcn/ui blocks.
    • User Pages: Dedicated /account and /settings routes for managing user profiles and preferences.

  5. Create a tRPC Router

    main

    The tRPC router is the central hub for managing API requests and defining API procedures. It provides end-to-end type safety, ensuring that changes to types or props in the backend are automatically reflected in the frontend.

    In this project, you define your API procedures within the router.ts file located in the trpc/ folder.

  6. Install required dependencies for Hikari

    main

    Before starting with Hikari, you must install the following software and tools:

    • PNPM: The package manager used for the project.
    • Docker: Used for containerization.
    • Stripe CLI: Required for Stripe integration and testing.
    • Supabase CLI: Required for local Supabase development and database management.
    # Install PNPM via npm
npm install -g pnpm

# Or via brew
brew install pnpm

  7. Prepare for production deployment

    main

    Before going live with Hikari, complete these steps to transition from Stripe test mode to production mode:

    1. Archive Test Products: Archive all products created in Stripe 'test mode' to avoid confusion.
    2. Update Stripe Keys: Obtain your production API keys from the Stripe dashboard. Replace the test mode values in your Vercel environment variables with these production keys.
    3. Configure Production Webhooks: Create a new webhook in your Stripe production dashboard and add the production webhook secret to your Vercel environment variables.

  8. Set up Stripe integration

    main

    To enable payments, configure Stripe in your .env.local and set up webhooks.

    1. API Keys: In your Stripe Dashboard (Test Mode), copy the Publishable key and Secret key to .env.local:
      • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
      • STRIPE_SECRET_KEY
    2. Stripe CLI: Install the CLI and log in:
      stripe login
    3. **Webhooks**: Forward events to your local server:
   ```bash
stripe listen --forward-to http://localhost:3000/api/webhooks/stripe

    Copy the printed webhook signing secret to STRIPE_WEBHOOK_SECRET in .env.local.

    stripe login
stripe listen --forward-to http://localhost:3000/api/webhooks/stripe

  10. Set up Supabase Storage buckets and policies

    main

    To implement Supabase storage in Hikari, you must create a bucket and configure Row Level Security (RLS) policies to control asset access. This guide assumes you have already set up Supabase locally.

    1. Create a Storage Bucket

    1. Access your local Supabase client (typically at http://127.0.0.1:54323/project/default/storage/).
    2. Create a new bucket named images.

    2. Configure RLS Policies for the images bucket

    You need to add two specific policies to the images bucket to manage access for anonymous and authenticated users:

    Policy for Anonymous Users (Public Access)

    Use this to allow anyone to view/select images (e.g., in a public folder):

    • Template: "Allow access to JPG images in a public folder to anonymous users"
    • Allowed Operation: SELECT
    • Target Roles: anon

    Policy for Authenticated Users (Private/Write Access)

    Use this to allow logged-in users to manage files:

    • Template: "Give users access to a folder only to authenticated users"
    • Allowed Operations: Select all options (INSERT, SELECT, UPDATE, DELETE)
    • Target Roles: authenticated

    Once configured, authenticated users will have the necessary permissions to upload, edit, and delete files within the images bucket.

  11. Implement user avatar uploads with Supabase Storage

    main

    To allow users to update their avatars, you need to combine a client-side upload component with a server-side API route. The process involves:

    1. Client-side: Use an ImageUpload component to handle file selection and upload the file to a Supabase Storage bucket using the uploadImage utility.
    2. Storage: The file is uploaded to a specific bucket (e.g., "avatar") and organized into a folder named after the user's ID.
    3. Database Update: Once the upload is successful, call an API route to update the avatar_url field in your users table with the new URL.

    This ensures the image is persisted in storage and the reference is saved in your database.

    // High-level flow:
// 1. Upload file to Supabase Storage
const { imageUrl: uploadedImageUrl, error } = await uploadImage({
  file: imageFile,
  bucket: 'avatar',
  folder: user.id,
});

// 2. Update database via API
await fetch('/api/update-avatar', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: user.id, avatarUrl: uploadedImageUrl }),
});