We Built a Production SaaS in 5 Days: The ContentNow Story

The Challenge: From Idea to Production in 120 Hours

Five days. That's all we gave ourselves to build ContentNow—a production-ready AI content studio that generates, edits, and publishes content across multiple platforms. Not a prototype. Not a mockup. A real SaaS application with paying customers.

This is the story of how we followed Precode's 5-Day MVP Sprint methodology to ship a complete product in 120 hours, and what we learnt along the way.

Why We Built ContentNow

Before diving into the build, let's talk about the problem. Content creators and marketers face three fundamental challenges:

Cost Barrier: AI services charge significant markups on API usage. You're paying for the AI plus someone else's margin.
Platform Fragmentation: Managing content across Webflow, social media, and other platforms requires juggling multiple tools and workflows.
Consistency Gap: Maintaining brand voice across dozens of pieces of content is nearly impossible manually.

We decided to solve this with a BYOK (Bring Your Own Key) model—users connect their own AI API keys, eliminating markups whilst we provide the tooling, automation, and multi-platform publishing they actually need.

Day 1: Foundation & Architecture (12 Hours)

Morning: Core Decisions

The first four hours were critical. We made fundamental architectural decisions that would determine whether we'd ship or fail:

Tech Stack:

Next.js 14 (App Router): Server components for security, streaming for real-time AI responses
TypeScript (Strict Mode): Type safety is non-negotiable for production SaaS
Supabase (PostgreSQL): Built-in auth alternative, excellent developer experience, row-level security
Clerk: Enterprise-grade authentication with OAuth providers
Tailwind CSS + shadcn/ui: Rapid UI development without sacrificing quality

The BYOK model decision was pivotal. Rather than acting as a middleman, we'd let users connect their own API keys. This required serious security architecture from day one:

AES-256-GCM encryption for all API keys
Server-side only decryption
Never expose keys to the client
Store only encrypted values in database

Afternoon: Database Schema

We designed the complete database schema in one session. The key tables:

Users: Synced from Clerk via webhooks
API Credentials: Encrypted storage for Gemini, Claude, OpenAI keys
Content Types: Templates and custom types with output structures
Drafts: All content pieces with AI metadata
Brand Profiles: Voice, tone, guidelines for consistent content
Generations: Token tracking and cost calculation

Row-level security policies were implemented immediately—users can only access their own data, enforced at the database level.

Evening: Authentication Flow

We integrated Clerk for authentication with OAuth support (Google, GitHub). The challenge: Clerk webhooks needed to sync user data to Supabase, but we couldn't use Clerk's userId directly as Supabase's auth.uid().

Solution: Created a mapping layer where clerk_id in our users table references Clerk's user ID, whilst Supabase RLS policies query against this field.

Day 1 Deliverables:

Project scaffolded with Next.js 14
Authentication fully functional
Database schema designed and migrated
Encryption utilities for API key storage
Basic dashboard layout with navigation

Day 2: AI Provider Integration (16 Hours)

Multi-Provider Architecture

Day 2 was all about the core value proposition: AI content generation. The challenge was supporting multiple providers (Gemini, Claude, OpenAI) with a unified interface.

We built a provider abstraction layer:

Google Gemini: Text and image generation with Nano Banana
Anthropic Claude: Superior text generation, instruction following
OpenAI: GPT models for text, GPT Image 1 and DALL-E for images

Each provider has quirks. Gemini uses a different streaming format. Claude requires specific message structures. OpenAI has function calling. We abstracted these differences behind a clean interface.

Streaming Implementation

Real-time generation is crucial for user experience. We implemented Server-Sent Events for streaming responses:

Users see content as it's generated
Token-by-token delivery
Progress indication
Interrupt capability

The client-side hook manages streaming state, accumulates chunks, and handles errors gracefully.

Cost Tracking

Every AI generation is logged with token counts and estimated cost. We built cost calculation logic for each model:

Gemini 2.0 Flash: $0.075 per 1M input tokens
Claude 3.5 Sonnet: $3 per 1M input tokens
GPT-4o: $5 per 1M input tokens

Users can see exactly what they're spending on AI, with no markup from us.

Day 2 Deliverables:

Gemini, Claude, and OpenAI implementations
Unified AI provider interface
Streaming text generation with SSE
Image generation (Gemini, OpenAI)
Token tracking and cost calculation
Generations history table

Day 3: Content Management (14 Hours)

Content Types System

Rather than one-size-fits-all, we built a flexible content types system. System templates include:

Blog Post: Title, excerpt, body, tags, SEO
Social Media Post: Platform-optimised short-form
Email Newsletter: Subject, preview, body sections
Product Description: Features, benefits, call-to-action
Landing Page Copy: Headlines, value props, CTAs

Users can also create custom content types with their own output structures.

Rich Text Editor

We integrated Tiptap for proper content editing:

Bold, italic, underline, strikethrough
Headings (H1-H4)
Bullet and numbered lists
Links with URL validation
Image insertion
Code blocks and blockquotes

Auto-save implemented with 2-second debounce. Changes are preserved even if users navigate away.

Brand Profiles

The secret sauce for consistent content. Brand profiles capture:

Brand Voice: Prose description of personality
Tone Keywords: Descriptive words (expert, friendly, innovative)
Content Guidelines: Rules and best practices
Topics to Avoid: Subjects to never mention
Mandatory Elements: Must-include items
Social Accounts: Accounts to promote, mention, or avoid

When generating content, brand context is injected into the system prompt, ensuring consistent voice across all content.

Day 3 Deliverables:

Content types with templates
Tiptap editor integration
Drafts CRUD with auto-save
Brand profiles system
System prompt injection
Content editor page

Day 4: Publishing Integrations (18 Hours)

Webflow CMS Integration

Publishing to Webflow is powerful but complex. Webflow's API has quirks:

Asset uploads require a 6-step process
Rate limits are strict (60 requests/minute)
Field mapping varies per collection

We built the complete flow:

Fetch sites from user's Webflow account
Get collections for selected site
Retrieve collection fields
Build dynamic field mapper UI
Upload images via presigned URLs
Create CMS items with mapped fields

The 6-step asset upload process was particularly challenging:

Request presigned upload URL
Download image from source
Upload to presigned URL
Poll for processing completion
Receive CDN URL
Use in CMS item

Publer Social Scheduling

Social media scheduling through Publer handles:

Multiple platforms (Twitter, LinkedIn, Facebook, Instagram)
Multiple accounts per platform
Platform-specific formatting
Async media processing
Scheduled posting with variance

Each platform has different character limits and hashtag rules:

Twitter: 280 characters, 3 hashtags max
LinkedIn: 3000 characters, professional tone
Instagram: 2200 characters, 30 hashtags max

We built formatters that automatically optimise content for each platform.

Published Content Tracking

Everything published is tracked in an audit trail:

Webflow site, collection, and item IDs
Publer post IDs and platforms
Content snapshots
Publishing timestamps
Asset URLs

Users can edit scheduled posts after scheduling, with changes synced back to Publer.

Day 4 Deliverables:

Webflow CMS integration
6-step asset upload
Dynamic field mapping
Publer scheduling integration
Platform-specific formatting
Media upload with polling
Published content audit trail

Day 5: Content Plans & Polish (18 Hours)

The Flagship Feature

Day 5 introduced content plans—batch generation of weeks of content in one operation.

Users configure:

Platform (Twitter, LinkedIn, etc.)
Duration (days of content)
Posts per day
AI provider and model
Brand profile
Posting times with variance

The system generates all posts with streaming progress updates. Users see:

Real-time progress bar
Generated posts count
Failed posts marked for retry
Estimated time remaining
Current generation indicator

Each post can be edited individually, regenerated, or scheduled separately. Bulk actions let users schedule entire plans with one click.

Subscription System

We integrated Stripe with four tiers:

Free: 2 plans/month, 50 generations
Starter: £19/month, 10 plans, Webflow publishing
Pro: £49/month, 50 plans, advanced features
Enterprise: £199/month, unlimited everything

Usage tracking enforces limits with soft gates (warnings before hitting limits) and hard gates (blocking actions when exceeded).

Final Polish

The last hours were spent on:

History page with generations and published content
Billing dashboard with usage bars
Dark mode support
Loading states throughout
Error boundaries
Toast notifications
Mobile responsiveness

Day 5 Deliverables:

Content plans with batch generation
Streaming generation with progress
Stripe subscription integration
Usage tracking and limits
History page
Billing dashboard
UI polish and optimisation

Technical Achievements

After 5 days, we shipped a production SaaS with impressive metrics:

Performance: Initial load under 1.5s, time to interactive under 2.5s
Security: AES-256-GCM encryption, row-level security, server-side only key decryption
Code Quality: 100% TypeScript (strict mode), Zod validation, consistent error handling
Features: Multi-provider AI, streaming generation, rich text editing, Webflow publishing, Publer scheduling, content plans, brand profiles, subscription tiers

Lessons Learnt

What Worked Well

BYOK Model: Eliminated pricing complexity and user trust issues. Users know exactly what they're paying for AI.
Next.js App Router: Server components made security straightforward. No risk of exposing API keys to client.
shadcn/ui: Rapid UI development without sacrificing quality. Pre-built components that look professional.
Streaming: Real-time generation feedback dramatically improved UX. Users see content appear token-by-token.
Supabase RLS: Row-level security made multi-tenancy simple. No complex middleware required.

Challenges Overcome

Webflow Asset Uploads: The 6-step process required careful error handling and retry logic.
Multi-Provider Abstraction: Each AI provider has quirks. Gemini streams differently than Claude.
Token Counting: Accurate cost calculation required provider-specific logic and rate updates.
Publer Media Processing: Async polling needed robust timeout handling and status checking.

What We'd Do Differently

Start with more comprehensive content type schema
Build subscription system earlier (easier to gate features from start)
Add end-to-end tests from day one
Implement caching strategy earlier for API responses

The Precode MVP Sprint Methodology

This build followed Precode's proven 5-Day MVP Sprint methodology:

Day 1: Foundation

Core architectural decisions
Database schema design
Authentication setup
Security infrastructure

Day 2: Core Features

Main value proposition
Essential integrations
Data models

Day 3: User Experience

Content management
Editor implementation
User workflows

Day 4: Integrations

Third-party APIs
Publishing flows
External services

Day 5: Polish & Deploy

Advanced features
Subscription system
Final UI polish
Production deployment

The key is aggressive scope management. We focused relentlessly on shipping a working product, not building every possible feature. Version 2 can wait—version 1 needed to work.

Why This Matters

Most startups spend 6-12 months building an MVP. They hire a team, raise funding, build in isolation, then launch to crickets. By then, they've spent £100K+ and learnt nothing about real users.

The 5-Day MVP Sprint flips this:

Speed: 5 days, not 6 months
Cost: Fixed pricing, no burning cash
Learning: Real product with real users immediately
Validation: Prove the concept before committing years

ContentNow proves this approach works. We shipped a complete SaaS application—not a prototype—in 120 hours. It has paying customers. It generates revenue. It's a real business.

The Road Ahead

Version 1 is live, but we're just getting started. The roadmap includes:

Analytics dashboard for content performance
A/B testing for different content variations
Team collaboration and multi-user workspaces
API access for programmatic generation
More integrations (WordPress, Ghost, Medium, Buffer)

But here's the key: we're building these based on real user feedback, not assumptions. Because we shipped in 5 days, we can learn what users actually want and build that, rather than what we think they need.

Want to Try ContentNow?

We're currently in private beta, refining the product based on early user feedback. If you're a content creator, marketer, or business owner who wants to:

Generate consistent content across platforms
Use AI without paying markup costs
Publish directly to Webflow and social media
Plan weeks of content in minutes

Join the waitlist at contentnow.co

Early access users get:

Lifetime discount on paid plans
Direct line to the founding team
Influence on product roadmap
Priority support

Need Your Own 5-Day MVP?

If you've got a validated idea and want to ship fast, Precode's 5-Day MVP Sprint delivers production-ready code, not prototypes. We're an on-demand senior product team that builds real applications in 5 days.

Learn more about how we work at precode.co

This build was completed following the proven 5-Day MVP Sprint methodology. ContentNow is currently in private beta with early users providing feedback for version 2.