⚡

Claude Code Rehberi

SaaS / Web App

Auth + database + dashboard + ödeme. Tam dinamik.

İleri 2-6 haftaÖrnek: B2B SaaS, internal tool

SaaS = abonelik tabanlı yazılım. MVP için minimum: auth + dashboard + 1 ana özellik + ödeme + e-posta. Claude Code ile 2 haftada MVP yayında. Modern stack: Next.js + Supabase + Stripe + Resend. Tüm bunlar tek geliştiriciyle, $50-100/ay maliyetle. Eskiden 3-6 ay + $30K-100K, şimdi 2 hafta + $50.

Kim İçin Uygun?

B2B SaaS kurucular (internal tool, productivity, AI tools)
Indie hackers (kendi ürünleri için)
Internal tool ihtiyacı olan şirketler (CRM, admin panel)
MVP test eden girişimciler

Tipik Özellikler

SaaS / Web App için olmazsa olmazlar

Kullanıcı auth (Supabase Auth)

E-posta + şifre + sosyal login (Google, GitHub).

Multi-tenant database

RLS ile organizasyonlar arası veri izolasyonu.

Dashboard

Ana kullanıcı paneli, KPI'lar, son aktiviteler.

Ana özellik (ürünün kendisi)

Niş'inize göre — örn. yazı yaz, fatura kes, müşteri yönet.

Stripe Subscription

Aylık/yıllık abonelik, trial, paket yükseltme, iptal.

E-posta bildirimleri

Welcome, trial bitiyor, abonelik onayı, hatırlatma.

Admin paneli

Kullanıcı yönetimi, faturalar, metrikler.

Onboarding flow

İlk girişte 3-5 adım: ne yapacak, nasıl kullanacak.

Önerilen Yığın

Next.js 14 + TypeScript Supabase (Auth + Postgres + Storage) Stripe (Billing) Resend + React Email Tailwind + shadcn/ui Vercel

Adım Adım Kurulum

8 adımda yayında

PRD + mimari (1 gün)

Claude Code: 'şu ürün için PRD ve mimari öner: kullanıcı sayfaları, admin sayfalar, ödeme, e-posta. Veri modeli tablolarıyla.'

Supabase + Auth (1 gün)

Supabase projesi, e-posta + Google auth, kullanıcı tablosu, organizasyon tablosu, RLS politikaları.

Layout + auth flow (1 gün)

Ana özellik (3-5 gün)

Ürününüzün ana fonksiyonu. Her gün 1-2 alt özellik. Test ederek ilerle.

Stripe billing (1 gün)

Subscription products, Checkout flow, webhook handler, dashboard'da plan yönetimi.

E-posta + onboarding (1 gün)

Welcome, trial countdown, payment success, abonelik iptal. React Email + Resend.

Admin + test (1 gün)

Kullanıcı listesi, subscription durumu, manual müdahale. E2E test (Playwright).

Deploy + monitoring (1 gün)

Vercel prod, custom domain, Sentry (error tracking), PostHog (analytics).

Önemli · Video Slider Rehberi

SaaS / Web App'da Video / Slider Nasıl Yapılır?

SaaS landing page'de demo video = dönüşüm 2× artar. Dashboard içinde feature walkthrough = onboarding tamamlama %80'i geçer. Yardım/dokümantasyonda screen recording = support ticket'lar yarıya iner.

Landing page demo video

Loom kayıt, YouTube/Vimeo'ya yükle, lite-youtube-embed ile göm.

// Hero'da
<LiteYouTubeEmbed
  id="DEMO_VIDEO_ID"
  title="2 dakikada ürün demosu"
  poster="hqdefault"
  webp
/>

In-app onboarding tour

İlk girişte 3-5 adımlı walkthrough. react-joyride kütüphanesi:

npm install react-joyride

import Joyride from 'react-joyride';

const steps = [
  { target: '.new-project-btn', content: 'Buradan yeni proje oluşturun' },
  { target: '.invite-team', content: 'Ekibinizi davet edin' },
  { target: '.upgrade-plan', content: 'Daha fazla özellik için yükseltin' },
];

<Joyride steps={steps} continuous showSkipButton />

Feature walkthrough video

Karmaşık özellikler için 'video tutorial' modal'ı. Dashboard içinde her bölümde küçük (?) ikonu, tıklanınca video açar.

<button onClick={() => setVideoOpen(true)}>
  <QuestionMarkIcon /> Nasıl kullanılır?
</button>

{videoOpen && (
  <Dialog open onClose={() => setVideoOpen(false)}>
    <video src="/tutorials/feature-x.mp4" controls autoPlay className="w-full" />
  </Dialog>
)}

Yardım merkezi video kütüphanesi

/help sayfası: kategori başına 3-5 video. Loom ile kayıt, embed.

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {tutorials.map(t => (
    <div key={t.id} className="rounded-lg overflow-hidden border">
      <div className="aspect-video">
        <iframe
          src={`https://www.loom.com/embed/${t.loomId}`}
          frameBorder="0"
          allowFullScreen
          className="w-full h-full"
        />
      </div>
      <div className="p-4">
        <h3 className="font-bold">{t.title}</h3>
        <p className="text-sm text-gray-600">{t.duration} · {t.category}</p>
      </div>
    </div>
  ))}
</div>

Müşteri başarı hikayesi videoları

Landing page'de sosyal kanıt: 'X şirketi nasıl başarılı oldu' tarzı 60 sn case study video carousel.

<Swiper modules={[Pagination, Navigation]} navigation pagination={{ clickable: true }} className="my-12">
  {caseStudies.map(c => (
    <SwiperSlide key={c.id}>
      <div className="grid md:grid-cols-2 gap-8 p-8 bg-gray-50 rounded-2xl">
        <video src={c.video} controls poster={c.poster} className="rounded-xl" />
        <div>
          <h3 className="text-2xl font-bold">{c.title}</h3>
          <p className="mt-4">{c.summary}</p>
          <div className="mt-6 flex gap-6">
            <div>
              <p className="text-3xl font-bold text-emerald-500">{c.metric1}</p>
              <p className="text-sm text-gray-600">{c.metric1Label}</p>
            </div>
            <div>
              <p className="text-3xl font-bold text-emerald-500">{c.metric2}</p>
              <p className="text-sm text-gray-600">{c.metric2Label}</p>
            </div>
          </div>
        </div>
      </div>
    </SwiperSlide>
  ))}
</Swiper>

Loom embed sağlığı

Loom video'lar bazen yavaş yükler. Önce thumbnail göster, click'te yükle. Veya MP4 export edip kendin host et.

// Lazy Loom embed
const [loaded, setLoaded] = useState(false);

{!loaded ? (
  <div onClick={() => setLoaded(true)} className="aspect-video bg-gray-100 cursor-pointer">
    <img src={`https://cdn.loom.com/sessions/thumbnails/${loomId}.jpg`} className="w-full h-full" />
    <PlayIcon className="absolute inset-0 m-auto" />
  </div>
) : (
  <iframe src={`https://loom.com/embed/${loomId}?autoplay=1`} />
)}

Hazır Promptlar

Claude Code'a Yapıştır

Köşeli parantezleri kendi içeriğinizle değiştirin.

SaaS başlangıç iskelet

Aç ▾

Next.js 14 + TypeScript + Supabase + Tailwind + shadcn/ui ile SaaS iskeleti kur.

Yapı:
- (auth) grup: login, signup, forgot-password
- (marketing) grup: anasayfa, /pricing, /docs
- (app) grup: /dashboard, /settings, /billing, /team — protected
- /api/webhooks/stripe, /api/email, /api/cron

Supabase:
- users tablosu (auth.users'a foreign key)
- organizations (multi-tenant)
- members (user_id, org_id, role)
- subscriptions (org_id, stripe_id, status, plan)
- RLS politikaları (her tablo için)

Middleware: protected routes auth kontrolü.
Layout: dashboard layout (sidebar + header + content).
shadcn/ui ile button, dialog, dropdown, toast kurulu.

İlk komut: `npx create-next-app@latest` ile başla.

Stripe subscription tam kurulum

Aç ▾

Stripe billing tam entegrasyonu:

Products & Prices (Stripe Dashboard'da):
- Starter: $9/ay, $90/yıl (10 user, 100 project)
- Pro: $29/ay, $290/yıl (sınırsız user, 1000 project)
- Enterprise: contact us (custom)

Backend:
- /api/stripe/checkout — Checkout Session
- /api/stripe/portal — Customer Portal (plan değişimi, fatura)
- /api/webhooks/stripe — tüm subscription event'leri handle
  - customer.subscription.created → DB'ye yaz
  - customer.subscription.updated → status güncelle
  - customer.subscription.deleted → status=canceled
  - invoice.payment_failed → user'a mail at

Frontend:
- /pricing sayfası: 3 plan kartı + toggle (monthly/yearly)
- /billing sayfası: mevcut plan + 'manage' butonu (Portal'a)
- Trial: 14 gün, kart bilgisi gerektirmeden

Edge case'ler: webhook race condition, retry, idempotency.

Multi-tenant RLS politikası

Aç ▾

Supabase'de multi-tenant SaaS için RLS politikaları yaz:

Senaryo: Her kullanıcı bir veya daha fazla organizasyonun üyesi. Sadece üyesi olduğu org'ların verilerini görebilir/değiştirebilir.

Tablolar:
- organizations (id, name, owner_id, plan, created_at)
- members (user_id, org_id, role: 'owner'|'admin'|'member')
- projects (id, org_id, name, ...)
- tasks (id, project_id, ...)

RLS:
- organizations: SELECT olmaması, members tablosu üzerinden join ile
- members: kendi user_id'sini, ve owner ise tümünü görür
- projects: members.org_id = projects.org_id ise SELECT
- tasks: projects.org_id'si üyesi olduğu org'lardan biriyse SELECT

Tüm INSERT/UPDATE/DELETE politikaları da yaz.
Test query'leri ile doğrula. Edge case: organizasyondan çıkma, davet kabul, role değişimi.

Gerçek Örnek

Bu rehberden gerçek bir vaka

Brief

B2B SaaS — küçük ajanslar için müşteri yönetimi (mini-CRM). 3 paket: free, $29, $99/ay.

Sonuç

10 iş gününde: auth + dashboard + müşteri/proje yönetimi + Stripe billing + onboarding + 6 e-posta + admin. Vercel + custom domain. İlk 100 kullanıcı bekliyor.

Next.js 14SupabaseStripeResendReact Emailshadcn/uiVercelSentryPostHog

Sık Hatalar

Bunlardan kaçının

Hata

Her şeyi ilk versiyona sıkıştırma — 3 ay sonra hâlâ launch yok

Çözüm

MVP = minimum viable. 1 ana özellik + auth + ödeme. Geri kalan post-launch. Reid Hoffman: 'eğer ilk ürününüzden utanmıyorsanız, çok geç çıkardınız'.

Hata

Stripe webhook handler unutuluyor — abonelikler senkron değil

Çözüm

Webhook'lar production'da çalışıyor mu test et. Stripe CLI ile local'de simüle et. Idempotency önemli (aynı event 2× gelebilir).

Hata

Free trial kart istemeden veriyor — kötüye kullanım

Çözüm

14 gün trial, kart bilgisi opsiyonel. Çok cömert plan değil. Email verification zorunlu.

SSS

SaaS / Web App için sık sorular

Bolt.new veya v0 kullanmalı mıyım?▾

Bolt/v0 hızlı prototype için iyi. Production için: Claude Code daha kontrollü, anlaşılır kod, sahip olma. Bolt UI'da yapacaksanız ama production kodu Claude Code ile düzenleyebilirsin.

Supabase yerine Firebase mi?▾

Supabase modern (Postgres, native SQL), açık kaynak, daha ucuz scale, RLS güçlü. Firebase: hızlı başlangıç, real-time çok iyi. Yeni proje için Supabase tavsiye.

Stripe yerine Lemon Squeezy / Paddle?▾

Lemon Squeezy + Paddle merchant of record (vergi yönetir) — Türkiye'den global satış için harika. Stripe daha esnek ama vergiyi sen yönetirsin. Solo kurucu için: Lemon Squeezy başlangıç.