> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kobble.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Welcome to Kobble documentation. Here you can learn how to build your SaaS faster than ever.

## Why Kobble?

We have been building SaaS for years and we always repeated the same steps over and over again:

* add user authentication (using Firebase, Supbase, Auth0, etc.)
* connect Stripe and deal with their webhooks hell.
* build a customer portal to display pricing tables, invoices, etc.
* managing permissions of users frontend-side and backend-side depending on their subscription
* ∞ overthinking everything

Kobble is a platform that provides these features **out of the box** with SDKs that you can integrate in minutes.

**At Kobble we are on a mission to stop this madness and help you launch your product faster.**

Our mission is to help you achieve product market fit faster.

### How much time can I save?

With Kobble, you save (at least):

* +3 days building a customer portal
* +3 days dealing with Stripe pricing tables and webhooks and all this boring stuff.
* +4 hours to authenticate users
* +4 hours to set up your analytics funnel in Amplitude
* +2 days to build a robust permission system + quotas
  \=> 7+ days of headaches saved (at very least)
* ∞ hours overthinking...

### What does it look like?

It depends on the framework you are using but in a nutshell here's how it looks for a React app and a Node.js/Go backend:

<CodeGroup>
  ```jsx Frontend side example theme={null}
  import {
      SignedIn,
      HasPermission,
      HasRemainingQuota,
  } from '@kobbleio/react';

      return (
      <>
          <SignedIn>
              <HasPermission permission={'createImage'}>
                  <!-- Your code here -->
              </HasPermission>
              <HasRemainingQuota quota={'imageGenerated'}>
                  <!-- Your code here -->
              </HasRemainingQuota>
          </SignedIn>
      </>
      )
  ```

  ```jsx JS Backend side example theme={null}
      import { Kobble } from '@kobbleio/admin';

      const kobble = new Kobble('api-key');

      const { userId } = await kobble
      .auth
      .verifyAccessToken('user-token')

      const user = kobble.user(userId)

      const hasPerm = await user.hasPermission(
      'generate-image'
      )

      const hasQuota = await user.hasRemainingQuota(
      'image-generated'
      )

      await user.incrementQuotaUsage(
      'image-generated'
      )
  ```

  ```go Go Backend side example theme={null}
  package kobble

  import (
    "fmt"

    "github.com/kobble-io/go-admin/kobble"
    "github.com/kobble-io/go-admin/users"
  )

  var secret = os.Getenv("KOBBLE_SECRET")

  func doKobbleThings(token string) error {
    k := kobble.New(secret, kobble.Options{})
    tk, err := k.Auth.VerifyAccessToken(token)
    if err != nil {
      return fmt.Errorf("failed to verify access token: %w", err)
    }

    hasPerm, err := k.Users.HasPermission(tk.UserID, []string{"event-handled"}, nil)
    if err != nil {
      return fmt.Errorf("failed to check user quota: %w", err)
    }
    if !hasPerm {
      return fmt.Errorf("user does not have permission to increment quota")
    }

    hasRamaining, err := k.Users.HasRemainingQuota(tk.UserID, []string{"event-handled"}, nil)
    if err != nil {
      return fmt.Errorf("failed to check user quota: %w", err)
    }
    if !hasRamaining {
      return fmt.Errorf("user quota exceeded")
    }

    err = k.Users.IncrementQuotaUsage(tk.UserID, "event-handled", &users.IncrementQuotaOptions{})
    if err != nil {
      return fmt.Errorf("failed to increment user quota: %w", err)
    }

    return nil
  }
  ```
</CodeGroup>

## Core Concepts

<CardGroup cols={2}>
  <Card title="Customer portal" icon="users" href="/product/customer-portal">
    The central hub for your users.
  </Card>

  <Card title="User Authentication" icon="user" href="/product/authentication">
    Sign up and sign in users with ease.
  </Card>

  <Card title="Monetization" icon="money-bills" href="/product/monetization">
    Get your first paid member in under 5 minutes.
  </Card>

  <Card title="Analytics" icon="chart-simple" href="/product/analytics">
    Understand your users and their usage.
  </Card>
</CardGroup>