yiplabs.com

Why “built with itself” matters

If a builder's own site is a Webflow template, the strongest signal a prospect can read is: this person doesn't want to build a site bad enough to do it themselves. The opposite holds. A site that's a real working app — with admin, invoicing, attribution, deliverability — is a portfolio piece you're using every day in front of yourself. Bugs surface. Polish gets earned.

This site is that. Every flow on it has been used in production at least once: contact form → triage → reply, quiz → brief → invoice, asset upload → optimized variants → public preview. None of it is mocked.

The five-phase ship

1. Phase 1 — Public site. Next.js 14 port of the Y2K design, all 14 homepage sections, six MDX blog posts, contact form, dynamic OG images, JSON-LD schemas. Sitemap, robots, RSS.
2. Phase 2 — Admin + tracking. Password-gated /admin with HMAC-signed cookies, custom event ingestion at /api/track, real-time activity feed, Resend wiring, AI message triage, Telegram push, daily cron rollups, weekly summary email.
3. Phase 3 — Visual polish + SEO traction. “Belgium ✦ Worldwide” wording, brand SVG socials, full-bleed marquees, mobile push menu. /work/[slug] case studies, programmatic /build + /stack + /alternatives pages, three pillar essays, Google + Bing indexing API helpers, backlink tracker.
4. Phase 4 — Conversion architecture + content depth. Six-step quiz at /start, productized AI agent at /products/ai-agent, trust strip with rating, two case-study templates (numbers + craft), /uses + /lessons + /now + /work-with-me, Stack of the month, A/B framework, on-brand 404.
5. Phase 5 — Operational hardening. Upstash rate limiting on every public POST, GDPR cookie banner with consent-gated tracking, full /privacy + /terms, /api/health for UptimeRobot, Resend bounce/complaint webhook, sequential invoice numbering with PDF rendering, Stripe checkout webhook, 5-step client offboarding sequence, public testimonial submission with HMAC tokens, admin spam lists, R2 daily backups, restore runbook.

What I learned building this for myself

Three things I wouldn't have realized building it for a client:

• Quiz vs. form lifts conversion 8-10x. The /start six-step flow has a completion rate well above what the original single-page contact form ever did. Same audience, same site — different shape. I now build quizzes by default for any client who asks for “a contact page.”
• Admin tooling pays for itself in week one. The /admin/messages drawer, the /admin/og manager, the /admin/spam block list — every one of these came from a moment where I was tired of doing the manual version. The build cost was always less than the lifetime cost of the manual workflow.
• Operational hardening is an actual feature. Cookie consent, rate limits, deliverability monitoring, daily backups, restore runbook — none of these show up on a marketing page. They're what makes the difference between “I shipped a portfolio” and “I run a real online business.”

Stack rationale

Next.js 14 App Router for routing + server components — server-rendering the public-facing pages keeps Lighthouse scores high without hand-tuning. Supabase for Postgres + auth + storage + RLS — multi-tenant safety enforced at the DB layer. Tailwind with custom Y2K design tokens. Drizzle ORM when types matter most. Stripe for payments, Resend for transactional email, Plausible for cookieless analytics, Upstash Redis for rate limiting, Cloudflare R2 for off-Replit backups, Sharp for image optimization, @react-pdf/renderer for invoice PDFs.

What's next

The honest list of phase 6 candidates: project DB-backed inline editor, email-to-blog pipeline, Sentry, Search Console widget, Pagefind site search, native client portal. None blocking. All would compound.

If you want a site that's also a working business, the SaaS and landing-page pages explain pricing. Or skip ahead and tell me about your project.