From CRM to Anything: What Else You Can Build with an AI-First App-Building Workflow

The video demonstrates building a CRM using Tempo and Supabase, but—just like many modern AI-driven demos—the real value isn’t the specific app. It’s the methodology.

At its core, the workflow is simple but powerful:

Describe what you want in natural language → let AI generate UI and logic → connect a real backend → iterate visually and structurally instead of writing everything by hand.

Once you understand that pattern, the CRM becomes just one example among many.

This article explores what other applications naturally fall out of the same approach.

The Methodology, Abstracted

Stripped of branding and tools, the methodology looks like this:

  1. Start with intent, not code
    You explain the product in plain English: data models, flows, and screens.

  2. Use AI to scaffold the interface and logic
    Tools like Tempo generate React components, forms, tables, and flows automatically.

  3. Attach a real backend early
    Supabase provides:

    • Authentication

    • Postgres data storage

    • Row Level Security (RLS)

    • Realtime and storage

  4. Preview and fix in tight loops
    You visually inspect the app, spot issues, and describe fixes instead of refactoring manually.

  5. Iterate at the product level
    You’re adjusting what the app does, not wrestling with boilerplate.

This is fundamentally different from traditional “code-first” development.

What Other Apps Can Be Built This Way?

Once you see the CRM as “structured data + workflows + UI,” many other apps become obvious.

1. Business Systems Beyond CRM

CRMs are just one kind of business database.

Examples

  • Lead and pipeline trackers

  • Customer support ticketing systems

  • Vendor or partner management tools

  • Sales forecasting dashboards

Why it fits

  • Form-heavy interfaces

  • Clear relationships between records

  • Supabase Auth + RLS handle multi-user access cleanly

2. Internal Admin & Operations Tools

These are expensive to build traditionally and perfect for AI scaffolding.

Examples

  • Internal dashboards

  • Inventory and logistics tools

  • Employee directories

  • Operations or compliance trackers

Why it fits

  • UI clarity matters more than pixel-perfect design

  • Schemas evolve frequently

  • AI excels at repetitive CRUD interfaces

3. SaaS MVPs

This workflow is ideal for early-stage products.

Examples

  • Lightweight project management tools

  • Niche analytics dashboards

  • Vertical SaaS (real estate, recruiting, agencies)

  • Subscription-based productivity tools

Why it fits

  • Real backend from day one

  • Easy to validate ideas before heavy investment

  • Supabase scales without rewrites

4. AI-Augmented Business Apps

Once the base app exists, AI features are easy to layer on.

Examples

  • AI summaries of CRM notes

  • Automated lead scoring

  • Natural-language search across records

  • Suggested follow-ups or tasks

Why it fits

  • AI logic lives alongside structured business data

  • Edge Functions can safely call LLMs

  • The UI already exists to surface insights

5. Client & Partner Portals

The same internal app can be exposed externally.

Examples

  • Client dashboards

  • Account management portals

  • Reporting interfaces

  • Collaboration spaces

Why it fits

  • Supabase Auth + RLS naturally enforce access boundaries

  • Same data, different permissions

  • Minimal additional UI work

6. Freelancer & Creator Tools

Many “solo creator” tools are just CRMs with a different vocabulary.

Examples

  • Client and project trackers

  • Content calendars

  • Brand asset managers

  • Campaign planning tools

Why it fits

  • Structured data + workflows

  • Visual iteration matters more than infrastructure

  • AI removes setup friction for individuals

7. Vertical-Specific Software

This is where the methodology really shines.

Examples

  • Real estate deal trackers

  • Recruiting pipelines

  • Legal case management systems

  • Clinic or practice admin tools (non-clinical data)

Why it fits

  • Each vertical needs custom workflows

  • AI scaffolding adapts quickly

  • Supabase provides a solid, compliant foundation

8. Rapid Prototypes & Demos

Even when an app never ships, speed still matters.

Examples

  • Startup demos

  • Internal proof-of-concepts

  • Hackathon projects

  • Investor-facing prototypes

Why it fits

  • You can go from idea to demo in hours

  • The app is real, not mocked

  • Easy to evolve into production later

Step-by-Step GUIDE

This guide follows the workflow shown in the video:

  1. scaffold the CRM in Tempo (AI UI + logic)

  2. connect a real backend using Supabase

  3. preview the app end-to-end

  4. iterate/fix issues quickly

0) Prereqs

Accounts

  • Tempo account

  • Supabase account

Local tools (optional but recommended)

  • Node.js 18+

  • Git

  • Supabase CLI

  • Docker Desktop (needed if you run Supabase locally)

Install Supabase CLI

macOS (brew)

brew install supabase/tap/supabase
supabase --version

Any OS (npm)

npm i -g supabase@latest
supabase --version

1) Intro (0:00)

Goal: a simple CRM to track sales data.

What your CRM should include

  • Contacts / companies

  • Deals (pipeline stages)

  • Notes / activities

  • Basic dashboard (counts, pipeline totals)

2) Getting started with Tempo (0:30)

2.1 Create a new Tempo project

In Tempo:

  • Create new project

  • Choose React (or the default stack Tempo suggests)

  • Pick a “dashboard/admin” starter if available

2.2 Prompt: generate the CRM UI

Paste this as your initial build prompt.

PROMPT (Tempo)

Build a simple CRM web app with:

A left sidebar navigation: Dashboard, Contacts, Companies, Deals, Activities

A dashboard page with summary cards (total contacts, total deals, open deals) and a simple pipeline summary

Contacts page: table + create/edit form

Companies page: table + create/edit form

Deals page: table + create/edit form with fields: name, amount, stage, close_date, company, contact, status

Activities page: notes/tasks linked to a contact or deal
Use a clean modern UI, responsive layout, and sensible empty states.

2.3 Prompt: define the data model

Once the UI is scaffolded, force a clear schema plan.

PROMPT (Tempo)

Propose a database schema for this CRM. Include tables, key fields, and relationships. Use UUID primary keys and timestamps. Explain which pages use which tables.

3) Connecting to Supabase (6:08)

3.1 Create a Supabase project

In Supabase:

  • Create new project

  • Save:

    • Project URL

    • Anon key

3.2 Connect Tempo → Supabase

In Tempo:

  • Use its Supabase integration / “Connect Supabase” flow

  • Paste Project URL + Anon key (as requested)

3.3 Prompt: create tables + relationships + seed data

PROMPT (Tempo)

Create the Supabase tables for the CRM schema (contacts, companies, deals, activities). Add foreign keys and indexes for common queries (e.g., deals by stage, activities by deal/contact). Also add a small seed dataset so the UI isn’t empty.

3.4 (Optional) If you want local Supabase instead of cloud

From a local project folder:

mkdir tempo-crm
cd tempo-crm
supabase init
supabase start

4) Previewing the app (14:25)

4.1 Check the “happy path”

  • Create a company

  • Create a contact linked to the company

  • Create a deal linked to company + contact

  • Add an activity linked to the deal

4.2 Prompt: wire CRUD properly

If any page shows mock data or fails to persist:

PROMPT (Tempo)

Replace any mock data with real Supabase queries. Implement full CRUD on all pages:

list with pagination or simple limit

create, edit, delete

forms should validate required fields
Ensure relationships render correctly (e.g., deal shows company/contact names).

5) Fixing up the app (17:14)

This is the “tight iteration loop” section: you see issues, you describe them, Tempo fixes them.

Common fixes + prompts

A) Relationship dropdowns broken / blank

PROMPT

The deal form’s Company/Contact selectors aren’t populating correctly. Fix the query and display labels (name/email), and store the correct foreign keys.

B) Dates / currency formatting

PROMPT

Format amount as currency in the UI and ensure the DB uses a numeric type. Format close_date consistently and validate it.

C) Dashboard metrics wrong

PROMPT

Fix the dashboard cards so they compute from Supabase:

total_contacts = count(contacts)

total_deals = count(deals)

open_deals = deals where status='open'
Add a pipeline summary grouped by stage.

D) Empty states + loading states

PROMPT

Add proper loading spinners and empty states to all tables. If there are zero records, show a friendly CTA to create the first record.

E) Auth + security (recommended if multi-user)

PROMPT

Add Supabase Auth. Require login to access the CRM. Add Row Level Security so users only access their own records (owner_id = auth.uid()). Update queries to scope by the logged-in user.

Terminal instructions (optional, if you export the code and run locally)

If Tempo lets you export/download the generated project:

A) Install dependencies + run dev server

npm install
npm run dev

B) Add environment variables

Create .env.local (or .env) with:

VITE_SUPABASE_URL="https://YOURPROJECT.supabase.co"
VITE_SUPABASE_ANON_KEY="YOUR_ANON_KEY"

(If it’s Next.js, use NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY.)

C) Apply migrations (if your exported project contains them)

supabase db push

D) Deploy edge functions (only if your build uses them)

supabase functions deploy <function-name>

Copy/Paste Prompt Pack (in order)

  1. Generate CRM UI

Build a simple CRM web app with Dashboard, Contacts, Companies, Deals, Activities…

  1. Generate schema

Propose a database schema… UUIDs, timestamps, relationships…

  1. Create Supabase tables + seed

Create the Supabase tables… add FKs/indexes… seed sample data…

  1. Wire real CRUD

Replace mock data with Supabase queries… full CRUD…

  1. Fix issues fast

(Describe the bug) + “Fix it and keep UI/DB in sync.”

  1. (Optional) Add Auth + RLS

Add Supabase Auth + RLS so users only see their own data.

One more note about the transcript

The transcript file currently attached is explicitly marked as an ad transcript, not the main tutorial transcript.
If you refresh after the ad ends and re-open transcript, I can produce a precise, timestamped checklist that mirrors the presenter’s exact steps and phrasing.

A Parallel Insight: Context Beats Typing

Interestingly, the same principle shows up in adjacent AI workflows: the quality of output scales with the quality of context.

As highlighted in the accompanying ad transcript, removing friction from how you provide context—for example, dictating detailed instructions instead of typing short prompts—dramatically improves AI results and reduces iteration cycles .

The CRM video applies that idea at the application level:

  • More context → better scaffolding

  • Clear intent → fewer corrections

  • High-level direction → faster results

The Bigger Shift

The CRM itself is not the breakthrough.

The breakthrough is that:

  • UI is generated, not handcrafted

  • Infrastructure is real, not simulated

  • Iteration happens in language, not low-level code

Once you adopt this workflow, the question stops being:

“Can I build this?”

And becomes:

“Is this idea worth describing?”

That’s a fundamental change in how software gets built.

If you want, I can:

  • Apply this methodology to a specific industry

  • Outline a full MVP plan for one of these app ideas

  • Translate this into a short blog, newsletter, or slide deck

Just tell me what direction you want to take next.

Vibe Coding, SupabaseFrancesca Tabor