Emircan Erdemci

Porch

A link page builder with live previews and subscriptions.

  • TypeLink-in-bio SaaS
  • Year2026
  • My roleProduct, design and full stack development
Open the live site Source code
  1. Porch homepage in dark mode, with a headline and three phone previews of personal link pages. 01 Porch porch.emircan-erdemci.workers.dev

Put your links on one page, customise the theme and track clicks. Edits appear in a live phone preview. Stripe payments use test mode.

The challenge

Fast public pages and API-proof subscription limits, within the Workers free plan’s CPU constraints.

My role

I built the product, interface, database rules, Stripe integration and deployment, with 62 tests running in CI.

Architecture

Where each part runs. Red follows the example flow.

  1. L1 Interface Runs on: Browser

    Live previews, accessible link ordering and click analytics. Public pages use minimal JavaScript.

    • Next.js 16
    • Tailwind CSS 4
    • shadcn/ui
    • dnd-kit
    • Recharts
  2. L2 Server Runs on: Cloudflare Workers

    Runs Next.js, verifies webhooks and caches public pages for a day, refreshing after edits.

    • Cloudflare Workers
    • OpenNext
    • Workers KV
  3. L3 Data Runs on: Supabase

    Triggers, column permissions and row-level security enforce plans. A dedicated function exposes public data.

    • Postgres
    • Row-level security
    • Supabase Auth
    • Supabase Storage
  4. L4 External services Runs on: Stripe

    Checkout, subscription management and signed webhooks, all in test mode.

    • Stripe Checkout
    • Customer Portal
    • Webhooks

Step by step: A Pro upgrade in test mode

  1. L1 · Interface The user opens Stripe Checkout in test mode.
  2. L4 · External services Stripe completes the test payment and sends a webhook.
  3. L2 · Server The Worker verifies the signature and fetches the current subscription.
  4. L3 · Data The handler updates the plan; database rules prevent user-side changes.
  5. L1 · Interface All themes and unlimited links become available.

Key decisions

  1. 01

    Database-enforced plans

    Postgres enforces link limits and Pro themes. Users cannot change their plans. PGlite tests verify the rules.

  2. 02

    Verified webhooks

    Each verified event fetches the current Stripe subscription, reducing outdated updates from duplicate or reordered events.

  3. 03

    Worker CPU usage

    Static assets and caching reduced CPU usage. Recorded warm requests: 5 to 14 ms. Compressed bundle: 2.65 to 1.64 MiB.

  4. 04

    Lightweight pages

    Separate layouts, CSS dark mode and sendBeacon keep pages light. Recorded mobile Lighthouse performance: 98.

  5. 05

    Theme contrast

    An import script adjusts OKLCH lightness to meet WCAG AA contrast thresholds.

Desktop and mobile

Porch homepage in dark mode, with a headline and three phone previews of personal link pages.
A Porch link page in light mode on mobile, showing a potter’s profile, a featured link and four additional links.
Next project · 02 Parley Streaming AI chat with weather, calculation and time cards.
Contact

Let's talk.

Email me about your next web project.

Email me emircan.erdemci@hotmail.com