SaaS Dashboard - Kleap Documentation

Create a software-as-a-service application with user authentication, dashboard, and subscription billing.

What We’re Building

A project management SaaS with:

User authentication (signup, login, logout)
Dashboard with projects overview
Project creation and management
Team collaboration
Subscription billing with Stripe

Prerequisites

Kleap account
Stripe account (for payment links)

Dynamic data and user accounts use Kleap Database — a managed database built into Kleap (with built-in email/password accounts, where each user only sees their own data). It’s opt-in: enable it when a step needs it. You don’t connect your own database.

Step 1: Start with Template

Start with the SaaS template for a head start:

Create new app
Select SaaS Template
Name your project

The template includes:

Authentication setup
Dashboard layout
Basic pages

Step 2: Customize the Landing Page

Update the landing page:
- Change the headline to "Project Management Made Simple"
- Update the subheadline to describe project management features
- Modify the feature cards to show: Task Tracking, Team Collaboration, Progress Reports
- Update the pricing section with three tiers: Starter ($9/mo), Pro ($29/mo), Team ($79/mo)

Step 3: Set Up the Database

Enable Kleap Database for this app. It’s a managed database with built-in email/password accounts, so you can link data to the signed-in user and keep it private so each user only sees their own data — no external database to connect.

Create Tables

Create these database tables:

1. projects
   - id (uuid, primary key)
   - name (text)
   - description (text)
   - user_id (uuid, references the signed-in Kleap account)
   - created_at (timestamp)

2. tasks
   - id (uuid, primary key)
   - title (text)
   - description (text)
   - status (text: 'todo', 'in_progress', 'done')
   - project_id (uuid, references projects)
   - assigned_to (uuid, nullable)
   - due_date (date, nullable)
   - created_at (timestamp)

Add access rules so each user only sees their own projects and tasks.

Step 4: Build the Dashboard

Projects List

Create a projects dashboard that shows:
- Grid of project cards
- Each card shows: name, description preview, task count, last updated
- "New Project" button in the top right
- Empty state if no projects exist

Project Detail Page

Create a project detail page at /dashboard/projects/[id] that shows:
- Project name and description at top
- Task list with columns: To Do, In Progress, Done (Kanban style)
- Ability to drag tasks between columns
- Add task button that opens a modal

Add a "Create Project" modal with:
- Name input (required)
- Description textarea
- Cancel and Create buttons
- Save to database on create
- Redirect to the new project after creation

Step 5: Task Management

Task Card

Create a task card component showing:
- Task title
- Due date (if set)
- Assignee avatar (if assigned)
- Status indicator
- Click to open detail view

Add Task

Create an "Add Task" form with:
- Title (required)
- Description
- Due date picker
- Status dropdown
- Save to the project's task list

Task Actions

Add task actions:
- Click to edit task details
- Mark as complete (moves to Done column)
- Delete task (with confirmation)

Step 6: Team Features

Invite Team Members

Add team invitation:
- Settings page with "Team" tab
- Invite by email input
- Pending invitations list
- Team member list with remove option

Assign Tasks

Update tasks to support assignment:
- Dropdown to select team member
- Show assignee on task card
- Filter tasks by assignee

Step 7: Stripe Billing

Your Kleap app is a static Astro site, so billing runs on Stripe’s hosted pages. You only use your Stripe publishable key — never put a secret key (sk_...) or webhook handler in a static site.

Set Up Stripe

In your Stripe Dashboard, create a Payment Link for each plan (or a subscription Pricing Table / Buy Button).
Copy each plan’s link (or the Pricing Table / Buy Button embed snippet).

Add Stripe billing to the pricing section:
- Pricing page comparing the plans (Starter, Pro, Team)
- Each plan's CTA points to its Stripe Payment Link (or embed a Stripe Pricing Table / Buy Button)
- Stripe hosts the checkout page and collects payment
- After payment, Stripe redirects back to a success page on your site

Manage Subscription

Let customers manage their plan:
- Add a "Manage Subscription" button linking to the Stripe customer portal
- Stripe handles upgrades, downgrades, and cancellations on its hosted portal

Reacting to payment events server-side (Stripe webhooks) or writing the paid plan back into your database needs a backend beyond a static site. For most SaaS MVPs, Stripe’s hosted checkout, Pricing Tables, and customer portal cover billing end to end — with no secret keys in your site.

Step 8: Polish

Loading States

Add loading states:
- Skeleton loaders for project cards
- Loading spinner for task operations
- Disable buttons during async actions

Empty States

Add empty states:
- No projects: "Create your first project"
- No tasks: "Add a task to get started"
- No team members: "Invite your team"

Responsive Design

Make the dashboard mobile-friendly:
- Collapsible sidebar on mobile
- Stacked layout for task columns
- Touch-friendly interactions

Step 9: Launch

Pre-Launch Checklist

All pages load without errors
Auth flow works completely
Kleap Database operations work
Stripe payment links open checkout
Mobile layout is usable
Payment links / buttons point to live Stripe products

Deploy

Click Publish
Test on production URL
Connect custom domain (optional)

Complete Prompts Summary

Here’s the key prompts in order:

Landing page customization
Database schema creation
Projects dashboard
Project detail page with Kanban
Task management features
Team invitation system
Stripe payment links for billing
Polish and responsive design

Next Steps

After launch:

Add more features based on user feedback
Set up analytics to track usage
Create onboarding flow for new users
Add email notifications

Stripe Integration

Detailed Stripe setup guide

​What We’re Building

​Prerequisites

​Step 1: Start with Template

​Step 2: Customize the Landing Page

​Step 3: Set Up the Database

​Create Tables

​Step 4: Build the Dashboard

​Projects List

​Project Detail Page

​Create Project Modal

​Step 5: Task Management

​Task Card

​Add Task

​Task Actions

​Step 6: Team Features

​Invite Team Members

​Assign Tasks

​Step 7: Stripe Billing

​Set Up Stripe

​Add Subscribe Buttons

​Manage Subscription

​Step 8: Polish

​Loading States

​Empty States

​Responsive Design

​Step 9: Launch

​Pre-Launch Checklist

​Deploy

​Complete Prompts Summary

​Next Steps

Stripe Integration

What We’re Building

Prerequisites

Step 1: Start with Template

Step 2: Customize the Landing Page

Step 3: Set Up the Database

Create Tables

Step 4: Build the Dashboard

Projects List

Project Detail Page

Create Project Modal

Step 5: Task Management

Task Card

Add Task

Task Actions

Step 6: Team Features

Invite Team Members

Assign Tasks

Step 7: Stripe Billing

Set Up Stripe

Add Subscribe Buttons

Manage Subscription

Step 8: Polish

Loading States

Empty States

Responsive Design

Step 9: Launch

Pre-Launch Checklist

Deploy

Complete Prompts Summary

Next Steps