Build with Bolt and Zapier

I just spent 84 minutes “coding” a fully custom sales dashboard with Bolt.

‍

It’s connected to Zapier Tables so that I can automate everything in it.

‍

I went down the rabbit hole with this one and surfaced with my world shifting with a parallax effect. It was awesome. 

‍

Today, learn how to build your own responsive sales dashboard with CodePen, Bolt, and Zapier that you could sell for thousands. 

‍

Let’s build.

‍

A short note on Replit vs Lovable vs Bolt

I actually tried Replit, Lovable, and Bolt. 

‍

All three help you code from scratch. But Bolt gave me less errors and produced a more beautiful working result than Replit or Lovable. 

‍

I didn’t even need to purchase a Bolt subscription to do it. In Replit, you’re forced to pay to even try it. 

‍

‍

I’m sure there are pros and cons to each, but I won’t get into that today. 

‍

Bolt it is. 

‍

My biggest takeaway: the secret sauce for building with AI

You need a baked out starting point to build effectively with AI.

‍

You don’t want your AI to be a free range chicken (however tasty you think that is).

‍

To prove my point, all you need to do is go to ChatGPT and start chatting without uploading a knowledge source which will get you:

‍

• Broad results.
• Lots of back and forth.
• Aimless circling.

‍

You must give it constraints. Tame the winged-beast.

‍

Side note, this is why Canvas AI in Zapier may leap ahead someday. It’s using Zapier building blocks as constraints.

‍

So when using Bolt, the same principle applies. 

‍

You either need to work from a killer prompt or, most likely, many lines of pre-built code.

‍

Enter CodePen.

‍

How to start building a sales dashboard in Bolt

Go to CodePen and you’ll find frontend designs with code ready for you to copy and paste into the Bolt prompt. 

‍

All I did was type “dashboard” and I found the fully responsive code for my dashboard built by some guy named Dilum Sanjaya. Cheers, Dilum.

‍

‍

Next steps:

‍

1. command+c
2. command+v

‍

Bolt took about a minute to build out a working prototype with dummy data. 

‍

Shocking to say the least. 

‍

Now you need actual data.

‍

Building the database (Zapier Tables?)

This was definitely the hardest part of the process. 

‍

But it was necessary if I wanted to be able to use Zapier to automate the dashboard. With Zapier, I could connect the data to anything! 

‍

Very important.

‍

Here’s the catch: Zapier Tables does not have a public API, yet. 

‍

So how in the world was I able to use it as a database?

‍

‍

I actually had to use another database and sync Zapier Tables to get this done. Yes, yes, a bit of a workaround until Zapier Tables releases the public API. 

‍

But it turns out Supabase works REALLY well for this and it’s free. 

‍

I mean, I could have probably used Google Sheets. But, I’ve been wanting to explore Supabase anyway so that’s what I did. Sue me.

‍

(by the way, if you want to build in Lovable it has a handy integration with Supabase that makes it easy, too)

‍

In Supabase, I started making tables. Pretty simple ones, too.

‍

‍

Back in Bolt, all I had to say was “Let’s connect my Supabase table to provide values for the dashboard.”

‍

I took a few minutes to enter credentials and then BOOM I had my custom data powering the dashboard. 

‍

MIND MELTED.

‍

‍

To make this work with Zapier Tables, I just needed to match the data from Supabase to Zapier Tables and create a Zap.

‍

Connecting to Zapier to unlock automation

In Zapier, the app you use to integrate with Supabase is PostgreSQL.

‍

Why not just integrate with Supabase and manage it there instead of Zapier Tables? Because it's easier to view data, create automation, and use AI in Zapier. Supabase is too much.

‍

The Zapier integration allows you to add new rows or update current rows. Frankly, that’s all you need to create a dashboard.

‍

You build two simple Zaps to power an object in the dashboard like sales reps:

‍

1. Update Zapier Table record, update PostgreSQL row
2. Add new Zapier Table record, add PostgreSQL row

‍

‍

How loud can you scream, “Santa’s coming!”?

‍

Mission complete. 

‍

‍

‍

Now you can add whatever automation you want:

‍

• New lead comes in from a Facebook, add it to the table, see it in the dashboard
• New closed-won deal, add it to the table, see it in the dashboard
• Use AI fields in Tables to enrich data, see it in the dashboard

‍

We’re only working with a sales dashboard use case here. But all you have to do is rename fields and you’ve got an automation dashboard, a project dashboard, a client dashboard, an agency dashboard.

‍

So ripe for selling to a small business of any type. 

‍

Wrapping it all up

I’ll be honest, I haven’t gone down a rabbit hole this deep in awhile. 

‍

But in less than two hours I could push the boundaries and see what’s possible. 

‍

Doesn’t take long to catch up when you get your hands dirty and start building.

‍

To recap:

• The secret sauce you must add: AI does best with knowledge, context, constraints, etc.
• The new power trio: Borrow from CodePen, use AI, then connect to Zapier. 
• If you end up selling one of these, you win.

‍

That’s all for this week!

‍

Happy Building,

Bryce