Building a Real Dashboard in Lovable (step by step)

TL;DR

We’ll build from scratch an executive dashboard connected to Google Sheets that updates in real time. No code. 25 minutes from zero to live.

Captura de tela

Lovable initial workspace with creation chat

lovable.dev

1

Creation chat

2

Projects

3

Templates

4

Sidebar

Abrir ↗

1. 1 Creation chat — describe the app in English — the more specific, the better
2. 2 Projects — all the apps you have already created
3. 3 Templates — ready starting points (landing, dashboard, CRM, e-com)
4. 4 Sidebar — navigation between projects and connectors

Prerequisites

• Account on claude.ai (Pro recommended)
• Account on lovable.dev (Free works)
• Google account with at least one spreadsheet (any data works)
• Modern browser

Step 1 · Pre-analysis in Claude (5 min)

The critical piece: Claude will write the Lovable prompt for you.

Paste this into Claude:

You are senior product designer + data analyst.

<context>
I'm going to attach a spreadsheet (Google Sheets / Excel).
I need an executive dashboard connected to that spreadsheet
that updates in real time.

Build platform: Lovable.dev
Audience: CEO + CFO of the company
Visual style: dark mode, glass morphism, blue + violet palette
</context>

<data>
[Attach your spreadsheet]
</data>

<task>
1. Analyze the spreadsheet. Identify:
   - Most important metrics (top 4 KPIs)
   - Filtering dimensions (period, segment, etc)
   - Time granularity (daily / monthly)
   - Outliers or dirty data that will hurt visualization

2. Design the ideal dashboard structure:
   - 4 KPI cards at the top (with weekly trend)
   - 1 main time-evolution chart
   - 1 table with top N items
   - Side filters

3. Write the complete prompt for Lovable to build that dashboard.
   Include:
   - Desired technology (React + Tailwind)
   - Exact visual structure
   - Filter behavior
   - Palette and typography
   - How to connect to Google Sheets via Lovable's native integration
</task>

<format>
- Spreadsheet analysis (summary)
- Proposed structure (component list)
- FINAL PROMPT to paste into Lovable (in code block)
</format>

What you’ll get

Claude will deliver something like:

PROMPT FOR LOVABLE:

Build an executive dashboard in React + Tailwind CSS with the following structure:

LAYOUT:
- Top: 4 KPI cards (Monthly revenue, New customers, Churn %, Average ticket)
  Each card shows: current value + % change vs previous month + 7-point sparkline
- Center: area chart of revenue by month (last 12 months)
- Bottom: table with top 20 customers ordered by revenue, with columns:
  Customer | Plan | Cumulative revenue | Last activity | Status (badge)

INTEGRATION:
Connect to Google Sheets via Lovable's native integration.
Spreadsheet: "Sales Metrics 2026" (share with read access).
The first tab "Summary" feeds the 4 KPIs.
The "History" tab feeds the chart.
The "Customers" tab feeds the table.

STYLE:
- Background: oklch(10% 0.02 260)
- Cards: glassmorphism (backdrop-blur 20px, white border 8%)
- Primary accent: oklch(72% 0.18 250) (electric blue)
- Typography: Inter Tight (display), Inter (body)
- Rounded borders: 24px for cards, 12px for table

INTERACTION:
- Period filter at top (last 7d / 30d / 90d / YTD)
- Click on customer opens side drawer with details
- Auto-refresh every 5 minutes

RESPONSIVE:
Mobile-first. Cards stack in a column on screens < 768px.

DEPLOY:
Enable SSL and export public URL to share with C-level.

This prompt is the most valuable piece of this lesson. Save it.

Step 2 · Create the project in Lovable (3 min)

1. Go to lovable.dev and log in
2. Click + New Project
3. Paste the full prompt (above) into the box
4. Click Create

Lovable will:

1. Show the execution plan
2. Ask for confirmation
3. Build in ~2-3 minutes

You’ll see the dashboard preview on the right side. It works but doesn’t have your data yet.

Step 3 · Connect Google Sheets (4 min)

In the Lovable panel

1. Left sidebar: Integrations
2. Search Google Sheets → click Connect
3. You’re redirected to Google login → authorize
4. Return to Lovable

In the Lovable agent chat

Paste:

Connect the dashboard you built to my spreadsheet
"Sales Metrics 2026" (already authorized via Google Sheets).

Use:
- "Summary" tab → KPI cards (rows 2-5, columns A-D)
- "History" tab → chart (all rows, column A = month, column B = revenue)
- "Customers" tab → table (all rows, columns A-E)

Configure auto-refresh every 5 minutes.
If any data fails, show a graceful error state.

Lovable will make the connections and in ~1 minute your dashboard displays your real data.

Step 4 · Adjust visuals through chat (5 min)

Everything from here is conversation. Examples:

- The churn card is red when > 5%? Make it yellow between 3-5% and red > 5%.

- The table is cutting off the customer name. Add hover tooltip showing the full name.

- Add a segment filter (reading column F of the "Customers" tab) at the top of the dashboard.

- The title font is small. Increase to text-4xl on desktop and text-2xl on mobile.

Each change takes 30-60 seconds. You see the result in real time.

Step 5 · Publish (3 min)

1. Top right: Publish button
2. Choose:
   • Lovable subdomain (free): your-project.lovable.app
   • Custom domain (Pro): connect dashboard.yourcompany.com
3. Click Publish
4. In ~1 minute your public URL is live

Share with CEO and CFO. Dashboard updates itself as the spreadsheet changes.

Step 6 · Enable security (5 min)

Before putting real production data in, enable Aikido inside Lovable:

1. Left sidebar: Integrations → Security
2. Search Aikido → connect (use free plan to start)
3. Authorize Aikido to scan your project
4. In ~3 minutes you’ll see the security panel with any detected issues

Don’t skip this step when the dashboard will read sensitive data.

Real cost

For this case:

• Claude.ai Pro: US$ 20/month (for initial analysis + adjustments)
• Lovable Free: $ 0 (up to 5 projects, 30 messages/day)
• Aikido Free: $ 0 (up to 10 repositories)

Typical total: US$ 25-55/month depending on usage volume (Claude Pro + Lovable Pro). For a small project, the sum stays close to US$ 25/month — Claude Pro covers almost everything.

Common mistakes

Disorganized spreadsheet

Lovable can’t read a spreadsheet where data starts on row 47, has merged cells, and crazy formatting. Before connecting, clean the spreadsheet.

Not testing with real data

The Lovable preview uses sample data. When you connect Sheets, real values can break the layout (very large numbers, long names).

Sharing public URL with private data

By default, a published Lovable project is public. For private data:

• Enable login (use Supabase Auth integration)
• Configure Row Level Security
• Restrict by email/domain

Not versioning

Enable GitHub sync right at the start. Lovable saves versions automatically, but having it on GitHub lets you revert, fork, and take it elsewhere if needed.

Next step

Dashboard working. Natural next step: close the loop with security — see how to harden what you just built.

Or see how Aikido protects everything you just built.