> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.
# SaaS Dashboard
> Build a complete SaaS application
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:
1. Create new app
2. Select **SaaS Template**
3. 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
```
### Create Project 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
1. In your Stripe Dashboard, create a **Payment Link** for each plan (or a subscription **Pricing Table** / **Buy Button**).
2. Copy each plan's link (or the Pricing Table / Buy Button embed snippet).
### Add Subscribe Buttons
```
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
1. Click **Publish**
2. Test on production URL
3. Connect custom domain (optional)
## Complete Prompts Summary
Here's the key prompts in order:
1. Landing page customization
2. Database schema creation
3. Projects dashboard
4. Project detail page with Kanban
5. Task management features
6. Team invitation system
7. Stripe payment links for billing
8. 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
Detailed Stripe setup guide