DEV Community

Jaber-Said
Jaber-Said

Posted on

πŸš€ 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!

Top comments (0)