Roadmap Plugin in the Next.js Supabase SaaS Starter kit

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.

Functionality

The plugin provides the following functionality:

1. Display the feature requests on the website.
2. Allow users to suggest new features.
3. Allow users to comment on existing features.
4. Display the Feature Requests in the Admin panel.
5. Allow Admins to manage the Feature Requests, update their status, and delete them.
6. Allow Admins to manage the comments on the Feature Requests.

Installation

To install the plugin, run the following command:

npx @makerkit/cli plugins add

Since this plugin depends on the Kanban plugin, you need to install both. Please select the kanban plugin from the list of available plugins.

Then, please select the roadmap plugin from the list of available plugins.

The codemod will automatically:

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

Run the migrations

After installation, run the migration and regenerate types:

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

Displaying the Roadmap and Feature Requests

To display the roadmap and feature requests on your website, add the following code to the apps/web/app/(marketing)/roadmap/page.tsx file:

import { RoadmapPage } from "@kit/roadmap/server";
export default RoadmapPage;

Let's now add the comments GET route at apps/web/app/(marketing)/roadmap/comments/route.ts:

import { createFetchCommentsRouteHandler } from '@kit/roadmap/route-handler';
export const GET = createFetchCommentsRouteHandler;

Admin Pages

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

• apps/web/app/admin/roadmap/page.tsx — Feature requests list
• apps/web/app/admin/roadmap/[id]/page.tsx — Feature request detail page