Webflow Dashboard Refactor

Finding the Gap

Here's what we had: a working SvelteKit dashboard that let template creators log in, manage assets, and hit some basic API endpoints. Authentication worked. File uploads worked. The core CRUD operations were solid.

Here's what we didn't have:

• No way to track submissions (6 templates per 30 days limit—kind of important)
• No validation results UI (GSAP checks required, but creators couldn't see results)
• No marketplace insights (competitive intelligence? Nope.)
• No carousel images or secondary thumbnails (half the showcase features)
• No animations (the original had kinetic numbers and smooth transitions)

The question we had to answer: could autonomous AI workflows close that gap systematically? Or would we hit the wall where human judgment becomes essential?

Why This Mattered

An incomplete dashboard isn't just missing features—it's unusable for production. Imagine trying to use Photoshop when the layers panel randomly doesn't load. Sure, you can edit images, but you're constantly working around what's broken.

That's where we were. Basic functionality: check. Production readiness: not even close.

Why Leave Next.js?

The original Next.js version worked fine. This wasn't a rescue mission—the production app served creators successfully. So why migrate at all?

The answer comes down to philosophical alignment with CREATE SOMETHING principles. Not "React is bad" but "SvelteKit better embodies weniger, aber besser"—less, but better.

Here's what we mean:

const [count, setCount] = useState(0);

useEffect(() => {
  // What goes in this dependency array?
  doSomething();
}, [count]); // Did I get this right?

let count = $state(0);
// That's it. It just works.

When you're using React, you're thinking about hooks, dependency arrays, and re-render behavior. When you're using Svelte, you're thinking about your application. The framework disappears.

This is what Heidegger called Zuhandenheit—ready-to-hand. The hammer you don't notice while hammering. The framework you don't think about while coding.

The Infrastructure Story

The other piece: Cloudflare vs. Vercel. Not because Vercel is bad, but because Cloudflare unified everything under one platform.

The infrastructure recedes. You stop thinking about "which service handles this?" and start thinking about "what does this feature need?"

What Was Actually Missing?

We ran a systematic comparison between the original Next.js dashboard and the SvelteKit port. Not assumptions—actual component-by-component analysis using Gas Town (Claude Sonnet 4.5).

The results:

The missing 15 weren't trivial UI tweaks. They were core features:

1. MarketplaceInsights.jsx — 770+ lines of analytics, competitive intelligence
2. SubmissionTracker.jsx — Complex hybrid API for 6-templates-per-30-days limit
3. GsapValidationModal.jsx — Four-tab validation results
4. CarouselUploader.jsx — Multi-image upload with drag-to-reorder
5. SecondaryThumbnailUploader.jsx — Marketing image uploads
6. AnimatedNumber.jsx — Kinetic number animations for stats
7. CategoryPerformanceTable.jsx — Analytics breakdowns by category
8. StatusHistory.jsx — Audit trail for template state changes
9. Overview.jsx — Dashboard with animated stat cards

Plus 10+ custom hooks for state management, API interactions, and validation logic.

The Reality Check

This is why systematic analysis matters. Gut feelings about "how complete is this?" are usually wrong. You need to actually count.

How We Approached It

We didn't just start coding. We broke the work into phases based on business impact, not technical difficulty.

The Architecture Decisions That Mattered

Submission Tracking:

The original used a hybrid approach—external API provides raw data, client calculates business logic. We kept that pattern but migrated the external API to a Cloudflare Worker.

Why hybrid? Separation of concerns. The external API just answers "how many templates has this user submitted?" The client handles the rolling 30-day window calculation, expiry dates, and whitelist status.

Multi-Image Upload:

Three image types (thumbnail, carousel, secondary) with different requirements. We unified them into one component with mode switching instead of three separate components. Less duplication, clearer pattern.

GSAP Validation UI:

Four tabs (overview, pages, issues, recommendations) displaying validation results. The original React version used Context for state management. The Svelte version? Just stores. Simpler, clearer.

Submission Tracking

The key insight: UTC date handling matters. A rolling 30-day window isn't calendar months—it's "submissions made in the last 2,592,000 seconds."

let submissionData = $state<SubmissionData | null>(null);

async function fetchSubmissions() {
  const response = await fetch('/api/submissions/status');
  const data = await response.json();

  // Calculate rolling window
  const now = new Date();
  const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);

  const recentSubmissions = data.submissions.filter(sub => {
    return new Date(sub.createdAt) >= thirtyDaysAgo;
  });

  submissionData = {
    count: recentSubmissions.length,
    nextAvailable: calculateNextSlot(recentSubmissions),
    isWhitelisted: data.user.whitelisted
  };
}

The UI just shows the progress: "4/6 submissions used. Next slot available: March 15, 2024." Simple for users, precise for the system.

GSAP Validation Modal

Four tabs, one modal, clear information architecture:

• Overview: Score, pass/fail status, total issues
• Pages: List of validated pages with GSAP usage
• Issues: Violations with severity, code snippets, fix suggestions
• Recommendations: Performance improvements and best practices

Marketplace Insights

The most complex feature: 770+ lines in the original. We preserved all functionality:

• Top performers leaderboard with user's ranking
• Trending categories with growth rates
• Market insights generation (trend analysis, competition, opportunities)
• Category performance breakdown
• Animated stat cards with kinetic numbers

The Harness Approach

We used CREATE SOMETHING's autonomous harness to implement the missing features. Here's how it worked:

1. Issue Creation: 14 Beads issues created from feature analysis
2. Smart Routing: Issues labeled by complexity (Haiku, Sonnet, Opus)
3. Autonomous Execution: Harness processes issues without human intervention
4. Checkpoints: Progress reports every 3 sessions or 4 hours
5. Reactive Steering: Humans redirect priorities when needed

The Numbers

What Made It Work

Three factors enabled autonomous completion:

The CORS Problem

The submission tracker needed to call an external API (Check-Asset-Name on Vercel). The new Cloudflare Pages domain wasn't in the API's allowlist. Two solutions:

1. Update the external API: Add new domain to allowedOrigins
2. Server-side proxy: Create endpoint in SvelteKit that proxies requests

We did both. The proxy handles all scenarios, the allowlist ensures direct calls work when possible.

Environment Variables

SvelteKit on Cloudflare Pages accesses environment variables via platform.env, not process.env. This tripped up initial Airtable integration.

// ❌ Doesn't work on Cloudflare Pages
const API_KEY = process.env.AIRTABLE_API_KEY;

// ✅ Works on Cloudflare Pages
export const GET: RequestHandler = async ({ platform }) => {
  const API_KEY = platform?.env?.AIRTABLE_API_KEY;
  // ...
};

Missing User Email

The SubmissionTracker component wasn't receiving the user email prop, so it couldn't fetch submission data. The component showed "Loading..." indefinitely.

Fix: Pass data.user?.email from the page's server load function to the component.

Feature Parity Achieved

Deployment

The new SvelteKit dashboard is live at:

• Production URL: wf.createsomething.io
• Deploy Time: ~2 minutes (Cloudflare Pages)
• Preview URLs: Every git push gets a unique preview

What We Learned

1. Systematic analysis is essential: Count components, don't guess completion
2. Architecture first prevents rework: Complex features need design before code
3. Phased implementation by business impact: Critical → High-Value → Supporting
4. Autonomous workflows are viable: 6x efficiency multiplier, 600x ROI
5. Smart model routing saves money: $2-3 total cost for 40% feature gap

This refactor validated the CREATE SOMETHING thesis: autonomous AI workflows, when properly orchestrated, can complete substantial feature work systematically and cost-effectively.

The key insights aren't about SvelteKit vs React or Cloudflare vs Vercel—those are implementation details. The real lessons are about process:

• Analyze systematically before building
• Design complex features before coding them
• Prioritize by business impact, not technical difficulty
• Use autonomous workflows for well-defined work
• Reserve human judgment for architecture and priorities

The Webflow Template Dashboard is now production-ready with 100% feature parity. More importantly, we've demonstrated that AI-native development workflows can handle substantial implementation work when given clear context, proper architecture, and systematic oversight.

The infrastructure disappears. The framework disappears. Only the work remains.