FAQ

General

What tech stack does the kit use?

• Framework: Next.js 16 (App Router, React 19, Server Components, Server Actions)
• Database: Supabase (PostgreSQL with Row Level Security)
• Auth: Supabase Auth (email/password, Google OAuth, GitHub OAuth)
• Styling: Tailwind CSS v4 with oklch color tokens
• Components: shadcn/ui (Radix UI primitives via Base UI)
• Drag-and-drop: @hello-pangea/dnd
• Charts: Recharts 3
• Fonts: Inter (body), DM Sans (headings), JetBrains Mono (code)
• Dark mode: next-themes with class-based switching

Is this a SaaS template?

No. This is a project management UI kit with a fully wired Supabase backend. It does not include billing, subscription management, or multi-tenant workspace isolation. All authenticated users share a single workspace. You can add billing (e.g., Stripe) and multi-tenancy on top.

How many database tables are included?

31 tables across the schema, including:

• Core entities: profiles, workspaces, projects, tasks, subtasks, task_comments
• Organization: cycles, modules, goals, key_results, pages
• Junction tables: project_members, task_labels, cycle_tasks, module_tasks
• Analytics: daily_metrics, burndown_points, velocity_points, cumulative_flow_points, contribution_data
• Platform: activities, notifications, saved_views, automation_rules, milestones, labels
• Settings: api_keys, webhooks, integration_configs, project_templates, notification_preferences

How many routes does the kit have?

44 routes organized under the (dashboard) layout group, covering projects, boards, tasks, cycles, modules, goals, pages, analytics, roadmap, workload, settings, and more.

Auth

What auth methods are supported?

Email/password, Google OAuth, and GitHub OAuth via Supabase Auth. The signInWithProvider Server Action handles OAuth flows with redirect to /auth/callback.

How is the user profile created?

When a user signs up, Supabase Auth creates a row in auth.users. A database trigger (003_triggers.sql) automatically creates a corresponding row in the profiles table with the user's full_name, email, and avatar_url extracted from user metadata.

How do I make myself an admin?

After creating your account, update your profile role in the Supabase Table Editor:

UPDATE profiles SET role = 'Owner' WHERE email = 'you@example.com';

Board & Tasks

How does drag-and-drop work?

The Kanban board uses @hello-pangea/dnd (a maintained fork of react-beautiful-dnd). When a card is dropped in a new column:

1. An optimistic UI update moves the card instantly in local state
2. A toast confirms the move
3. The updateTaskStatus Server Action writes the new status to Supabase
4. revalidatePath() refreshes server data on the next navigation

Are task numbers auto-generated?

Yes. The createTask Server Action queries the maximum number for the project and increments by 1. Task numbers are scoped per project and displayed with the project prefix (e.g., PRJ-42).

How do subtasks work?

Subtasks are stored in the subtasks table with a task_id foreign key. They have their own title, completed status, assignee, and due date. The SubtaskList component renders them with checkboxes that call updateSubtask to toggle completion.

What happens when I delete a task?

The deleteTask Server Action first fetches the task to get its project_id, then deletes the task. The ON DELETE CASCADE constraints automatically remove related subtasks, comments, task labels, cycle tasks, and module tasks.

Cycles (Sprints)

How is velocity calculated?

When you complete a cycle via the completeCycle Server Action, it fetches all tasks in the cycle via the cycle_tasks junction table. It sums the estimate field of tasks with status Done to get completed_points, and sums all task estimates to get planned_points. The velocity is set to completed_points.

Can I have multiple active cycles?

The schema does not enforce a single active cycle, but the UI shows only one "Active" cycle card at the top of the cycles page. You can activate multiple cycles by setting their status to Active, but the UI is designed around one active cycle per project.

What are story point estimates?

Tasks have an optional estimate field (numeric) for story point estimates. When feat_estimates is enabled on a project, the estimate field appears in the task detail sidebar and is used in velocity and burndown calculations.

Analytics

Where does analytics data come from?

• Daily metrics come from the daily_metrics table (one row per day per project)
• Velocity data comes from the velocity_points table (one row per sprint)
• Cumulative flow comes from the cumulative_flow_points table (one row per day per project)
• Burndown data comes from the burndown_points table (one row per day per cycle)
• Status/priority distribution is computed at query time from the tasks table
• Contribution data comes from the contribution_data table (one row per member per project)

How do I populate analytics data?

The analytics tables need to be populated. You can:

1. Use the seed data included in the kit
2. Write database triggers that insert a daily_metrics row when tasks are created/completed
3. Write a cron job that snapshots task status counts into cumulative_flow_points daily
4. Have completeCycle also insert into velocity_points

What chart library is used?

Recharts 3. All charts use the ResponsiveContainer wrapper for responsive sizing and are styled with CSS variable references (var(--chart-1), var(--border), etc.) for theme consistency.

Styling & Theming

How do I change the brand color?

Edit app/globals.css and change the oklch hue from 255 (blue-indigo) to your desired hue. Update --primary, --primary-foreground, and related tokens in both :root and .dark. See Design Tokens for details.

Does dark mode work out of the box?

Yes. Dark mode is handled by next-themes with attribute="class" and enableSystem. It defaults to the system preference and can be toggled via a theme switcher in the sidebar. All components use semantic CSS tokens that adapt automatically.

Can I use a different component library?

The kit uses shadcn/ui components (built on Radix UI / Base UI primitives). You can replace individual components, but the entire UI is built on these primitives. Swapping the full library would require significant refactoring.

Deployment

Do I need a paid Supabase plan?

The free tier (2 projects, 500MB database, 50,000 monthly active users) is sufficient for development and small deployments. For production with higher traffic, consider the Pro plan.

Can I deploy anywhere besides Vercel?

Yes. The kit is a standard Next.js App Router project. It can be deployed to any platform that supports Next.js Server Actions: Vercel, Netlify, AWS Amplify, Railway, or self-hosted with next start. The Supabase backend is independent.

What environment variables do I need?

Variable	Required	Description
NEXT_PUBLIC_SUPABASE_URL	Yes	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Yes	Supabase public anon key
SUPABASE_SERVICE_ROLE_KEY	Yes	Supabase service role key (server-side only)
NEXT_PUBLIC_SITE_URL	Yes	Your production URL

Customization

Can I add new task fields?

Yes. Add a column to the tasks table, update the Task interface in types/index.ts, update the mapTask function in lib/queries.ts, and update the createTask/updateTask Server Actions.

How do I add a new page to the sidebar?

1. Create a new route in app/(dashboard)/your-page/
2. Add a navigation link in the sidebar component with a Lucide icon
3. Add the route to the middleware matcher if needed

Can I remove features I do not need?

Yes. Each project has feature flags (feat_cycles, feat_modules, feat_pages, feat_automations, feat_estimates) that control which tabs appear in the project navigation. You can also remove entire route directories for features you will never use.