SaaS Growth Framework: How to Get Your First 100 Paying Customers Without Burning Cash

// src/lib/marketing/icp.ts
interface ICP {
  role: string
  companySize: string
  techStack: string[]
  painPoint: string
  budget: string
  whereTheyHangOut: string[]
}

// Example ICP for TanStack Ship:
const icpTanStackShip: ICP = {
  role: "Indie founder / Full-stack developer",
  companySize: "1-10 employees",
  techStack: ["React", "TypeScript", "Cloudflare", "Node.js"],
  painPoint: "Building SaaS boilerplate from scratch takes 4-8 weeks",
  budget: "$200-500 for tools per month",
  whereTheyHangOut: [
    "r/reactjs", "r/webdev", "r/SaaS",
    "Hacker News", "X/Twitter #buildinpublic",
    "Indie Hackers", "React Discord",
  ],
}

// src/lib/marketing/content-strategy.ts
const contentPlan = [
  {
    platform: "r/reactjs",
    format: "Tutorial",
    topic: "How to implement file-based routing with TanStack Router",
    callToAction: "Mention TanStack Ship as a complete starter",
    frequency: "1x per week",
  },
  {
    platform: "Hacker News",
    format: "Show HN",
    topic: "Show HN: I built a SaaS starter with TanStack Start + Cloudflare Workers",
    callToAction: "Direct link to landing page",
    frequency: "At launch + major updates",
  },
  {
    platform: "X/Twitter",
    format: "Build in public",
    topic: "Daily progress on SaaS features, revenue, users",
    callToAction: "Link in bio + profile",
    frequency: "Daily",
  },
  {
    platform: "Indie Hackers",
    format: "Interview / Milestone",
    topic: "How I reached $1k MRR with TanStack Ship",
    callToAction: "Link to product",
    frequency: "Monthly",
  },
]

// Template: High-value cold email
const coldEmailTemplate = `Subject: Quick question about ${prospect.tool}

Hey ${prospect.firstName},

I noticed you built ${prospect.project} with ${prospect.techStack}.

I am working on [Your Product] — a [one-line value prop]. Since you are already using ${sharedInterest}, I would love your feedback.

No pitch, just 10 minutes to show you what I am building and get your honest thoughts.

Are you open to a quick call this week?

Best,
${yourName}`

// src/components/marketing/HeroSection.tsx
export function HeroSection() {
  return (
    <section className="max-w-4xl mx-auto text-center py-20">
      {/* 1. Problem-aware headline */}
      <h1 className="text-5xl font-bold mb-4">
        Ship Your SaaS in Weeks, Not Months
      </h1>

      {/* 2. Specific value proposition */}
      <p className="text-xl text-gray-600 mb-8">
        TanStack Ship gives you a production-ready SaaS starter with
        authentication, billing, UTM tracking, and email campaigns —
        so you can focus on your unique product logic.
      </p>

      {/* 3. Social proof */}
      <div className="flex justify-center gap-8 mb-12">
        <div className="text-center">
          <div className="text-3xl font-bold">50+</div>
          <div className="text-sm text-gray-500">Early adopters</div>
        </div>
        <div className="text-center">
          <div className="text-3xl font-bold">4+</div>
          <div className="text-sm text-gray-500">Weeks saved</div>
        </div>
        <div className="text-center">
          <div className="text-3xl font-bold">100%</div>
          <div className="text-sm text-gray-500">TypeScript</div>
        </div>
      </div>

      {/* 4. Primary CTA */}
      <div className="flex justify-center gap-4">
        <Link
          to="/pricing"
          className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700"
        >
          Start Building →
        </Link>
        <Link
          to="/blog/tanstack-start-end-to-end-tutorial"
          className="border border-gray-300 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-gray-50"
        >
          Read the Tutorial
        </Link>
      </div>
    </section>
  )
}

export const trackPricingView = createServerFn({ method: "POST" }).handler(
  async ({ plan, utmSource }: { plan: string; utmSource?: string }) => {
    await env.DB.prepare(
      `INSERT INTO conversion_events
        (event_type, plan, utm_source, page_url, timestamp)
       VALUES ('pricing_view', ?, ?, ?, unixepoch())`
    ).bind(plan, utmSource ?? "direct", getCurrentUrl())
      .run()
  }
)

-- Track activation events per user
CREATE TABLE activation_events (
  id TEXT PRIMARY KEY,
  user_id TEXT NOT NULL,
  event_type TEXT NOT NULL CHECK (
    event_type IN (
      'signed_up', 'completed_onboarding',
      'created_first_project', 'invited_team_member',
      'connected_payment', 'deployed_to_production'
    )
  ),
  occurred_at INTEGER NOT NULL DEFAULT (unixepoch()),
  FOREIGN KEY (user_id) REFERENCES users(id)
);

-- Activation health view
CREATE VIEW user_activation_status AS
SELECT
  u.id,
  u.email,
  u.created_at,
  MAX(CASE WHEN ae.event_type = 'completed_onboarding' THEN 1 ELSE 0 END) as onboarded,
  MAX(CASE WHEN ae.event_type = 'created_first_project' THEN 1 ELSE 0 END) as created_project,
  MAX(CASE WHEN ae.event_type = 'deployed_to_production' THEN 1 ELSE 0 END) as deployed,
  CASE
    WHEN MAX(ae.event_type = 'deployed_to_production') THEN 'Fully Activated'
    WHEN MAX(ae.event_type = 'created_first_project') THEN 'Exploring'
    WHEN MAX(ae.event_type = 'completed_onboarding') THEN 'Onboarded'
    ELSE 'Stuck'
  END as activation_stage
FROM users u
LEFT JOIN activation_events ae ON ae.user_id = u.id
GROUP BY u.id;

// src/lib/email/retention.ts
const retentionSequence = [
  {
    day: 1,
    subject: "Welcome to TanStack Ship — Your First Project",
    content: "Step-by-step guide to deploying your first app",
    cta: "Deploy Now",
  },
  {
    day: 3,
    subject: "Tip: Authentication is Already Set Up",
    content: "How to customize the auth flow for your brand",
    cta: "View Auth Docs",
  },
  {
    day: 7,
    subject: "35% of Users Miss This Feature (UTM Tracking)",
    content: "How to track every customer acquisition channel",
    cta: "Set Up UTM",
  },
  {
    day: 14,
    subject: "You Have Been Using TanStack Ship for 2 Weeks",
    content: "Here is what you have built so far + what you might have missed",
    cta: "See Progress",
  },
  {
    day: 30,
    subject: "One Month In — How Can We Help?",
    content: "Personal check-in from the founder",
    cta: "Book a Call",
  },
]

// Score-based intervention
export async function handleNpsResponse(
  userId: string,
  score: number,
  feedback: string
) {
  if (score >= 9) {
    // Promoter → Ask for referral
    await triggerReferralPrompt(userId)
  } else if (score <= 6) {
    // Detractor → Immediate founder outreach
    await notifyFounder(userId, feedback)
    await scheduleRecoveryCall(userId)
  }

  await env.DB.prepare(
    `INSERT INTO nps_responses (user_id, score, feedback, responded_at)
     VALUES (?, ?, ?, unixepoch())`
  ).bind(userId, score, feedback).run()
}

// src/lib/marketing/utm.ts
import { useSearchParams } from "@tanstack/react-router"

export function useUtmCapture() {
  const [searchParams] = useSearchParams()

  const utmData = {
    source: searchParams.get("utm_source") ?? "direct",
    medium: searchParams.get("utm_medium") ?? "none",
    campaign: searchParams.get("utm_campaign") ?? "none",
    term: searchParams.get("utm_term") ?? "none",
    content: searchParams.get("utm_content") ?? "none",
  }

  // Persist UTM parameters across the session
  useEffect(() => {
    if (utmData.source !== "direct") {
      localStorage.setItem("utm_data", JSON.stringify(utmData))
      trackUtmVisit(utmData) // Server-side tracking
    }
  }, [searchParams])

  return utmData
}

CREATE VIEW first_100_dashboard AS
SELECT
  COUNT(DISTINCT u.id) as total_users,
  COUNT(DISTINCT CASE WHEN s.status = 'active' THEN u.id END) as paying_customers,
  COUNT(DISTINCT CASE WHEN ae.event_type = 'deployed_to_production' THEN u.id END) as activated_users,
  ROUND(AVG(CASE WHEN s.status = 'active' THEN s.mrr END), 2) as avg_mrr,
  ROUND(SUM(CASE WHEN s.status = 'active' THEN s.mrr END), 2) as total_mrr,
  ROUND(
    100.0 * COUNT(DISTINCT CASE WHEN s.status = 'active' THEN u.id END) /
    NULLIF(COUNT(DISTINCT u.id), 0), 1
  ) as conversion_rate,
  ROUND(
    100.0 - 100.0 * COUNT(DISTINCT CASE WHEN s.status = 'canceled' THEN u.id END) /
    NULLIF(COUNT(DISTINCT CASE WHEN s.status IN ('active', 'canceled') THEN u.id END), 0), 1
  ) as retention_rate
FROM users u
LEFT JOIN subscriptions s ON s.user_id = u.id
LEFT JOIN activation_events ae ON ae.user_id = u.id;