Interactive Checklists

Interactive checklists help users track their progress through implementation steps, with data persisted to a database for cross-device synchronization and long-term tracking.

Key Features

• Database Persistence: Checklist progress is stored in the database and synchronized across devices
• Local Storage Fallback: Continues to work offline with localStorage fallback
• Business Stage Customization: Automatically adapt checklist items based on business maturity
• Progress Tracking: Visual progress indicator shows completion percentage
• Authentication Integration: Seamlessly works with your Supabase authentication

Available Components

The interactive checklist system includes multiple components:

• InteractiveChecklist: Core component for tracking progress through a list of tasks
• BusinessStageChecklist: Specialized checklist that adapts content based on business stage (startup, growth, enterprise)
• ChecklistProvider: Context provider for state management and database integration

Basic Usage

First, wrap your app or relevant section with the ChecklistProvider:

import { ChecklistProvider } from '@site/src/components/MDX';

<ChecklistProvider>
  {/* Your content with checklist components */}
</ChecklistProvider>

Then, use the InteractiveChecklist component to create a new checklist:

import { InteractiveChecklist } from '@site/src/components/MDX';

<InteractiveChecklist
  id="onboarding-checklist"
  title="Getting Started"
  items={[
    "Create your account",
    "Complete your profile",
    "Set up your first project",
    "Invite team members",
    "Configure integrations"
  ]}
/>

Business Stage Checklists

For checklists that adapt based on business maturity:

import { BusinessStageChecklist } from '@site/src/components/MDX';

<BusinessStageChecklist
  id="implementation-checklist"
  defaultStage="startup"
  allowStageSelection={true}
/>

Component Props

InteractiveChecklist

Prop	Type	Default	Description
id	string	required	Unique identifier for the checklist
title	string	required	Title of the checklist
items	string[]	required	Array of checklist item texts
type	string	'implementation'	Type of checklist for categorization
className	string	''	Additional CSS class for styling

BusinessStageChecklist

Prop	Type	Default	Description
id	string	required	Base identifier for the checklist
defaultStage	string	'startup'	Default business stage ('startup', 'growth', 'enterprise')
allowStageSelection	boolean	true	Whether to show stage selection controls
customTemplates	object	undefined	Custom templates to override defaults
className	string	''	Additional CSS class for styling

ChecklistProvider

Prop	Type	Default	Description
children	ReactNode	required	Content to be wrapped by the provider

Database Schema

The interactive checklists system requires a user_checklists table in your Supabase database:

CREATE TABLE public.user_checklists (
    id uuid DEFAULT uuid_generate_v4() PRIMARY KEY,
    user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE,
    checklist_id text NOT NULL,
    checklist_type text NOT NULL,
    checked_items boolean[] DEFAULT '{}',
    created_at timestamp with time zone DEFAULT now(),
    updated_at timestamp with time zone DEFAULT now(),
    UNIQUE (user_id, checklist_id)
);

-- Set up row-level security policies
ALTER TABLE public.user_checklists ENABLE ROW LEVEL SECURITY;

-- Users can only see and modify their own checklists
CREATE POLICY "Users can view own checklists" ON public.user_checklists
    FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own checklists" ON public.user_checklists
    FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own checklists" ON public.user_checklists
    FOR UPDATE USING (auth.uid() = user_id);

Examples

Basic Implementation Checklist

import { InteractiveChecklist } from '@site/src/components/MDX';

<InteractiveChecklist
  id="basic-implementation"
  title="Basic Implementation Checklist"
  items={[
    "Set up your developer environment",
    "Create API credentials",
    "Install the SDK",
    "Configure authentication",
    "Test your first API call",
    "Implement error handling"
  ]}
/>

Industry-Specific Checklist

import { BusinessStageChecklist } from '@site/src/components/MDX';

<BusinessStageChecklist
  id="real-estate-implementation"
  defaultStage="growth"
  customTemplates={{
    startup: {
      title: "Real Estate Startup Checklist",
      items: [
        "Set up your agency profile",
        "Add your first property listing",
        "Configure lead capture forms",
        "Set up email notifications",
        "Create your first marketing campaign"
      ]
    },
    growth: {
      title: "Growing Real Estate Business Checklist",
      items: [
        "Import your property database",
        "Set up team accounts and permissions",
        "Configure advanced lead routing",
        "Integrate with your CRM",
        "Set up automated marketing campaigns",
        "Configure custom reporting"
      ]
    },
    enterprise: {
      title: "Enterprise Real Estate Checklist",
      items: [
        "Configure multi-office settings",
        "Set up SSO authentication",
        "Implement compliance workflows",
        "Configure data warehousing",
        "Set up advanced analytics",
        "Configure custom dashboards",
        "Implement franchise management"
      ]
    }
  }}
/>

Accessibility

The checklist components are built with accessibility in mind:

• Progress bars include appropriate ARIA attributes
• Checkboxes are properly labeled
• Focus states are clearly visible
• Color is not the only indicator of state

Best Practices

• Use descriptive, action-oriented language for checklist items
• Keep checklist items concise (ideally under 10 words)
• Group related items together for better organization
• Consider the user's context when deciding which stage to show by default
• Provide clear completion criteria for each item
• Use consistent language and formatting across checklists