/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    span: "span",
    ol: "ol",
    li: "li",
    strong: "strong",
    code: "code"
  }, props.components), {Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "I am happy to announce the release of the new waitlist plugin for Makerkit 🎉"
    }), "\n", _jsx(_components.p, {
      children: "The waitlist plugin allows your users to sign up for early access to your app, making it easier for you to build a list of interested users before your app is even launched."
    }), "\n", _jsx(_components.p, {
      children: "This was one of the most requested additions to Makerkit, and I'm excited to finally be able to share it with you! 🚀"
    }), "\n", _jsxs(_components.h2, {
      id: "how-does-the-waitlist-plugin-work",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#how-does-the-waitlist-plugin-work",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "How does the Waitlist plugin work?"]
    }), "\n", _jsx(_components.p, {
      children: "Here is a short summary of how the waitlist plugin works:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Waitlist form"
        }), ": The waitlist plugin adds a form to your app that allows users to sign up for early access. You can add this anywhere in your app, and customize the trigger to fit your design."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Waitlist collection"
        }), ": The users who sign up for early access are added to the ", _jsx(_components.code, {
          children: "waitlist"
        }), " table in your database."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Marking users as invited"
        }), ": To invite users to your app, you can mark them as ", _jsx(_components.code, {
          children: "approved"
        }), " from the Supabase dashboard, or by updating the ", _jsx(_components.code, {
          children: "approved"
        }), " field in the ", _jsx(_components.code, {
          children: "waitlist"
        }), " table with a query (such as, customers subscribed before a certain date)"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Email notifications"
        }), ": Our Database trigger will send an email to the user when they are marked as ", _jsx(_components.code, {
          children: "approved"
        }), " - letting them know they can now access the app."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "The signup form will look like the below image:"
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/waitlist-plugin.webp",
      width: "1182",
      height: "1000"
    }), "\n", _jsxs(_components.h2, {
      id: "how-to-install-the-waitlist-plugin-into-your-kit",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#how-to-install-the-waitlist-plugin-into-your-kit",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "How to install the waitlist plugin into your Kit"]
    }), "\n", _jsxs(_components.p, {
      children: ["Please follow the ", _jsx(_components.a, {
        href: "/docs/next-supabase-turbo/waitlist-plugin",
        children: "documentation to install the Waitlist Plugin"
      }), ". This will guide you through the process of adding the plugin to your app and setting up the database migrations."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


How to install the waitlist plugin into your Kit

Changelog


**Makerkit's Next.js 15 update is currently available, but will become the default branch when Next.js 15 is released.**

---

It's almost time to upgrade to Next.js 15! 🚀

I have been busy preparing the migration to Next.js 15, and I am excited to announce that we are making the switch to Next.js 15 in Makerkit as soon as the stable release is out.

In this post, we will cover the changes that you need to make to your project to upgrade to Next.js 15, and how Makerkit will approach the migration.

## What is Next.js 15?

Next.js 15 is a major release that includes several new features and improvements. It's the culmination of App Router's evolution, and it's a significant step forward in the evolution of Next.js.

Here are some of the key changes in Next.js 15:

1. **Improved Turbopack**: In Next.js 15, Turbopack will be **blazingly fast** by default. This means that you will see a significant improvement in the performance of your application when using Turbopack 🚀
2. **React 19**: Next.js 15 uses React 19 by default, a major update to React that includes several new features and improvements, such as the React Compiler
3. **Caching updates**: caching behavior will now be less aggressive by default. It's now more opt-in and configurable. The `fetch` function is no longer cached by default, which is a very pleasant change.
4. **Improved Stacktraces**: Hydration errors will now much easier to debug. This has been a long-standing issue, and it's a great improvement.
5. **Partial Pre-Rendering (PPR)**: Next.js 15 introduces a new feature called Partial Pre-Rendering (PPR), which allows you to serve the static parts of your application while still server-side rendering the dynamic parts. This will significantly speed up your Vercel-deployed applications.
6. **Server Functions**: Next.js renames Server Actions to Server Functions, hinting at possible future improvements (such as adding more HTTP methods).

## What are the Next.js 15 changes?

Let's take a look at the changes that will be made in Next.js 15.

### Turbopack got faster in Next.js 15

Turbopack is the new Rust-based bundler that powers Next.js 15. It's the Webpack successor meant to be faster and easier to debug.

While already available in Next.js 14, Turbopack's performance was not the leap forward we had hoped for. According to my tests, it is now a lot faster than the previous version, and we can finally see the benefits of the new bundler.

In my tests, most pages compile in under 1 second, and live reload takes less than 100 milliseconds. While page compilation could be faster, the live reload is extremely satisfactory.

#### Profiling Turbopack

When it comes to the speed of the bundler, Turbopack seems to be improving rapidly. However, extremely large or unoptimized dependencies (such as barrel files) can still cause severe slowdowns. Therefore, make sure to analyze your dependencies and optimize them as much as possible.

To do so, you can enable the profiling feature in Turbopack. Set the environment variable `NEXT_TURBOPACK_TRACING` to `1` and run the application. This will generate a `trace.log` file in the `.next` directory, which you can analyze to identify any performance bottlenecks. I've successfully used this to locate dependencies that were not necessary and removed them.

For more information, refer to the [Turbopack documentation](https://nextjs.org/docs/canary/architecture/turbopack).

### Hello, React 19

React 19 is almost here, and Next.js 15 will use it by default. While Next.js was already using React's RC under the hood, allowing Server Components and Server Actions, React 19 will finally become the stable version of React.

This is a major milestone for Next.js, and it's a great step forward in the evolution of React. React 19 brings several new features and improvements, such as Server Components, Server Functions, major hydration improvements, and more.

To familiarize yourself with React 19, I recommend checking out the [React 19 documentation](https://19.react.dev/reference/react).

#### Introducing the React Compiler

The React Compiler is an experimental tool that aims to improve the performance of React applications through automatic code optimization.

It is important to understand that this compiler is **not yet ready for production use** and should be approached with caution.

One of the key ways the React Compiler improves performance is by automatically memoizing code within components and hooks. Memoization is a technique where the results of expensive function calls are cached, preventing redundant computations and improving performance.

While React already provides memoization APIs like `useMemo`, `useCallback`, and `React.memo`, these require manual implementation and can be difficult to use correctly.

The React Compiler leverages its knowledge of JavaScript and React's rules to perform this memoization automatically. It primarily focuses on two areas for optimization:

- **Skipping Cascading Re-renders**: When a component's state changes, React typically re-renders that component and all of its children. The compiler analyzes the code and identifies components that don't need to be re-rendered, preventing unnecessary updates.
- **Memoizing Expensive Calculations**: The compiler can detect and memoize the results of computationally expensive functions within components and hooks, reducing the need to recalculate these values on every render.

However, there are some important considerations and limitations to keep in mind:

- **Still Experimental**: The React Compiler is still under active development and may contain undiscovered bugs or limitations. Using it in production environments is not recommended at this stage.
- **Reliance on Rules of React**: The compiler's effectiveness depends on the code adhering to the Rules of React. While it can handle some deviations from these rules, it might not always be able to detect and address all violations, potentially leading to unexpected behavior.
- **Limited Memoization Scope**: Currently, the React Compiler's memoization capabilities are limited to React components and hooks. It does not memoize every function in the codebase, and memoization is not shared across different components or hooks. This means that an expensive function used in multiple components would still be executed multiple times.

Makerkit will initially keep the compiler disabled, however, we will be gradually introducing it to our projects as we gain more experience with it. You can of course enable it at any time by setting it to `true` in your `next.config.mjs` file.

```js title="apps/web/next.config.mjs"
export default {
  reactStrictMode: true,
  experimental: {
    reactCompiler: true,
  },
};
```

#### How to use the React Compiler

To use the React Compiler, you need to enable it in your `next.config.mjs` file and set the `

Please check out the [React Compiler documentation](https://19.react.dev/learn/react-compiler)

### Caching Updates in Next.js 15

Next.js App Router's caching implementation was harshly criticized by the community for the inability to opt-out of caching. This is no longer the case in Next.js 15, as it changes to the default behavior.

The `fetch` function is no longer monkey-patched by default, which means that you will need to explicitly opt-in to caching. This is a very pleasant change, as it allows you to opt-in to caching only for the parts of your application that need it.

### PPR - Partial Pre-Rendering

Partial Prerendering (PPR) is a new rendering model in Next.js that blends static and dynamic rendering within a single route.

With PPR, a static "shell" of the route, including elements like the navbar and product details, is served initially for fast loading. Dynamic components, such as a user's cart or recommendations, are loaded asynchronously and streamed into designated "holes" in the shell, optimising the overall page load time.

This method ensures a quicker initial page load while still allowing for personalised content. Although still experimental, PPR is projected to be a significant advancement in web development, potentially becoming the standard rendering model in the future.

For more information about PPR, refer to the official [Partial Pre-Rendering documentation](https://nextjs.org/docs/canary/app/building-your-application/rendering/partial-prerendering).

#### How to enable PPR in Next.js 15

You can enable PPR in Next.js 15 by adding the following configuration to your `next.config.mjs` file:

**Enabling PPR Globally**: Source indicates that adding ppr: 'incremental' within the experimental object of the next.config.mjs file enables PPR for the Next.js application.

```js
export default {
  // other config options
  experimental: {
    ppr: 'incremental',
    // other experimental options
  },
};
```

 **Specific Route Configuration**: Export the `experimental_ppr` constant from a route's file to enable PPR for that route only (or layout):

```tsx
export const experimental_ppr = true;
```

This is still an experimental feature, so please be aware that it may change in future versions of Next.js, and may be unstable. Makerkit will be experimenting with this feature and will update this guide as we make progress.

### Improved Stacktraces for Hydration Errors

Hydration errors are a common issue in Next.js applications. They can be difficult to debug, and they can be frustrating to users. In Next.js 15, the stacktraces are much easier to understand, and the errors are much more helpful.

### Dynamic APIs are now asynchronous

Dynamic APIs are now asynchrononous, Promise-based APIs. This means that you must use the `await` keyword to wait for the API to return a value before using it.

Previously, you could use the `cookies`, `headers`, and `searchParams` APIs to access cookies, headers, and search params. These APIs were synchronous, but it's no longer the case.

In Next.js 15, these APIs are now asynchronous in order to support new rendering mdes, such as Dynamic IO. This is a breaking change.

Before, you would use the following code to use cookies in a Server Component:

```tsx
import { cookies } from 'next/headers';

function MyServerComponent() {
  const cookie = cookies().get('my-cookie');
  // ...
}
```

In Next.js 15, you would use the following code:

```tsx
import { cookies } from 'next/headers';

async function MyServerComponent() {
  const cookieStore = await cookies();
  const cookie = cookieStore.get('my-cookie');
  // ...
}
```

Similarly, if you were using the `headers` API, you would use the following code:

```tsx
import { headers } from 'next/headers';

function MyServerComponent() {
  const header = headers().get('my-header');
  // ...
}
```

In Next.js 15, you would use the following code:

```tsx
import { headers } from 'next/headers';

async function MyServerComponent() {
  const headerStore = await headers();
  const header = headerStore.get('my-header');
  // ...
}
```

And if you were using `searchParams` or `params`, you would use the following code:

```tsx
interface MyServerComponentProps {
  searchParams: {
    query?: string;
  };

  params: {
    id?: string;
  };
}

function MyServerComponent({ searchParams, params }: MyServerComponentProps) {
  const query = searchParams.query;
  const id = params.id;
  // ...
}
```

In Next.js 15, you would use the following code:

```tsx
interface MyServerComponentProps {
  searchParams: Promise<{
    query?: string;
  }>;

  params: Promise<{
    id?: string;
  }>;
}

function MyServerComponent({ searchParams, params }: MyServerComponentProps) {
  const query = (await searchParams).query;
  const id = (await params).id;
  // ...
}
```

Other dynamic APIs include `draftMode`, which is less commonly used.

### Goodbye Server Actions, Hello Server Functions

Server Actions are Server-Side endpoints, but with a signicant particularity: we can call them directly as Javascript functions. These are POST endpoints that Next.js can call directly from the browser.

In Next.js 15, they will be renamed to Server Functions, which seems to point to the fact they will be extended to include more HTTP methods.

### Next.js Minor Changes

Below are some of the minor changes that we are aware of in Next.js 15.

#### Can no longer use "ssr" set to "false" in Server Component's dynamic imports

Previously, you could use `ssr: false` in a Server Component's dynamic imports to prevent the Server Component from being rendered on the server. This is no longer possible in Next.js 15. The component needs to first be moved into a Client Component.

```tsx
'use client';

import dynamic from 'next/dynamic';

export const MyComponent = dynamic(() => import('./MyComponent'), {
  ssr: false,
});
```

You can then use the `MyComponent` Client Component in your Server Component.

#### Removed Functions from NextRequest

Previously, NextRequest was extended with functions such as `geo` and `ip`. These functions were removed in Next.js 15. To use these functions, you need to import them from `@vercel/functions`.

```tsx
import { geolocation, ipAddress } from '@vercel/functions'

export function GET (req: NextRequest) {
  const geo = geolocation(req)
  const ip = ipAddress(req)
}
```

In Next.js 15, these functions are removed. To use them, you need to import them from `@vercel/functions`.

Previously, accessing properties of NextRequest was done using destructuring or direct access. This was not possible in Next.js 15.

```tsx
import { NextRequest } from 'next/server'

export function GET (req: NextRequest) {
  const { geo, ip: ipAlias, pathname } = req // destructuring
  // direct access
  req.geo
  req.ip
}
```

In Next.js 15, you need to use the following code:

```tsx
import { geolocation, ipAddress } from '@vercel/functions'

export function GET (req: NextRequest) {
  const geo = geolocation(req)
  const ip = ipAddress(req)
}
```


## How Makerkit is approaching the migration

Makerkit's path to using Next.js 15 is currently underway. We are currently in the process of updating the documentation and the codebase to reflect the changes that need to be made - however, it should be a rather straightforward process.

We will be updating the documentation and the codebase as soon as we have a stable release of Next.js 15. We will also be providing a migration guide that will help you migrate your project to Next.js 15 as soon as the stable release is out.

### Updated Dynamic APIs

I have updated all the instances using dynamic APIs (such as `headers`, `cookies` and the route params) to use the new Promise-based APIs. However, for your existing code, you will need to update the code to use the new APIs - as described above.

### Reduced unused dependencies

During development, Turbopack does bundle code even though it ends up not being used due to environment variables' settings, that Makerkit uses to allow you to choose which dependency to use (for example, Sentry vs Baselime, or Nodemailer vs Resend, etc.). This is because Turbopack does not know that the code is not used.

To fix this, we use a module alias that uses mock exports of the unused depedency. This reduces the amount of code Turbopack will compile during development, making it snappier as a result.

### Experimental Features

I am in the process of testing both the React Compiler (which works flawlessly) and PPR. These will likely be turned on by default once they are stable, however it's highly likely you'll be able to use them in your project without any issues.

## Conclusion

Makerkit is ready for the migration to Next.js 15. After reading this post, so will you! 🚀

If you are a Makerkit customer, please pull the latest changes from the repository and update your project to Next.js 15. Follow this guide's instructions to update your existing code - and you're good to go!

Ciao! 👋


Upgrading to Next.js 15


Hey there, Makerkit community! 👋

I am thrilled to announce a new addition to our SaaS starter kit: the brand new Analytics package! 🎉

Understanding user behavior is key to growth and success. That's why I have developed a powerful, flexible analytics system that seamlessly integrates with your Makerkit project - and any analytics service you choose to use.

## Introducing the Analytics Package

Our new Analytics package brings two major components to the table:

1. **Analytics API**: A clean, consistent interface for tracking user behavior and app usage.
2. **App Events System**: A centralized approach to emitting and handling important app-wide occurrences.

## The Power of Flexibility

We know that every SaaS app is unique, and your analytics needs might change over time. That's why we've built our Analytics package with flexibility in mind:

- **Provider Agnostic**: Not locked into any specific analytics service
- **Extensible**: Easily create custom analytics providers
- **Centralized**: Use App Events for a clean, maintainable approach to tracking
- **Reusable**: Share common tracking logic across your app with ease

## Key Features and Code Examples

Let's dive into some key features with code snippets to show you just how easy it is to use the new Analytics package:

### User Identification

Associate actions with specific users:

```typescript
import { analytics } from '@kit/analytics';

void analytics.identify(userId, {
  email: user.email,
  plan: user.subscriptionPlan,
});
```

### Event Tracking

Record important user interactions:

```typescript
void analytics.trackEvent('Button Clicked', {
  buttonName: 'Submit',
  page: 'Sign Up',
});
```

### Automatic Page Views

Built-in tracking for Next.js route changes (no extra code needed!).

### Custom Events

Extend the system with your own event types:

```typescript
import { useAppEvents } from '@kit/shared/events';

interface MyAppEvents {
  'feature.used': { featureName: string };
}

function MyComponent() {
  const { emit } = useAppEvents<MyAppEvents>();

  const handleFeatureUse = () => {
    emit({ type: 'feature.used', payload: { featureName: 'coolFeature' } });
  };

  // ...
}
```

### Centralized Event Handling

Keep your analytics logic clean and maintainable:

```typescript
const analyticsMapping: AnalyticsMapping = {
  'user.signedUp': (event) => {
    analytics.trackEvent(event.type, event.payload);
  },
  'feature.used': (event) => {
    analytics.trackEvent(event.type, event.payload);
  },
};
```

## Default Tracked Events

Out of the box, Makerkit automatically tracks several key events to give you immediate insights into user behavior:

1. `user.signedIn`: Triggered when a user signs in. This event identifies the user in your analytics service, ensuring all subsequent events are properly associated.
2. `user.signedUp`: Fired when a new user signs up. Great for tracking your user acquisition funnel! (Note: This doesn't automatically work for social sign-ups.)
3. `checkout.started`: Triggered when a user initiates the checkout process. Perfect for analyzing your conversion funnel.
4. `user.updated`: Emitted when a user updates their authentication details.
5. **Automatic Page Views**: Makerkit tracks page views automatically as users navigate your app. No extra code required!

Here's a quick example of how these events are handled:

```typescript
const analyticsMapping: AnalyticsMapping = {
  'user.signedIn': (event) => {
    const userId = event.payload.userId;
    if (userId) {
      analytics.identify(userId);
    }
  },
  'user.signedUp': (event) => {
    analytics.trackEvent(event.type, event.payload);
  },
  'checkout.started': (event) => {
    analytics.trackEvent(event.type, event.payload);
  },
  'user.updated': (event) => {
    analytics.trackEvent(event.type, event.payload);
  },
};
```

These default events give you a solid foundation for understanding user behavior, right out of the box. And remember, you can always add your own custom events to track the metrics that matter most to your specific SaaS!

## Ready-to-Use Implementations

To get you started quickly, we're excited to provide three popular analytics implementations as plugins:

1. **PostHog**: For powerful, open-source product analytics
2. **Umami**: A simple, fast, privacy-focused alternative
3. **Google Analytics**: The tried-and-true analytics powerhouse

These plugins are ready to use out of the box, so you can start tracking user behavior right away!

## Key Features

Our Analytics package is packed with features to help you track user interactions and monitor your users' behavior:

- **User Identification**: Associate actions with specific users
- **Event Tracking**: Record important user interactions
- **Automatic Page Views**: Built-in tracking for Next.js route changes
- **Custom Events**: Extend the system with your own event types
- **Best Practices Baked In**: Consistent naming, relevant data tracking, and more

## Getting Started with Analytics

Ready to supercharge your SaaS analytics? Check out our [comprehensive documentation](/docs/analytics-and-events-in-makerkit) to start implementing the new Analytics package in your Makerkit project today!

## Creating a Custom Analytics Provider

One of the most powerful features of our new Analytics package is its extensibility. If you need to integrate with a specific analytics service that isn't covered by our default plugins, you can easily create your own custom provider. Here's how:

### Step 1: Implement the AnalyticsService Interface

First, create a new file for your custom analytics service that implements the `AnalyticsService` interface:

```typescript
// packages/analytics/src/my-custom-analytics-service.ts

import { AnalyticsService } from './path-to-types';

class MyCustomAnalyticsService implements AnalyticsService {
  async initialize() {
    // Initialize your analytics service
    console.log('Custom analytics service initialized');
  }

  async identify(userId: string, traits?: Record<string, string>) {
    // Implement user identification
    console.log(`Identified user: ${userId}`, traits);
  }

  async trackPageView(url: string) {
    // Implement page view tracking
    console.log(`Page viewed: ${url}`);
  }

  async trackEvent(eventName: string, eventProperties?: Record<string, string | string[]>) {
    // Implement event tracking
    console.log(`Event tracked: ${eventName}`, eventProperties);
  }
}
```

### Step 2: Register Your Custom Provider

Next, update your analytics configuration file to include your custom provider:

```typescript
// packages/analytics/src/index.ts

import { createAnalyticsManager } from './analytics-manager';
import { MyCustomAnalyticsService } from './my-custom-analytics-service';
import type { AnalyticsManager } from './types';

export const analytics: AnalyticsManager = createAnalyticsManager({
  providers: {
    myCustom: (config) => new MyCustomAnalyticsService(config),
    // ... other providers
  },
});
```

### Step 3: Use Your Custom Provider

Now you can use your custom analytics provider just like any other provider in the system:

```typescript
import { analytics } from '@kit/analytics';

void analytics.identify('user123', { name: 'John Doe' });
void analytics.trackEvent('Feature Used', { featureName: 'Custom Analytics' });
```

That's it! You've successfully created and integrated a custom analytics provider. This approach allows you to connect Makerkit with any analytics service you prefer, giving you ultimate flexibility in how you track and analyze user behavior.

## I Want Your Feedback!

As always, I am super eager to hear from you. Have you tried the new Analytics package? Any features you'd love to see? Please let me know.

Ciao! 👋


Announcing the Analytics Package for Makerkit


I am excited to announce the release of the **Roadmap Plugin** for Makerkit! 🚀

Our goal to provide our customers with the **ultimate SaaS toolkit**, we are **constantly working on new features and plugins to help you build better products**. The Roadmap Plugin is the latest addition to our collection of plugins, and it is designed to help you track and share your project's progress with your users.

This plugin allows you to create a roadmap for your project and display it on your website. Your users can see what features are planned, in progress, and completed and suggest new features or comment on existing ones.

**This is the first version of the Roadmap Plugin, and we are looking forward to your feedback to improve it further.**

NB: at this time, it is only available for Next.js and Supabase Turbo users.

## Features of the Roadmap Plugin

The Plugin provides the following features:

1. **Public Issues and Roadmap**: display your work in progress, planned, and completed features on your website. The plugin allows two views: a list view and a kanban view.
2. **Feature Requests**: users can suggest new features or comment on existing ones. You can keep them private or make them public.
3. **Voting**: users can vote on features they would like to see implemented next.
4. **Comments**: users can leave comments on features and discuss them with other users.
5. **Super Admin**: the super admin can manage all features and comments.

To install the Roadmap Plugin, [follow the installation instructions](/docs/next-supabase-turbo/roadmap-plugin) in the documentation.

Let's deep dive into how the Roadmap Plugin works and how you can get started with it.

## Public Issues and Roadmap

The Roadmap Plugin allows you to create a roadmap for your project and display it on your website. We display two views: a list view and a kanban view.

### List View

The list view displays all features in a list format. You can filter features by status (planned, in progress, completed) and by category.

<Image src="/assets/images/posts/roadmap-list.webp" alt="Roadmap Plugin List View" width="3032" height="2144" />

From this view, users can see the status of each feature, vote on features they would like to see implemented next, and click on a feature to see more details.

### Kanban View

The kanban view displays features in a kanban board format.

<Image src="/assets/images/posts/roadmap-kanban.webp" alt="Roadmap Plugin Kanban View" width="3032" height="2144" />

Users can click on a feature to see more details, just like in the list view.

### Open Feature Requests or Bugs

Users can suggest new features or report bugs by clicking on the "Open a Post" button. By default, new features are private, but you can make them public so that other users can see them and vote on them.

<Image src="/assets/images/posts/roadmap-create-issue-dialog.webp" alt="Roadmap Plugin Open Feature Request" width="1424" height="1518" />

### Issue Details

When a user clicks on a feature, they can see more details about the feature, including the description, status, category, and comments.

<Image src="/assets/images/posts/roadmap-issue-details.webp" alt="Roadmap Plugin Issue Details" width="2176" height="1318" />

## Admin Features

The Roadmap Plugin comes with a super admin panel where you can manage all features and comments.

The issues table allows to visualize all features and filter them by status, category, or search by title.

<Image src="/assets/images/posts/roadmap-admin-issues-table.webp" alt="Roadmap Plugin Admin Issues" width="3048" height="2162" />

## Conclusion

The Roadmap Plugin is a great way to keep your users informed about the progress of your project and to gather feedback on what features they would like to see next. It is easy to install and configure, and it provides a simple and intuitive interface for users to interact with.

Makerkit's quest to provide you with the ultimate SaaS OS continues with the release of the Roadmap Plugin. We hope you enjoy using it and that it helps you build better products.

If you have any questions or feedback, please don't hesitate to reach out to us. We are always looking for ways to improve our products and make them more useful for you.


Introducing the Roadmap Plugin: Track and Share Your Project's Progress


I am super happy to introduce a new set of Marketing Components that will help you create stunning landing pages for your projects. These components are designed to be highly customizable, responsive, and easy to use, allowing you to focus on creating engaging content without worrying about the underlying layout and styling.

Let's dive into what makes these components so exciting:

1. **Hero Component**: The centerpiece of any great landing page. The new Hero component is a game-changer. It's a versatile, customizable section that allows you to create stunning above-the-fold content with ease. With props for title, subtitle, CTA, and even an optional "pill" for highlighting new features, you can create a compelling first impression in minutes.
2. **Feature Showcase**: Highlight Your Product's Best Attributes. The FeatureShowcase, FeatureGrid, and FeatureCard components work together seamlessly to help you present your product's features in an visually appealing and organized manner. Whether you're showcasing a beautiful dashboard, authentication options, or billing features, these components have got you covered.
3. **SecondaryHero**: For When One Hero Isn't Enough. Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections, ideal for pricing information or secondary CTAs.
4. **Header and Footer**: Polished Navigation and Information. No landing page is complete without a sleek header and informative footer. Makerkit's new Header and Footer components are fully customizable and responsive, ensuring your page looks professional from top to bottom.
5. **Call-to-Action Buttons**: Drive User Engagement. The new CtaButton component makes it easy to create eye-catching call-to-action buttons. Whether you're encouraging sign-ups or directing users to contact you, these buttons are designed to convert.
6. **Gradient Text Components**: Add a Touch of Flair. With GradientText and GradientSecondaryText components, you can add a modern, stylish touch to your typography. These components leverage Tailwind CSS, allowing for easy customization of gradient colors.

For a complete list of available components and detailed documentation, check out the [Marketing Components documentation](https://makerkit.dev/docs/next-supabase-turbo/marketing-components).

## Using Marketing Components in Your Next.js Supabase SaaS Kit

Let's dive into some practical examples to see just how easy it is to create stunning landing pages with Makerkit's new Marketing Components:

### Creating an Attention-Grabbing Hero Section

Here's how you can use the Hero component to create a compelling hero section for your landing page:

```tsx
import { Hero, Pill } from '@kit/ui/marketing';
import { Button } from '@kit/ui/button';
import Image from 'next/image';

function LandingPage() {
  return (
    <Hero
      pill={<Pill>New Feature</Pill>}
      title="Welcome to Our Revolutionary App"
      subtitle="Discover the power of our innovative solution"
      cta={<Button>Get Started Free</Button>}
      image={
        <Image
          src="/hero-image.jpg"
          alt="App Dashboard"
          width={1200}
          height={600}
        />
      }
    />
  );
}
```

With just a few lines of code, you've created a professional-looking hero section complete with a highlighted pill, compelling title and subtitle, a call-to-action button, and a featured image. The Hero component handles all the layout and styling, allowing you to focus on your content.

<Image src="/assets/images/posts/hero-component.webp" alt="Hero Component" width={3080} height={1756} />

### Showcasing Your Product's Features

The FeatureShowcase, FeatureGrid, and FeatureCard components work together to help you present your product's features in a visually appealing way. Here's an example of how you can use these components to showcase a beautiful dashboard:

```tsx
import { FeatureShowcase, FeatureGrid, FeatureCard, FeatureShowcaseIconContainer } from '@kit/ui/marketing';
import { LayoutDashboard } from 'lucide-react';
import Image from 'next/image';

function FeaturesSection() {
  return (
    <FeatureShowcase
      heading={
        <>
          <b className="font-semibold dark:text-white">
            The ultimate SaaS Starter Kit
          </b>
          .{' '}
          <GradientSecondaryText>
            Unleash your creativity and build your SaaS faster than ever
            with Makerkit.
          </GradientSecondaryText>
        </>
      }
      icon={
        <FeatureShowcaseIconContainer>
          <LayoutDashboard className="h-5" />
          <span>All-in-one solution</span>
        </FeatureShowcaseIconContainer>
      }
    >
      <FeatureGrid>
        <FeatureCard
          className="relative col-span-2 overflow-hidden bg-violet-500 text-white lg:h-96"
          label="Beautiful Dashboard"
          description="Makerkit provides a beautiful dashboard to manage your SaaS business."
        >
          <Image
            className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-10/12"
            src="/images/dashboard-header.webp"
            width={2061}
            height={800}
            alt="Dashboard Header"
          />
        </FeatureCard>
        {/* Add more FeatureCard components as needed */}
      </FeatureGrid>
    </FeatureShowcase>
  );
}
```

This example demonstrates how easy it is to create a visually appealing feature showcase. The FeatureShowcase component provides a clean layout, while FeatureGrid and FeatureCard components allow you to highlight individual features with images and descriptions.

<Image src="/assets/images/posts/features-grid-component.webp" alt="Features Grid Component" width={3052} height={2166} />

### Adding a Secondary Hero Section

Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections. Here's an example of how you can use it to showcase pricing information:

```tsx
import { SecondaryHero, Pill } from '@kit/ui/marketing';

function PricingSection() {
  return (
    <SecondaryHero
      pill={<Pill>Get started for free. No credit card required.</Pill>}
      heading="Fair pricing for all types of businesses"
      subheading="Get started on our free plan and upgrade when you are ready."
    />
  );
}
```

<Image src="/assets/images/posts/secondary-hero.webp" alt="Secondary Hero Component" width={3052} height={1528} />

### Creating a Professional Footer

A polished footer is essential for any landing page. Makerkit's Footer component makes it easy to create a professional footer that complements your page's design:

```tsx
import { Footer } from '@kit/ui/marketing';
import { Trans } from '@kit/ui/trans';
import { AppLogo } from '~/components/app-logo';
import appConfig from '~/config/app.config';

export function SiteFooter() {
  return (
    <Footer
      logo={<AppLogo className="w-[85px] md:w-[95px]" />}
      description={<Trans i18nKey="marketing:footerDescription" />}
      copyright={
        <Trans
          i18nKey="marketing:copyright"
          values={{
            product: appConfig.name,
            year: new Date().getFullYear(),
          }}
        />
      }
      sections={[
        {
          heading: <Trans i18nKey="marketing:about" />,
          links: [
            { href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
            { href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
          ],
        },
        // Add more sections as needed
      ]}
    />
  );
}
```

The Footer component allows you to quickly set up a comprehensive footer with multiple sections, links, and even supports internationalization out of the box.

## Conclusion

This is the first iteration of Makerkit's Marketing Components, but you can expect some more components to be released in the future.

Can't wait to see how you'll use these components to create stunning landing pages for your projects! 🚀

Introducing Marketing Components: Crafting Stunning Landing Pages with Ease


Ever wished you could effortlessly display glowing reviews from your happy customers?

The new Testimonial Plugin for Makerkit is here to make your life a whole lot easier (and your app a whole lot more impressive)!

## What's in the Box?

The Testimonial Plugin comes packed with features that'll make managing and displaying testimonials a breeze:

1. **Testimonial Component**: Think of this as your personal hype squad. It's a React component that showcases your testimonials in various eye-catching styles. Whether you want a "Wall of Love" that stops scrollers in their tracks or a sleek, compact display that packs a punch, we've got you covered.
2. **Form Component**: Give your users a voice! This nifty form lets them submit testimonials directly through your app. And because we know one size doesn't fit all, it supports both text and video testimonials. After all, some folks are wordsmiths, while others shine on camera!
3. **Admin Panel**: Your command center for all things testimonial. Approve the gems, politely decline the not-so-greats, or remove outdated ones. It's like being a curator for your own success story museum.
4. **Manual Entry**: For those times when you receive a glowing review via carrier pigeon (or, you know, email), you can easily add it to your collection through the admin panel.

**This plugin will easily save you $30-50 spent on a third-party testimonial service**, and it's fully customizable to match your app's branding.

## Getting Started: As Easy as Pie

Excited to get started? I don't blame you! Head over to our [Testimonial Plugin documentation](/docs/next-supabase-turbo/testimonials-plugin) for a step-by-step guide on installation. Trust me, it's so straightforward, you'll have it up and running faster than you can say "five-star review"!

## The Heart of the Matter: The Testimonial Form

Every great testimonial starts with a great form. Our Testimonial Form Component is the secret sauce that makes collecting feedback a joy for your users. Let's take a peek at how it works:

```tsx
'use client';

import { useState } from 'react';
import {
  TestimonialContainer,
  TestimonialForm,
  TestimonialSuccessMessage,
  VideoTestimonialForm,
} from '@kit/testimonial/client';

export function Testimonial() {
  const [success, setSuccess] = useState(false);
  const onSuccess = () => setSuccess(true);

  if (success) {
    return <SuccessMessage />;
  }

  return (
    <TestimonialContainer
      className={
        'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
      }
      welcomeMessage={<WelcomeMessage />}
      enableTextReview={true}
      enableVideoReview={true}
      textReviewComponent={<TestimonialForm onSuccess={onSuccess} />}
      videoReviewComponent={<VideoTestimonialForm onSuccess={onSuccess} />}
      textButtonText="Write your thoughts"
      videoButtonText="Share a video message"
      backButtonText="Switch review method"
    />
  );
}

// ... (SuccessMessage and WelcomeMessage components)
```

This little snippet of code packs a powerful punch. It creates a form that's as flexible as a yoga instructor, allowing users to submit either text or video testimonials. And when they hit that submit button? Boom! A success message appears, making them feel like they just won the lottery (of feedback).

<Image src="/assets/images/posts/testimonial-form.webp" width="2606" height="2056" alt="Testimonial Form Component" />

## Choose Your Weapon: Text or Video?

### The Power of Words

For the Hemingways among your users, the Text Testimonial Form is their canvas. They can pour their hearts out, painting a picture of their experience with your app in vivid verbal detail.

<Image src="/assets/images/posts/testimonial-form-text.webp" width="2606" height="2056" alt="Testimonial Form Component" />

### Lights, Camera, Action!

But for those who believe a picture is worth a thousand words (and a video is worth a million), we've got the Video Testimonial Form. Users can record their glowing reviews right from their browser, adding a personal touch that's hard to beat.

<Image src="/assets/images/posts/testimonial-form-video.webp" width="2632" height="2066" alt="Testimonial Form Component" />

## The Pièce de Résistance: The Wall of Love

Once you've collected all these amazing testimonials, it's time to show them off! Enter the Testimonial Wall of Love - a React component that turns your testimonials into a work of art. It's like Instagram for your app's fan club!

<Image src="/assets/images/posts/testimonial-wall-of-love.webp" width="2970" height="2028" alt="Testimonial Wall of Love" />

## Behind the Scenes: The Admin Panel

Every great show needs a great director, and that's where the Testimonial Admin Panel comes in. It's your backstage pass to managing all the testimonials. Approve the standing ovations, gently decline the constructive criticism, and keep your testimonial collection fresh and relevant.

<Image src="/assets/images/posts/testimonials-admin.webp" width="1932" height="1556" alt="Testimonials Admin Panel" />

Want to dive deep into a particular review? The detailed view lets you see every aspect of each testimonial. It's like having X-ray vision for feedback!

<Image src="/assets/images/posts/testimonials-admin-detail.webp" width="2336" height="732" alt="Testimonials Admin Detail" />

## For the Personal Touch: Manual Entry

Sometimes, you get a review so good, you want to frame it. With the manual entry feature, you can add these gems to your collection yourself. It's perfect for those reviews that come in through unconventional channels or from your VIP customers.

<Image src="/assets/images/posts/testimonials-manual-entry.webp" width="1702" height="1515" alt="Testimonials Manual Entry" />

## Wrapping Up

I hope you're as excited about the Testimonial Plugin as I am! It's a game-changer for showcasing your app's success stories and building trust with your users. Head over to the [Testimonial Plugin documentation](/docs/next-supabase-turbo/testimonials-plugin) to get started, and let the testimonials roll in!

Introducing the Testimonial Plugin for Makerkit


The release of Multi-Step forms for Makerkit opens up a world of possibilities for creating delightful onboarding experiences. In this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.

While Makerkit Turbo does not include an Onboarding (customers in v1 were not interested in this feature), some customers are still needing this feature. In this post, I'll show you how easy it is with Makerkit.

The final result will be a multi-step form that guides users through the onboarding process, collecting information along the way:

<Video src="/assets/videos/onboarding-flow.mp4" />

## Differentiating between Onboarded and Non-Onboarded Users

First - we must be able to differentiate between onboarded and non-onboarded users. This can be done by checking if the user has completed the onboarding process. If they have, we can redirect them to the dashboard. If they haven't, we can show them the onboarding form.

To store this data, we can use the Supabase Auth `app_metadata` field. This field is a JSON object that can store any data you want (with limitations). In this case, we'll store a boolean value that indicates whether the user has completed the onboarding process.

### Checking if the User is Onboarded in the Middleware

To check if the user is onboarded, we add a check in the middleware. If the user is not onboarded, we redirect them to the onboarding page.

In your middleware, you can add the following code after the user has been fetched:

```tsx title="apps/web/app/middleware.ts" {19-23}
{
  pattern: new URLPattern({ pathname: '/home/*?' }),
  handler: async (req: NextRequest, res: NextResponse) => {
    const {
      data: { user },
    } = await getUser(req, res);

    const origin = req.nextUrl.origin;
    const next = req.nextUrl.pathname;

    // If user is not logged in, redirect to sign in page.
    if (!user) {
      const signIn = pathsConfig.auth.signIn;
      const redirectPath = `${signIn}?next=${next}`;

      return NextResponse.redirect(new URL(redirectPath, origin).href);
    }

    const isOnboarded = user?.app_metadata.onboarded;

    if (!isOnboarded) {
      return NextResponse.redirect(new URL('/onboarding', origin).href);
    }

    const supabase = createMiddlewareClient(req, res);

    const requiresMultiFactorAuthentication =
      await checkRequiresMultiFactorAuthentication(supabase);

    // If user requires multi-factor authentication, redirect to MFA page.
    if (requiresMultiFactorAuthentication) {
      return NextResponse.redirect(
        new URL(pathsConfig.auth.verifyMfa, origin).href,
      );
    }
  },
}
```

### Creating the Onboarding Page

With the middleware in place, we can now create the onboarding page. The onboarding page is where the user will complete the onboarding process. This page will contain the multi-step form that the user will fill out.

Let's create a page for the onboarding at `apps/web/app/onboarding/page.tsx`:

```tsx title="apps/web/app/onboarding/page.tsx"
import { AppLogo } from '~/components/app-logo';
import { OnboardingForm } from '~/onboarding/_components/onboarding-form';

export default function OnboardingPage() {
  return (
    <div className={'flex flex-1 flex-col h-screen items-center justify-center space-y-16'}>
      <AppLogo />

      <OnboardingForm />
    </div>
  );
}
```

NB: we don't have the `OnboardingForm` component yet, but we'll create it in the next section. Please leave it empty for now and then import it back.

#### Installing the package react-confetti

To make the onboarding experience more delightful, we can add some confetti animation when the user completes the onboarding process. We'll use the `react-confetti` package for this.

To install the package, run:

```bash
pnpm --filter web add react-confetti
```

### Creating the Multi-Step Form

Now that we have the onboarding page, we can create the multi-step form. The multi-step form will guide the user through the onboarding process, collecting the necessary information along the way.

To create the multi-step form, we'll use the Multi-Step Form Component for Makerkit. This component provides a simple API to create multi-step forms with ease.

In the onboarding form, we ask the user the following information:

1. Their full name
2. The name of the Team they want to create

We split the form into two steps, with each step collecting one piece of information - which is a good practice for onboarding forms and helps to reduce friction.

Now let's dive deep into the multi-step form implementation. We'll break down each part of the `OnboardingForm` component and explain its purpose and functionality.

### 1. Defining the Form Schema

First, we define the schema for our form using Zod:

```typescript
const FormSchema = createStepSchema({
  profile: z.object({
    name: z.string().min(1).max(255),
  }),
  team: z.object({
    name: z.string().min(1).max(255),
  }),
});
```

This schema defines two steps: 'profile' and 'team', each with a 'name' field. The `createStepSchema` function is a helper that ensures our schema is compatible with the Multi-Step Form component.

### 2. The OnboardingForm Component

The `OnboardingForm` component is the main container for our multi-step form:

```tsx
export function OnboardingForm() {
  const form = useForm({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      profile: { name: '' },
      team: { name: '' },
    },
    mode: 'onBlur',
  });

  const onSubmit = useCallback((data: z.infer<typeof FormSchema>) => {
    console.log(data);
  }, []);

  return (
    <div>
      <MultiStepForm
        className={/* ... */}
        schema={FormSchema}
        form={form}
        onSubmit={onSubmit}
      >
        {/* Form content */}
      </MultiStepForm>
    </div>
  );
}
```

Here, we:
- Use `useForm` from react-hook-form to manage our form state
- Set up form validation using the Zod schema we defined
- Define an `onSubmit` callback (currently just logging the data)
- Render the `MultiStepForm` component, passing in our schema, form, and onSubmit handler

### 3. Form Header with Stepper

Inside the `MultiStepForm`, we first render a header with a stepper:

```tsx
<MultiStepFormHeader>
  <MultiStepFormContextProvider>
    {({ currentStepIndex }) => (
      <Stepper
        variant={'numbers'}
        steps={['Profile', 'Team', 'Complete']}
        currentStep={currentStepIndex}
      />
    )}
  </MultiStepFormContextProvider>
</MultiStepFormHeader>
```

This creates a visual indicator of progress through the form steps. The `MultiStepFormContextProvider` gives us access to the current step index, which we use to highlight the active step.

### 4. Form Steps

Next, we define each step of our form:

```tsx
<MultiStepFormStep name={'profile'}>
  <ProfileStep />
</MultiStepFormStep>

<MultiStepFormStep name={'team'}>
  <TeamStep />
</MultiStepFormStep>

<MultiStepFormStep name={'complete'}>
  <CompleteStep />
</MultiStepFormStep>
```

Each `MultiStepFormStep` corresponds to a step in our form schema. The `name` prop should match the keys in our schema.

### 5. The Profile Step

The `ProfileStep` component renders the first step of our form:

```tsx
function ProfileStep() {
  const { nextStep, form } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        {/* Welcome text */}
        <FormField
          render={({ field }) => (
            <FormItem>
              <FormLabel>Your Name</FormLabel>
              <FormControl>
                <Input {...field} placeholder={'Name'} />
              </FormControl>
              <FormDescription>Enter your full name here</FormDescription>
            </FormItem>
          )}
          name={'profile.name'}
        />
        <div className={'flex justify-end'}>
          <Button onClick={nextStep}>Continue</Button>
        </div>
      </div>
    </Form>
  );
}
```

This step:
- Uses the `useMultiStepFormContext` hook to access form utilities
- Renders a form field for the user's name
- Provides a 'Continue' button to move to the next step

### 6. The Team Step

The `TeamStep` component is similar to the `ProfileStep`, but adds team creation functionality:

```tsx
function TeamStep() {
  const { nextStep, prevStep, form, mutation } = useMultiStepFormContext();

  return (
    <Form {...form}>
      {/* Similar structure to ProfileStep */}
      <div className={'flex justify-end space-x-2'}>
        <Button variant={'ghost'} onClick={prevStep}>
          Go Back
        </Button>
        <Button
          onClick={async (e) => {
            await mutation.mutateAsync();
            nextStep(e);
          }}
        >
          {mutation.isPending ? 'Processing...' : 'Create Team'}
        </Button>
      </div>
    </Form>
  );
}
```

This step adds:
- A 'Go Back' button to return to the previous step
- A 'Create Team' button that triggers a mutation (e.g., to create the team in your backend) before moving to the next step

The `mutation` object uses `useMutation` from React Query and provides utilities for handling asynchronous operations, which is very useful when you need additional control over form submission.

### 7. The Complete Step

The `CompleteStep` component renders the final step of our form:

```tsx
function CompleteStep() {
  const { form } = useMultiStepFormContext();

  return (
    <div className={'flex flex-col space-y-6'}>
      {/* Completion message */}
      <Button asChild>
        <Link href={'/home'}>Finish</Link>
      </Button>
    </div>
  );
}
```

This step:
- Displays a completion message, including the user's name from the form data
- Provides a 'Finish' button that links to the home page

### Handling Form Submission

Finally, we handle form submission in the `onSubmit` callback. In this function, we will execute a Server Action to update the user profile, create the team, and mark the user as onboarded.

```tsx title="apps/web/app/onboarding/_lib/server/server-actions.ts"
'use server';

import { z } from 'zod';

import { enhanceAction } from '@kit/next/actions';
import { getSupabaseServerClient } from '@kit/supabase/server-client';

export const submitOnboardingFormAction = enhanceAction(
  async (data, user) => {
    const client = getSupabaseServerClient();

    const createTeamResponse = await client.rpc('create_team_account', {
      account_name: data.team.name,
    });

    if (createTeamResponse.error) {
      throw new Error(
        `Failed to create team: ${createTeamResponse.error.message}`,
      );
    }

    const profileResponse = await client
      .from('accounts')
      .update({
        name: data.profile.name,
      })
      .eq('id', user.id);

    if (profileResponse.error) {
      throw new Error(
        `Failed to update profile: ${profileResponse.error.message}`,
      );
    }

    const adminClient = getSupabaseServerActionClient({ admin: true });

    await adminClient.auth.admin.updateUserById(user.id, {
      app_metadata: {
        onboarded: true,
      },
    });

    return {
      success: true,
    };
  },
  {
    auth: true,
    schema: z.object({
      profile: z.object({
        name: z.string().min(1).max(255),
      }),
      team: z.object({
        name: z.string().min(1).max(255),
      }),
    }),
  },
);
```

This action updates the user's profile, creates the team, and marks the user as onboarded. It uses the `enhanceAction` helper to handle authentication and validation.

This is just an example - your onboarding process may involve different steps or actions. You can customize the `submitOnboardingFormAction` to suit your specific requirements.

### Integrating the Server Action

Let's now integrate the `submitOnboardingFormAction` with our form submission:

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
import { submitOnboardingFormAction } from './_lib/server/server-actions';
```

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
const onSubmit = useCallback(async (data: z.infer<typeof FormSchema>) => {
  try {
    await submitOnboardingFormAction(data);
  } catch (error) {
    console.error('Failed to submit form:', error);
  }
}, []);
```

### Putting It All Together

With all the pieces in place, our `OnboardingForm` component looks like this:

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
'use client';

import { useCallback } from 'react';

import { createPortal } from 'react-dom';

import dynamic from 'next/dynamic';
import Link from 'next/link';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { Button } from '@kit/ui/button';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
  MultiStepForm,
  MultiStepFormContextProvider,
  MultiStepFormHeader,
  MultiStepFormStep,
  createStepSchema,
  useMultiStepFormContext,
} from '@kit/ui/multi-step-form';
import { Stepper } from '@kit/ui/stepper';

import { submitOnboardingFormAction } from '~/onboarding/_lib/server/server-actions';

const Confetti = dynamic(
  () => {
    return import('react-confetti');
  },
  {
    ssr: false,
  },
);

const FormSchema = createStepSchema({
  profile: z.object({
    name: z.string().min(1).max(255),
  }),
  team: z.object({
    name: z.string().min(1).max(255),
  }),
});

export function OnboardingForm() {
  const form = useForm({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      profile: {
        name: '',
      },
      team: {
        name: '',
      },
    },
    mode: 'onBlur',
  });

  const onSubmit = useCallback(async (data: z.infer<typeof FormSchema>) => {
    try {
      await submitOnboardingFormAction(data);
    } catch (error) {
      console.error('Failed to submit form:', error);
    }
  }, []);

  return (
    <div>
      <MultiStepForm
        className={
          'w-full max-w-md space-y-8 rounded-lg border p-8 shadow-sm duration-500 animate-in fade-in-90 zoom-in-95 slide-in-from-bottom-12'
        }
        schema={FormSchema}
        form={form}
        onSubmit={onSubmit}
      >
        <MultiStepFormHeader>
          <MultiStepFormContextProvider>
            {({ currentStepIndex }) => (
              <Stepper
                variant={'numbers'}
                steps={['Profile', 'Team', 'Complete']}
                currentStep={currentStepIndex}
              />
            )}
          </MultiStepFormContextProvider>
        </MultiStepFormHeader>

        <MultiStepFormStep name={'profile'}>
          <ProfileStep />
        </MultiStepFormStep>

        <MultiStepFormStep name={'team'}>
          <TeamStep />
        </MultiStepFormStep>

        <MultiStepFormStep name={'complete'}>
          <CompleteStep />
        </MultiStepFormStep>
      </MultiStepForm>
    </div>
  );
}

function ProfileStep() {
  const { nextStep, form } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        <div className={'flex flex-col space-y-2'}>
          <h1 className={'text-xl font-semibold'}>Welcome to Makerkit</h1>

          <p className={'text-sm text-muted-foreground'}>
            Welcome to the onboarding process! Let&apos;s get started by
            entering your name.
          </p>
        </div>

        <FormField
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Your Name</FormLabel>

                <FormControl>
                  <Input {...field} placeholder={'Name'} />
                </FormControl>

                <FormDescription>Enter your full name here</FormDescription>
              </FormItem>
            );
          }}
          name={'profile.name'}
        />

        <div className={'flex justify-end'}>
          <Button onClick={nextStep}>Continue</Button>
        </div>
      </div>
    </Form>
  );
}

function TeamStep() {
  const { nextStep, prevStep, form, mutation } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        <div className={'flex flex-col space-y-2'}>
          <h1 className={'text-xl font-semibold'}>Create Your Team</h1>

          <p className={'text-sm text-muted-foreground'}>
            Let&apos;s create your team. Enter your team name below.
          </p>
        </div>

        <FormField
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Your Team Name</FormLabel>

                <FormControl>
                  <Input {...field} placeholder={'Name'} />
                </FormControl>

                <FormDescription>
                  This is the name of your team.
                </FormDescription>
              </FormItem>
            );
          }}
          name={'team.name'}
        />

        <div className={'flex justify-end space-x-2'}>
          <Button
            disabled={mutation.isPending}
            variant={'ghost'}
            onClick={prevStep}
          >
            Go Back
          </Button>

          <Button
            onClick={async (e) => {
              await mutation.mutateAsync();

              nextStep(e);
            }}
          >
            {mutation.isPending ? 'Processing...' : 'Create Team'}
          </Button>
        </div>
      </div>
    </Form>
  );
}

function CompleteStep() {
  const { form } = useMultiStepFormContext();

  return (
    <div className={'flex flex-col space-y-6'}>
      {createPortal(<Confetti numberOfPieces={500} recycle={false} />, document.body)}

      <div className={'flex flex-col space-y-2'}>
        <h1 className={'text-xl font-semibold'}>
          Hello, {form.getValues('profile').name}!
        </h1>

        <p className={'text-sm text-muted-foreground'}>
          You&apos;re almost done! Click the button below to finish the
          onboarding process.
        </p>
      </div>

      <Button asChild>
        <Link href={'/home'}>Finish</Link>
      </Button>
    </div>
  );
}
```

## Conclusion

By leveraging Makerkit's Multi-Step Form component, we've created a smooth, intuitive onboarding process. This approach:

1. Breaks down the onboarding into manageable steps
2. Provides clear visual feedback on progress
3. Allows for easy validation and error handling
4. Creates a flexible structure that can be easily extended or modified

With this onboarding flow in place, you're well on your way to creating a delightful first-time user experience that sets the tone for your entire application. Happy onboarding!

Creating a Delightful Onboarding Experience with Multi-Step Forms


I am happy to announce the release of the new waitlist plugin for Makerkit 🎉

The waitlist plugin allows your users to sign up for early access to your app, making it easier for you to build a list of interested users before your app is even launched.

This was one of the most requested additions to Makerkit, and I'm excited to finally be able to share it with you! 🚀

## How does the Waitlist plugin work?

Here is a short summary of how the waitlist plugin works:

1. **Waitlist form**: The waitlist plugin adds a form to your app that allows users to sign up for early access. You can add this anywhere in your app, and customize the trigger to fit your design.
2. **Waitlist collection**: The users who sign up for early access are added to the `waitlist` table in your database.
3. **Marking users as invited**: To invite users to your app, you can mark them as `approved` from the Supabase dashboard, or by updating the `approved` field in the `waitlist` table with a query (such as, customers subscribed before a certain date)
4. **Email notifications**: Our Database trigger will send an email to the user when they are marked as `approved` - letting them know they can now access the app.

The signup form will look like the below image:

<Image src='/assets/images/posts/waitlist-plugin.webp' width="1182" height="1000" />

## How to install the waitlist plugin into your Kit

Please follow the [documentation to install the Waitlist Plugin](/docs/next-supabase-turbo/waitlist-plugin). This will guide you through the process of adding the plugin to your app and setting up the database migrations.


Announcing the Waitlist plugin

The waitlist plugin is a new feature that allows your users to sign up for early access to your app.

How does the Waitlist plugin work?