Testimonials Plugin in the Next.js Supabase SaaS Starter kit

Learn how to install the Testimonials plugin in the Next.js Supabase SaaS Starter kit.

This plugin allows Makerkit users to easily collect and manage testimonials from their customers. It integrates seamlessly with the existing Makerkit structure and provides both backend and frontend components.

Features

  1. Testimonial submission form and manual entry
  2. Admin panel for managing testimonials
  3. API endpoints for CRUD operations
  4. Widgets components for showing testimonials on the website

Installation

To install the plugin, run the following command:

npx @makerkit/cli plugins add testimonial

The codemod will automatically:

  • Add the @kit/testimonial dependency and install packages
  • Create the translation file at apps/web/public/locales/en/testimonials.json
  • Add the testimonials namespace to your i18n settings
  • Add the testimonials sidebar item to the admin panel
  • Create the Supabase migration file for the testimonials table

Run the migrations

After installation, run the migration and regenerate types:

pnpm run supabase:web:reset
pnpm run supabase:web:typegen

The admin pages and sidebar item are automatically set up by the CLI. You can find them at:

  • apps/web/app/admin/testimonials/page.tsx — Testimonials list
  • apps/web/app/admin/testimonials/[id]/page.tsx — Testimonial detail page

Displaying the Testimonial Form

To display the testimonial form on your website, you can import the form component from the plugin and use it in your page.

Create a new component, and import the form:

'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"
    />
  );
}
function SuccessMessage() {
  return (
    <div
      className={
        'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
      }
    >
      <div className="flex flex-col items-center space-y-4 text-center">
        <div className="space-y-1">
          <h1 className="text-2xl font-semibold">
            Thank you for your feedback!
          </h1>
          <p className="text-muted-foreground">
            Your review has been submitted successfully.
          </p>
        </div>
        <div>
          <TestimonialSuccessMessage />
        </div>
      </div>
    </div>
  );
}
function WelcomeMessage() {
  return (
    <div className="flex flex-col items-center space-y-1 text-center">
      <h1 className="text-2xl font-semibold">
        We&apos;d love to hear your feedback!
      </h1>
      <p className="text-muted-foreground">
        Your opinion helps us improve our service.
      </p>
    </div>
  );
}

Please customize the components as needed to fit your website's design.

API Endpoints

Please add the GET and POST endpoints to fetch the testimonials at apps/web/app/api/testimonials/route.ts:

import {
  createTestimonialsRouteHandler,
  createVideoTestimonialRouteHandler,
} from '@kit/testimonial/server';
export const GET = createTestimonialsRouteHandler;
export const POST = createVideoTestimonialRouteHandler;

Widgets

To display the testimonials on your website, you can use the following widget:

import { TestimonialWallWidget } from '@kit/testimonial/widgets';
export default function TestimonialWidgetPage() {
    return (
        <div className={'flex h-full w-screen flex-1 flex-col items-center py-16'}>
            <TestimonialWallWidget />
        </div>
    );
}

Done! You now have a fully functional Testimonial Collection plugin integrated with your Makerkit application.