🚀 I Built a Block-Based AI Prompt Builder with Next.js and Supabase - Here's What I Learned

The Problem That Started It All
If you're like me, you've probably got AI prompts scattered across:

• Random text files
• Notion pages
• Apple Notes
• That one Google Doc from 3 months ago
• Slack DMs to yourself

And every time you need to tweak a prompt, you're playing copy-paste gymnastics, losing track of what worked and what didn't.
So I built Prompt Builder - a block-based workspace for composing, organizing, and sharing AI prompts. Think of it as Notion blocks meet prompt engineering.
🎯 What It Does
Instead of managing prompts as walls of text, you build them from draggable blocks:
[Block 1: Context] → [Block 2: Instructions] → [Block 3: Examples] → [Block 4: Output Format]

Each block has its own controls:

• 👁️ Toggle visibility (test variations without deleting)
• 🏷️ Wrap with custom tags
• 🎙️ Voice input with transcription
• 📋 Individual copy/paste/clear

The killer feature? Live preview shows your combined prompt in real-time with character count.
🛠️ The Tech Stack
Here's what powers it:

`// Core Stack

• Next.js 14 (App Router)
• Supabase (Database + Auth)
• Stripe (Payments)
• Tailwind CSS + shadcn/ui

// State Management

• Zustand (Editor state)
• TanStack Query (Server state)

// Key Libraries

• @dnd-kit (Drag & drop)
• react-textarea-autosize (Auto-expanding textareas)
• sonner (Notifications)
• next-themes (Dark mode)`

🏗️ Architecture Decisions

1. Block Storage Strategy I store blocks as JSONB in Supabase for maximum flexibility: CREATE TABLE prompts ( id UUID PRIMARY KEY, user_id UUID REFERENCES auth.users, name TEXT, blocks JSONB, created_at TIMESTAMPTZ );
2. Share Links Without Auth Users can share prompts instantly without signing up. I generate unique IDs with nanoid and store them in a public table:

// Generate shareable link
const shareId = nanoid(10);
await supabase
.from('shared_prompts')
.insert({
id: shareId,
content: blocks,
expires_at: proUser ? expiryDate : null
});

1. Real-time Preview Performance Instead of re-rendering everything on each keystroke, I use:

• React.memo on block components
• Debounced preview updates
• Virtualization for long block lists with @tanstack/react-virtual

💡 Cool Features I'm Proud Of
Voice Input with Translation (Pro)
// Simplified implementation
const transcript = await speechToText(audioBlob, sourceLanguage);
const translated = proUser
? await translateText(transcript, targetLanguage)
: transcript;
updateBlockContent(blockId, translated);

Drag & Drop with @dnd-kit
<DndContext onDragEnd={handleDragEnd}>
<SortableContext items={blocks}>
{blocks.map(block => (
<SortableBlock key={block.id} {...block} />
))}
</SortableContext>
</DndContext>
Variables System (Pro)
Users can create reusable templates with variables:
Hello {{name}}, regarding {{topic}}...

📊 Current Status

• ✅ MVP launched at promptbuilder.space
• 🎉 No signup required to test
• 💰 Free tier: 3 prompts, 5 blocks/prompt, 10 share links
• 🚀 Pro unlocks: unlimited everything + exports + custom tags + variables

🤔 Lessons Learned

1. Start with sharing: Making sharing work without auth was complex but worth it for adoption
2. JSONB is your friend: For flexible content structures, JSONB beats normalized tables
3. Preview performance matters: Users expect instant feedback - optimize aggressively
4. Stripe is still king: For SaaS billing, nothing beats Stripe's developer experience

🎯 What's Next?

• Team workspaces
• Prompt marketplace
• API access
• Chrome extension
• More AI model integrations

💭 Question for the Community
What features would make YOU switch from your current prompt management solution?
I'm especially curious about:

• Export formats you'd want
• Collaboration features
• Integration needs

Try it out (no signup needed): promptbuilder.space
Drop your thoughts below or roast my implementation choices - I'm here for all of it! 🔥

P.S. - If you're building something similar or want to chat about the technical decisions, my DMs are open!