Skip to main content
taskboard-example-app

Task Board

Kanban board build in react with drop-in Inbox and Preference Centre.
Try it out | GitHub code repository

​
Step 1: Setup SuprSend MCP Server

Start by setting up SuprSend MCP Server in your AI coding assistant. Once MCP Server is setup, you can just copy and paste these prompts below to build the entire application step by step.

​
Prompt 1: Project Management App Setup

When to use: Start here. This sets up your React app and core Kanban functionality. 
Create a React task management application with SuprSend integration. 

Requirements:
- Kanban board with drag-and-drop functionality
- Columns: To Do, In Progress, In Review, Completed
- Task creation/editing modal with fields: title, description, priority, due date
- Main layout with header containing app title and notification bell icon placeholder
- Responsive design using Tailwind CSS
- SuprSendProvider setup with environment variables for workspace key and public key
- Use @suprsend/react package for SDK integration

​
Prompt 2: Add Popover Inbox and Toast Notifications

When to use: After project management app is working. This adds the popover inbox and toast notifications. 
Add real-time in-app notification system using SuprSend React SDK.

Requirements:
- Implement Inbox component with bell icon and unread badge in header
- Add toast notifications in bottom-right corner when new notifications arrive
- Toast notifications should have progress bar animation
- Ensure toast notifications don't block UI interactions (use pointer-events CSS)
- Badge count should persist until user opens inbox popover
- Use SuprSend's useFeedClient hook to listen for 'feed.new_notification' events
- Display toasts using ToastNotificationCard component from @suprsend/react
- Integrate with react-hot-toast for toast management

​
Prompt 3: Create Workflows on task actions

When to use: After popover inbox and toast notifications are working. This sets workflow triggers in your application. You’ll have to create workflows and templates manually in SuprSend dashboard. Workflow trigger inside your application can be set using this prompt. 
Implement email and inbox notification system using SuprSend workflows.

Requirements:
- Create workflow trigger function that sends notifications when tasks are created or status changes
- Integrate triggers into task creation and status change handlers
- Support both email and inbox channels simultaneously using $channels: ['email', 'inbox']
- Ensure workflows respect user notification preferences automatically
- Wrap all workflow triggers in try-catch blocks for error handling

​
Prompt 4: OTP Email Authentication

When to use: After workflows are set up. This adds secure OTP email authentication to your application. This will need a named otp_verification inside SuprSend dashboard to send OTP email. 
Implement secure OTP email verification with JWT authentication using SuprSend.

Requirements:
- Create two-step authentication form: email/name input, then OTP verification
- Generate 6-digit OTP and send via SuprSend workflow. Workflow slug: "otp_verification" with template variable {{otp}}
- After OTP verification, generate ES256 JWT userToken with distinctId, expiration, and required claims
- Pass userToken to SuprSendProvider along with distinctId for enhanced security mode
- Include refreshUserToken function to automatically refresh tokens before expiration
- Add test email bypass: hardcoded email "[email protected]" skips OTP verification for quick testing
- Pre-fill email field with test email for development
- After authentication, create/identify user in SuprSend using upsertUser API
- Handle OTP resend functionality
- Ensure all SuprSend SDK calls use authenticated userToken for production security

​
Prompt 5: Add Preference Centre

When to use: After authentication works. This adds the Notification Preference Centre to your application. 
Build notification preferences management page using SuprSend React SDK.

Requirements:
- Display all notification categories with toggle switches for opt-in/opt-out
- Show channel-level preferences (email, inbox) for each category
- Set default preferences to opt-in for both email and inbox channels when user first signs up
- Use SuprSend's useSuprSendClient hook to access preferences API
- Implement getPreferences, updateCategoryPreference, and updateChannelPreferenceInCategory methods
- Ensure preferences are respected when triggering workflows (handled automatically by SuprSend)
- Add UI to manage category and channel-level preferences with real-time updates
- Use PreferenceOptions.OPT_IN and PreferenceOptions.OPT_OUT constants

​
Prompt 6: Production Polish & Deployment

When to use: When the app is feature-complete. This prepares for production. 
Prepare the application for production deployment.

Requirements:
- Remove all console.log statements, test data, and hardcoded values
- Ensure all API keys use environment variables (never commit to git)
- Add comprehensive error handling for all API calls
- Pre-fill task creation form with placeholder title that users can edit
- Create comprehensive README.md with:
  * Setup instructions
  * Environment variable configuration
  * Feature documentation
  * Deployment guide
- Configure Vercel deployment with vercel.json for React Router support
- Verify all workflows are committed (not draft) in SuprSend dashboard
- Verify all email templates are published in SuprSend dashboard
- Add .env.example file with placeholder values
- Test OTP email delivery, inbox notifications, and preference changes