Dashboard — Cursor + D1 + Cloudflare
Real-time data dashboard with charts and filters
Analytics dashboard with live charts, filterable tables, date range picker, and CSV export. Deployed to Cloudflare's edge for instant loading worldwide.
What's Included
Charts
Line, bar, and pie charts with Recharts
Data Tables
Sortable, filterable tables with pagination
Date Range
Date picker filtering all dashboard data
CSV Export
Export any table to CSV
Auto-refresh
Dashboard updates every 30 seconds
Setup Guide
Clone and install
$ git clone https://github.com/gptsters/dashboard-starter my-dashboard && cd my-dashboard && npm install
Create D1 database
Creates your analytics database.
$ npx wrangler d1 create dashboard-db
Set up Clerk
Add auth for multi-user access.
Add to .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
Deploy to Cloudflare
Deploys to Cloudflare Workers — loads in <50ms globally.
$ npm run deploy
Cursor Prompt
Paste this into Cursor to generate the full codebase
Build a data dashboard: - Next.js 14, D1 database, Clerk auth, Recharts Pages: 1. Overview: 4 KPI cards + line chart (trend) + bar chart (categories) 2. Data table: sortable, filterable, with pagination and CSV export 3. Settings: user preferences, date format, timezone Features: date range picker filtering all data, auto-refresh every 30s, dark mode toggle. Start with D1 schema for metrics data, then build the overview page with charts.
Tools You'll Need
Based on this starter's stack
Some links are affiliate links.
Common Issues
Related Starters
Frequently Asked Questions
~35 minutes. The setup guide walks you through every step with copy-paste commands. No guesswork.
Free to start. Cloudflare Workers has a generous free tier.
Yes. The starter kit gives you a working foundation. Use the included Cursor prompt to add features specific to your product.
Check our integration guides at /integrations and prompt library at /prompts for step-by-step instructions on adding any feature.