Helping your SPA get found

K.C. Sheffield — Tue, 10 Feb 2026 00:04:31 +0000

I Built Something I'm Proud Of. Nobody Could Find It.

Building the product was the easy part.

I spent months building a developer tool — a real product that solves a real problem. I shipped it. It works. I'm genuinely proud of it.

Then I Googled my own site.

The homepage showed up — barely. Every other page? Invisible. My docs page, my templates page, my pricing page — Google didn't know they existed. When I shared links on LinkedIn and Twitter, every page showed the same generic preview card. Slack, Discord — same story.

We've all heard "build it and they will come." And even though you know in your head that's not how it works, some part of you still expects it. You build something great, you deploy it, and you wait for people to stumble across your genius. They don't.

Getting eyeballs on your work is the hardest problem nobody warns you about. And for me, the root cause turned out to be embarrassingly simple.

The Problem Every SPA Developer Has

If you built a single-page app — React, Vue, Svelte, whatever — you have this problem right now, whether you know it or not.

Your app ships one index.html. One <title>. One <meta description>. Every route on your site — /docs, /pricing, /about, all of them — serves the exact same metadata to search engines and social platforms.

You have 10 pages. Google sees one. LinkedIn sees one. Twitter sees one. Slack sees one.

And crawlers that don't run JavaScript? They see nothing. An empty div.

I opened Google Search Console and saw 21 out of 25 page resources couldn't even load. Fonts from an external CDN that Google's crawler couldn't reach. My site was basically invisible to the systems that help people discover things.

What I Built to Fix It

I wrote a Cloudflare Worker that sits in front of your SPA like a reverse proxy. Your app doesn't change. Your hosting doesn't change. The worker just intercepts requests and fixes what search engines and social platforms see.

What it does:

Every page gets its own title, description, Open Graph tags, Twitter cards, and canonical URL. Share your /pricing page on Slack and the preview actually says "Pricing" — not your homepage title.
When a search engine crawler or social preview bot visits (Googlebot, Bingbot, LinkedIn, Twitter, Slack, Discord, AI bots — 35+ covered), it gets fully rendered HTML with real content instead of a blank div.
Normal visitors get your SPA exactly as before. Zero changes to your app. Zero impact on performance.

What it doesn't do:

Doesn't require you to change frameworks
Doesn't require SSR or a build plugin
Doesn't touch your existing code
Doesn't care where your app is hosted — Netlify, Vercel, Cloudflare Pages, S3, anywhere

It's one file. It deploys in minutes. And it works for any SPA on any hosting platform.

What You Get

After setting this up on my own site:

10 out of 11 pages showing up in Google
FAQ rich results detected from structured data
Every page has its own social preview on LinkedIn, Twitter, Slack, and Discord
External resource failures went from 21 out of 25 down to near-zero
All pages submitted and crawling on Bing

The whole thing adds about 5ms of latency. For routes that don't need SEO (like your dashboard), the worker proxies straight through with zero overhead.

You Can Set This Up With an AI Prompt

I packaged the entire setup into a single AI prompt. You paste it into Claude Code, Cursor, Windsurf, or whatever AI editor you use. It asks you a few questions — your domain, your routes, what you want each page's title and description to be — and then it builds everything.

The worker. The prerender script. The sitemap. The robots.txt. Structured data. Deployment. Search console submission steps. All of it.

No need to understand HTMLRewriter or Playwright or JSON-LD. The prompt handles the technical side. You just answer questions about your app.

**Here is the ai prompt https://gist.github.com/Fruitloop24/f663a9c80a291035b42d3d2554ce36f7

Why I'm Sharing This

Because I know there are other devs who built something good and can't figure out why nobody's finding it. The SEO problem with SPAs isn't obvious until you check — and by then you've already lost months of potential traffic.

If you built a single-page app, go check Google Search Console right now. See how many of your pages are actually indexed. See what your social previews look like. You might be surprised.

Then fix it. It takes minutes, not days.

I Added Auth and SaaS Billing to an App in 4 Minutes Using Claude Code — Here's How

K.C. Sheffield — Sun, 08 Feb 2026 00:32:18 +0000

Every side project hits the same wall — auth, billing, usage tracking. The stuff that isn't your actual product but eats weeks of your life.

So I built an API that handles all of it. One publishable key. $19/month flat. No platform fees on your revenue.

The SDK

Published on npm. Safe for frontend. Four calls and you're done.

npm install @dream-api/sdk

import { DreamAPI } from '@dream-api/sdk';

const api = new DreamAPI({
  publishableKey: 'pk_live_xxx'
});

await api.products.list()      // Tiers you set in the dashboard
await api.usage.track()        // Enforced limits and gating
await api.billing.checkout()   // Stripe checkout — your account, your money
await api.auth.getSignUpUrl()  // Hosted auth — no password logic needed

That's your whole frontend integration. No backend routes. No webhook handlers. No Stripe SDK wrangling.

What You Need

A Stripe account (Dream API uses Stripe Connect so payments go directly to you)
A free Dream API account to get your publishable key
That's it

The 4 Minute Demo

Here's the real workflow. I open a terminal, fire up Claude Code, and four minutes later I have a working SaaS with real Stripe billing, tier management, and user auth. Not a mockup. Real test keys processing real transactions.

What It Handles

Dream API covers the three things that kill side project momentum:

Auth — hosted sign-up and login through Clerk. No password logic, no session management, no OAuth wiring. One call.

Billing — Stripe Connect subscriptions, one-time payments, and store checkout. You configure your tiers and pricing in the Dream API dashboard and the SDK handles the rest. Your Stripe account, your revenue, zero platform fees.

Usage tracking — set limits per tier, track consumption in real time, and gate features automatically when users hit their cap. Real-time changes from the dashboard reflect instantly.

It works for SaaS, stores, and membership sites. I'm currently running four separate sites off the same API with full tenant isolation — different users, different billing, completely separate, one publishable key.

Who This Is For

I built this for devs who use AI coding tools in the terminal — Claude Code, Gemini CLI, Cursor, Aider. If you're building with AI and you need the money part handled, this is it.

You configure your tiers and products in the dashboard. The SDK does the rest on the frontend. Your users sign up, pick a plan, and start paying you.

The Templates

Don't want to start from scratch? Six free starter templates ready to go:

React and Next.js SaaS templates
React and Next.js store templates
React and Next.js membership templates

Each one comes pre-wired with the SDK, auth flows, billing pages, and a user dashboard. Clone it, plug in your key, and customize with Claude Code or whatever you build with.

Check out the template docs to see them in action.

See It In Action

Try It

Site: dream.panacea-tech.net
Docs: dream.panacea-tech.net/docs
npm: @dream-api/sdk
14-day free trial, no credit card required

Happy to answer any questions. Roast it, break it, tell me what's missing — I want the honest feedback.

DEV Community: K.C. Sheffield