### Quick Start Installation Commands (Shell)

Source: https://makerkit.dev/docs/nextjs-prisma/installation/overview

A set of shell commands to quickly clone the repository, install dependencies, set up the project, start Docker services, run database migrations, seed the database, and start the development server for the Next.js Prisma SaaS Kit. This guide assumes Docker is installed and running for database and mailer services.

```shell
git clone git@github.com:makerkit/next-prisma-saas-kit-turbo.git
pnpx pnpm install
pnpx turbo gen setup
pnpx run dev:compose:up
pnpx --filter web prisma:migrate
pnpx run seed
pnpx dev
```

--------------------------------

### Clone and Run Next.js Drizzle SaaS Kit

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/overview

This snippet provides the essential commands to clone the Next.js Drizzle SaaS Kit repository, install dependencies using pnpm, run the setup script, start Docker for database and mail services, apply database migrations, seed the database, and finally, start the development server.

```bash
git clone git@github.com:makerkit/next-drizzle-saas-kit-turbo.git
pnpm install
pnpm turbo gen setup
pnpm run dev:compose:up
pnpm --filter web drizzle:migrate
pnpm run seed
pnpm dev
```

--------------------------------

### Start Development Server

Source: https://makerkit.dev/docs/nextjs-prisma/development-guide/development-workflow

Command to start the development server for the web application. Ensure the database service is also running, as detailed in the Installation guide.

```bash
# Start all apps and packages
pnpm dev
# Development server runs at:
# - Web app: http://localhost:3000
```

--------------------------------

### Launch Prisma Studio

Source: https://makerkit.dev/docs/nextjs-prisma/installation/prerequisites

Opens Prisma Studio, a GUI for managing your database, after project dependencies are installed. Requires pnpm and Prisma to be set up.

```shell
pnpm --filter web prisma:studio
```

--------------------------------

### Install Node Modules (npm)

Source: https://makerkit.dev/docs/next-supabase/tutorials/initializing-project

After cloning the project repository, navigate into the project directory and run this command to install all the necessary Node.js dependencies. This command is executed in the terminal.

```bash
cd tasks-app
npm i
```

--------------------------------

### Install Project Dependencies

Source: https://makerkit.dev/docs/remix-supabase-turbo/installation/clone-repository

Installs all project dependencies using pnpm. This command should be run after cloning the repository and after pulling updates.

```bash
# Install dependencies
pnpm i
```

--------------------------------

### Set Up Post-Merge Hook for Automatic Installation

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/project-setup

Creates and configures a Git post-merge hook that automatically runs `pnpm install` after pulling updates. This ensures your project dependencies are kept up-to-date without manual intervention. The script is created in the `.git/hooks/` directory and made executable.

```bash
# Create post-merge hook
cat > .git/hooks/post-merge << 'EOF'
#!/bin/bash
echo "Running pnpm install after merge..."
pnpm install
EOF
# Make it executable
chmod +x .git/hooks/post-merge
```

--------------------------------

### Start PostgreSQL and Mailpit with Docker Compose (Shell)

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/prerequisites

This command uses pnpm to execute a Docker Compose command, starting a PostgreSQL database instance and the Mailpit email testing service. This is the recommended way to set up local database and email testing environments.

```shell
pnpm run dev:compose:up
```

--------------------------------

### Install Cookie Banner Plugin via CLI

Source: https://makerkit.dev/docs/next-supabase/plugins/cookie-banner

Installs the cookie banner plugin using the Makerkit CLI. This command automates the installation process and guides the user through the setup.

```bash
npx @makerkit/cli plugins install
```

--------------------------------

### Supabase Environment Output Example

Source: https://makerkit.dev/docs/remix-supabase/getting-started/running-the-application

Example output from the 'supabase start' command, displaying URLs and keys for the local Supabase instance. These keys (anon key and service_role key) are essential for configuring the application's connection to Supabase and must be added to the .env file.

```text
>supabase start
Applying migration 20221215192558_schema.sql...
Seeding data supabase/seed.sql...
Started supabase local development setup.
         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: ****************************************************
service_role key: ****************************************************

```

--------------------------------

### Create New Project with Makerkit CLI (CLI)

Source: https://makerkit.dev/docs/next-supabase/tutorials/initializing-project

This command executes the Makerkit CLI to create a new project. The CLI will guide you through a series of questions to set up your project structure and dependencies. It automates the process of creating a new repository and cloning it locally.

```bash
npx @makerkit/cli new
```

--------------------------------

### Example MDX File for Refund Policy

Source: https://makerkit.dev/docs/next-supabase/plugins/ai-chatbot

An example of an MDX file structured for the chatbot, defining a specific question about the refund policy and providing the corresponding answer.

```markdown
---
question: "What is your refund policy?"
---
We offer a 30-day money-back guarantee. If you're not happy with our product,
we will refund you.
```

--------------------------------

### Install Pnpm Package Manager

Source: https://makerkit.dev/docs/remix-supabase-turbo/installation/clone-repository

Installs the pnpm package manager globally using npm. Pnpm is used for managing project dependencies.

```bash
# Install pnpm
npm i -g pnpm
```

--------------------------------

### Admin Feature Request Detail Page Setup (TypeScript)

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/roadmap-plugin

Sets up the detail page for individual feature requests within the admin panel. It also utilizes `AdminGuard` for access control and `AdminIssueDetailPage` for displaying request specifics.

```typescript
import { AdminGuard } from '@kit/admin/components/admin-guard';
import { AdminIssueDetailPage } from '@kit/roadmap/admin';
export default AdminGuard(AdminIssueDetailPage);
```

--------------------------------

### Downgrade Contentlayer Packages in Remix Supabase

Source: https://makerkit.dev/docs/remix-supabase/how-to/troubleshooting/contentlayer-stuck

This snippet addresses an issue where Contentlayer gets stuck when starting the Makerkit application. It provides the npm command to downgrade the `contentlayer` and `next-contentlayer` packages to version `0.3.1`, which is a known fix for this problem. Ensure you have npm installed to use this command.

```bash
npm i contentlayer@0.3.1 next-contentlayer@0.3.1
```

--------------------------------

### API Endpoints for Testimonials (Remix)

Source: https://makerkit.dev/docs/remix-supabase-turbo/plugins/testimonials-plugin

This TypeScript code defines the API endpoints for managing testimonials using Remix. It includes a loader function to fetch testimonials and an action function to add new testimonials. It depends on server-side functions from '@kit/testimonial/server'. Ensure your Remix setup is configured to handle these routes.

```typescript
import { ActionFunctionArgs } from '@remix-run/server-runtime';
import { createTestimonialsLoader, createAddTestimonialAction } from '@kit/testimonial/server';

export const action = ({ request }: ActionFunctionArgs) => {
  return createAddTestimonialAction(request);
};

export const loader = ({ request }: ActionFunctionArgs) => {
  return createTestimonialsLoader(request);
};
```

--------------------------------

### Example Blog Post Frontmatter

Source: https://makerkit.dev/docs/next-fire/tutorials/adding-blog-posts

This example shows how to define the frontmatter for a blog post using MDX. It includes the 'title', 'excerpt', 'collection', 'date', 'live', and 'coverImage' properties, demonstrating how to map interface properties to Markdown content.

```markdown
---
title: An Awesome Post title
except: "Write here a short description for your blog post"
collection: changelog.json
date: '2022-01-05'
live: true
coverImage: '/assets/images/posts/announcement.webp'
tags:
  - changelog
---

```

--------------------------------

### Install pnpm Package Manager

Source: https://makerkit.dev/docs/supamode/installation/clone-repository

Installs the pnpm package manager globally using npm. This is a prerequisite for managing project dependencies.

```shell
npm i -g pnpm
```

--------------------------------

### Start Firebase Emulators

Source: https://makerkit.dev/docs/next-fire/configuration/firebase-functions

This command starts the Firebase emulators locally, allowing you to test your functions without deploying them to the cloud. It will load your defined functions, such as `helloWorld`, and make them accessible for testing.

```bash
npm run firebase:emulators:start
```

--------------------------------

### Example Private Key Format

Source: https://makerkit.dev/docs/next-fire/configuration/setting-up-firebase

An example of the expected format for the private key when stored in an environment file. The actual key content will be a long string of characters within the BEGIN and END markers.

```text
---
--BEGIN PRIVATE KEY---
--
***************************
---
--END PRIVATE KEY---
---
```

--------------------------------

### Run Automatic Project Setup Script

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/project-setup

This command initiates the automated project setup process for Makerkit. It configures your GitHub username, prepares Git remotes, and performs necessary checks. Run this command in your terminal.

```bash
pnpm turbo gen setup
```

--------------------------------

### Adding a New Page Example

Source: https://makerkit.dev/docs/nextjs-drizzle/project-structure/overview

Provides a step-by-step guide and code example for adding a new page to the application, including file location, default export, and metadata export.

```typescript
// apps/web/app/[locale]/my-page/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page description',
};

export default async function MyPage() {
  return <div>My Page Content</div>;
}
```

--------------------------------

### Start Development Server with PNPM

Source: https://makerkit.dev/docs/react-native-supabase/installation/common-commands

Starts the development server for the web application using PNPM. This command is used for local development and testing.

```shell
pnpm run dev
```

--------------------------------

### Clean Workspace and Reinstall Packages (pnpm)

Source: https://makerkit.dev/docs/next-supabase-turbo/troubleshooting/troubleshooting-installation

This command sequence is used to resolve issues with the Next.js dev server not starting. It involves cleaning the workspace, removing existing installations, and then reinstalling all project dependencies using pnpm. Ensure pnpm is installed and configured for the project.

```bash
pnpm run clean:workspace
pnpm run clean
pnpm i
```

--------------------------------

### Start Supabase Local Environment

Source: https://makerkit.dev/docs/next-supabase/tutorials/running-project

This command starts the Supabase local development environment using Docker. Docker must be installed and running. This command also applies migrations and seeds data.

```bash
npm run supabase:start
```

--------------------------------

### Load nvm and Install Node.js

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Loads the nvm environment and installs Node.js version 20. This ensures the correct Node.js runtime is available for project dependencies and execution.

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
nvm install 20
```

--------------------------------

### Example User Stories for Role Definition (Plain Text)

Source: https://makerkit.dev/docs/supamode/configuration/rbac

Illustrates example user stories to guide the definition of roles and their associated permissions. These stories follow a pattern of 'As a [role], I need to [action] so that [business value]'.

```plaintext
As a [role], I need to [action] so that [business value]
Examples:
- As a Staff Writer, I need to create article drafts so that I can contribute content
- As a Senior Editor, I need to publish articles so that content goes live
- As a Freelancer, I need to edit my drafts so that I can refine my work
```

--------------------------------

### Install Waitlist Plugin using CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/waitlist-plugin

Installs the waitlist plugin using the Makerkit CLI. This command fetches and installs the plugin into the `packages/plugins/waitlist` directory of your project.

```bash
npx @makerkit/cli@latest plugins install waitlist

```

--------------------------------

### Configure Email Sender

Source: https://makerkit.dev/docs/nextjs-drizzle/going-to-production/environment-setup

Specifies the email address from which transactional emails will be sent. This is required for all email-related functionalities in your application.

```dotenv
EMAIL_SENDER=noreply@your-domain.com
```

--------------------------------

### Documentation Group Metadata Example

Source: https://makerkit.dev/docs/nextjs-prisma/marketing-pages/documentation

Shows an example of a metadata file ('getting-started.mdoc') used to define a documentation group. This file includes frontmatter for title, description, and ordering, which helps in rendering the navigation and content for the group.

```markdown
---
title: "Getting Started"
description: "Learn how to get started with our product."
order: 1
---

```

--------------------------------

### Complete Supabase Security Test Example

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-tests

This comprehensive example demonstrates setting up test users, creating a team, and verifying access controls using `makerkit.authenticate_as()` and PostgreSQL roles. It covers scenarios for RLS bypass during setup and RLS enforcement for user access.

```sql
begin;
create extension "basejump-supabase_test_helpers" version '0.0.6';
select no_plan();
-- Setup test users
select makerkit.set_identifier('owner', 'owner@example.com');
select makerkit.set_identifier('member', 'member@example.com');
select makerkit.set_identifier('stranger', 'stranger@example.com');
-- Create team (as owner)
select makerkit.authenticate_as('owner');
select public.create_team_account('TestTeam');
-- Add member using postgres role (bypasses RLS)
set local role postgres;
insert into accounts_memberships (account_id, user_id, account_role)
values (
  (select id from accounts where slug = 'testteam'),
  tests.get_supabase_uid('member'),
  'member'
);
-- Test member access (RLS enforced)
select makerkit.authenticate_as('member');
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Member can see their team'
);
-- Test stranger cannot see team (RLS enforced)
select makerkit.authenticate_as('stranger');
select is_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Stranger cannot see team due to RLS'
);
-- Verify team actually exists (bypass RLS)
set local role postgres;
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Team exists in database (confirms RLS is working, not missing data)'
);
select * from finish();
rollback;

```

--------------------------------

### Start Stripe CLI Listener (Shell)

Source: https://makerkit.dev/docs/next-supabase-lite/stripe-configuration

This command initiates the Stripe CLI listener, which is essential for testing Stripe integrations. It requires Docker to be installed and running. The command connects the CLI to your Stripe account and listens for webhook events. Ensure your `.env` file has the STRIPE_WEBHOOK_SECRET set correctly.

```shell
npm run stripe:listen

```

--------------------------------

### Get User Session Data - Next.js Hook Example

Source: https://makerkit.dev/docs/next-fire/api/useUserSession

Demonstrates how to use the useUserSession custom hook in a Next.js React component to fetch and display the current user's ID. This example illustrates the practical application of the hook for retrieving authentication data.

```typescript
import { useUserSession } from '~/core/hooks/use-user-session';

function MyComponent() {
  const userSession = useUserSession();
  const userId = userSession?.auth?.uid;

  return (
    <div>
      <p>Current user ID: {userId}</p>
    </div>
  );
}
```

--------------------------------

### Run ngrok script with npm

Source: https://makerkit.dev/docs/next-fire/lemon-squeezy

This command demonstrates how to execute the ngrok script defined in your package.json file. Running 'npm run ngrok' will start the ngrok tunnel, making your local development server accessible from external services like webhook providers.

```bash
npm run ngrok
```

--------------------------------

### Installing MegaMailer Package

Source: https://makerkit.dev/docs/next-supabase-turbo/emails/custom-mailer

Provides the command to install the newly created `@kit/megamailer` package as a workspace dependency within the `@kit/mailers` project. This command uses `pnpm` for package management.

```bash
pnpm i "@kit/megamailer:workspace:*" --filter "@kit/mailers"
```

--------------------------------

### Register Testimonials Namespace

Source: https://makerkit.dev/docs/remix-supabase-turbo/plugins/testimonials-plugin

TypeScript code to add the 'testimonials' namespace to the application's internationalization settings. This ensures that the plugin's translations are loaded correctly.

```typescript
export const defaultI18nNamespaces = [
 // ... your existing namespaces
 'testimonials',
];
```

--------------------------------

### Install Project Dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Installs all project dependencies using PNPM after navigating into the cloned repository. This is necessary before building the Docker image.

```bash
cd repo # Replace repo with the name of the repository
pnpm install
```

--------------------------------

### Install Cookie Banner Plugin using Git Subtree (HTTPS)

Source: https://makerkit.dev/docs/next-fire/plugins/cookie-banner

Installs the cookie banner plugin using git subtrees with an HTTPS URL, as an alternative if SSH access fails. Ensure proper SSH setup with your key if using the SSH URL.

```bash
git subtree add --prefix plugins/cookie-banner https://github.com/makerkit/next-firebase-saas-kit-plugins cookie-banner --squash
```

--------------------------------

### Configure Supabase Connection Details

Source: https://makerkit.dev/docs/next-supabase-turbo/configuration/environment-variables

Provides essential credentials for connecting to your Supabase project. Includes project URL, public API key, and secret keys for server-side operations and webhooks.

```env
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLIC_KEY=your-public-key
SUPABASE_SECRET_KEY=your-service-role-key
SUPABASE_DB_WEBHOOK_SECRET=your-webhook-secret
```

--------------------------------

### Lemon Squeezy Setup Fee + Metered Usage Example

Source: https://makerkit.dev/docs/react-router-supabase-turbo/billing/lemon-squeezy

Lemon Squeezy supports a `setupFee` property for metered usage plans. This allows you to charge a one-time setup fee in addition to metered usage, such as a flat fee plus a per-request charge.

```markdown
Lemon Squeezy has support for the property `setupFee`: this property allows you to create a metered usage plan with a setup fee. That is, assuming you have a plan that charges a flat fee of $10 and then $1 per 1000 requests, you can set the `setupFee` to 10 and then set up the `tiers` to charge $1 per 1000 requests.
NB: the setup fee is only charged once, when the subscription is created.
```

--------------------------------

### Example Custom CMS Client Implementation (TypeScript)

Source: https://makerkit.dev/docs/nextjs-drizzle/content/creating-your-own-cms-client

Demonstrates how to implement the CmsClient interface to create a custom CMS client that fetches data from a hypothetical external HTTP API. This example shows the implementation of methods for retrieving content items, categories, and tags by making POST and GET requests.

```typescript
import { CmsClient } from '@kit/cms-types';

export class MyCmsClient implements CmsClient {
  async getContentItems(options) {
    const response = await fetch('https://my-cms-api.com/content', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    const { total, items } = await response.json();
    return { total, items };
  }
  async getContentItemBySlug({ slug, collection }) {
    const response = await fetch(
      `https://my-cms-api.com/content/${collection}/${slug}`,
    );
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
  async getCategories(options) {
    const response = await fetch('https://my-cms-api.com/categories', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    return response.json();
  }
  async getCategoryBySlug(slug) {
    const response = await fetch(`https://my-cms-api.com/categories/${slug}`);
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
  async getTags(options) {
    const response = await fetch('https://my-cms-api.com/tags', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    return response.json();
  }
  async getTagBySlug(slug) {
    const response = await fetch(`https://my-cms-api.com/tags/${slug}`);
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
}
```

--------------------------------

### Manage Local Supabase Instance

Source: https://makerkit.dev/docs/next-supabase-turbo/development/migrations

Commands to start and reset a local Supabase instance using pnpm. 'supabase:web:start' initializes the Supabase services, while 'supabase:web:reset' reverts the local database to its initial state, useful for testing migrations.

```bash
pnpm run supabase:web:start   # start supabase
pnpm run supabase:web:reset   # reset supabase

```

--------------------------------

### Run Stripe Mock Server

Source: https://makerkit.dev/docs/next-fire/testing/running-tests

Starts the official Stripe mock server for testing Stripe Checkout and other Stripe-related functionalities. This command requires Docker to be installed and running.

```bash
npm run stripe:mock-server
```

--------------------------------

### Example Landing Page Structure in React

Source: https://makerkit.dev/docs/nextjs-drizzle/marketing-pages/landing-page

Demonstrates a typical structure for a React-based landing page using various Makerkit marketing components. It includes sections for a Hero, Feature Showcase, Ecosystem Showcase, and Pricing, illustrating how these components can be composed together.

```jsx
function Home() {
  return (
    <div className="mt-4 flex flex-col space-y-24 py-14">
      {/* Hero Section */}
      <div className="mx-auto">
        <Hero
          pill={<Pill label="New">...</Pill>}
          title={...}
          subtitle={...}
          cta={<MainCallToActionButton />}
          image={<Image ... />}
        />
      </div>
      {/* Features Section */}
      <div className="container mx-auto">
        <FeatureShowcase heading={...} icon={...}>
          <FeatureGrid>
            <FeatureCard ... />
            <FeatureCard ... />
          </FeatureGrid>
        </FeatureShowcase>
      </div>
      {/* Ecosystem Showcase */}
      <div className="container mx-auto">
        <EcosystemShowcase heading="..." description="...">
          <Image ... />
        </EcosystemShowcase>
      </div>
      {/* Pricing Section */}
      <div className="container mx-auto">
        <SecondaryHero
          pill={<Pill .../>}
          heading="..."
          subheading="..."
        />
        <PricingTable config={billingConfig} ... />
      </div>
    </div>
  );
}
```

--------------------------------

### Configure Feature Flags

Source: https://makerkit.dev/docs/nextjs-drizzle/going-to-production/environment-setup

Enables or disables specific features within your application, such as personal account billing or team account support. These flags should match your development configuration.

```dotenv
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
```

--------------------------------

### Define Question and Answer Structure for MDX

Source: https://makerkit.dev/docs/next-supabase/plugins/ai-chatbot

Structure your question and answer content for AI training using MDX files. Each file should start with frontmatter defining the 'question' and the rest of the content as the 'answer'.

```markdown
---
question: "<question>"
---
<answer>
```

--------------------------------

### Importing Supamode Package Modules

Source: https://makerkit.dev/docs/supamode/development/packages

Examples of how to import different types of modules (utilities, API routes, components, hooks, types, schemas) from an installed Supamode package using its defined exports.

```typescript
// Importing utilities
import { formatCurrency } from "@kit/my-package/utils";
// Importing API routes (server-side only)
import { registerMyFeatureRoutes } from "@kit/my-package/routes";
// Importing React components
import { MyFeatureList } from "@kit/my-package/components";
// Importing React hooks
import { useMyFeatureData } from "@kit/my-package/hooks";
// Importing types (safe for both client and server)
import type { MyFeatureItem } from "@kit/my-package/types";
// Importing Zod schemas (for validation on both client and server)
import { MyFeatureItemSchema } from "@kit/my-package/schemas";
```