What shipped

Scam & abuse detection on the proposal form

Hostile submissions — insults, spam, discriminatory content — are silently blocked before any email reaches the inbox. The filter runs three layers: keyword matching, an AI content policy check (OpenAI Moderation API, free endpoint), and an autonomous learning system that extracts new block-terms from flagged content and persists them to cloud storage for future fast-path blocking.

Admin moderation dashboard

A private dashboard at /admin/submissions shows every proposal ever submitted — clean and blocked alike — with detection source, categories flagged, confidence scores, and a submission excerpt. No personal data stored beyond what's needed for observability.

Certified credentials section

Your 10 verified badges from MongoDB, Google Cloud, Certiprof, and others now appear on the homepage, pulled live from the Credly API and cached for 24 hours. Each badge links back to the verified credential on credly.com.

Newsletter security hardening

The subscribe endpoint now validates that the email domain actually accepts mail (DNS MX check), rejects 20+ known disposable/throwaway providers (mailinator, guerrillamail, yopmail…), and enforces a per-IP rate limit of 2 subscriptions per hour — all without a third-party service.

Google OAuth fixed

Root cause: environment variable set with a trailing newline character (%0A), making Google's client lookup fail with invalid_client. Re-added all credentials using printf '%s' to prevent shell newline injection. Both production and sandbox now authenticate correctly.

Proposal flow integration tests

8 automated test cases run against the live API: valid submission, validation errors (short title, invalid email, empty currency, no price), silent moderation block, rate limit enforcement, and malformed JSON. Run with npm run test:proposal:sandbox or npm run test:proposal:prod.

What shipped

Circuit tree logo & brand mark

A geometric circuit-tree SVG mark — monochromatic, currentColor, fully theme-adaptive. The icon appears in the header alongside the wordmark and in the footer as the full mark. One SVG responds correctly to every theme and dark/light mode without extra CSS.

Seven visual themes

Forest Node (default for first-time visitors), Circuit Dark, Circuit Light, Terminal Green, Plasma Purple, Titanium Gray, and Aurora. Each palette is a complete design token set — headings, code blocks, gradients, borders, and prose typography all adapt. Returning visitors get a random theme on each session.

Theme picker

A popover component with colour swatches, theme names, and descriptions. The active theme shows a live primary-colour dot on the trigger button. Replaces the plain dark/light toggle with something that expresses the breadth of the visual system.

Multi-step proposal form (5 steps)

Client info → Project details → Budget → Contact → Schedule. Each step validates independently with Zod before advancing. The budget step accepts both hourly and fixed-price inputs in USD and EUR, with a flexibility selector. Error messages are inline and field-level.

Cal.com discovery call scheduler (Step 5)

Embedded Cal.com calendar on the final step with loading skeleton, MutationObserver-based ready detection, and a fallback direct-booking link if the embed times out. The script preloads from step 3 to eliminate cold-start latency.

Web push notifications

Visitors can opt into push notifications for new blog posts. A service worker handles delivery. VAPID key pair configured for both production and sandbox environments.

Newsletter sign-up

Minimalist inline and banner variants on the blog index and per-article header. Subscribers stored in Vercel Blob with deduplication.

Prose readability on dark themes

Custom --tw-prose-* CSS variable overrides for every dark palette class, so article text, headings, links, and code blocks are readable regardless of which theme is active — not just the built-in .dark class that Tailwind Typography assumes.

What shipped

AI-powered blog-to-YouTube pipeline

Every blog post gets a "Publish to YouTube" button visible only to the admin. The pipeline:

1. GPT-4o reads the post and writes a structured video script
2. OpenAI TTS (onyx voice) narrates each section
3. Shotstack composes the audio with animated slide visuals
4. The finished video uploads directly to the YouTube channel via the Data API v3

All processing is server-side. The UI shows live progress with per-step status indicators.

Google OAuth with automatic token refresh

Admin authentication via Google OAuth 2.0. Access tokens (1-hour lifespan) are automatically refreshed using the stored refresh_token — no re-authentication required mid-session.

Branch protection & CI/CD (23 minutes)

Established via the GitHub REST API in a single directed session:

• main branch requires PR + 3 passing CI checks + linear history + no force push
• GitHub Actions CI: TypeScript type-check, ESLint, and Next.js build on every PR
• GitHub Actions release: standard-version auto-bumps version + generates CHANGELOG on every merge to main
• Conventional Commits enforced via commitlint + Husky pre-commit hook

Sandbox environment

A sandbox branch deploys automatically to sandbox.js17.dev on Vercel — a complete staging environment with its own env vars, domain, and deployment pipeline. All new features ship to sandbox first.

Security hardening

• YouTube upload moved server-side (eliminated CORS vulnerability)
• Proxy video route restricted to Shotstack CDN hostnames only (SSRF mitigation)
• MDX CVE patch: upgraded next-mdx-remote to v6 (CVE-2026-0969)

What shipped

Full-stack Next.js 14 site

Built on the App Router with a clear separation between server components (data fetching, OG images, GitHub stats), client components (animations, forms, theme), and edge functions (OG image rendering). TypeScript throughout — no any.

MDX blog engine

Author posts in Markdown + JSX. Frontmatter drives metadata, OG images, and the post list. Syntax highlighting via rehype-pretty-code. Reading time calculated automatically. Posts live in src/content/blog/ as .mdx files — no CMS, no database, no subscription.

Live GitHub activity

Contribution graph and repository stats fetched server-side from the GitHub API with a 1-hour ISR cache. Displays real commit history, language breakdown, and streak data — auto-updating without any manual maintenance.

Multi-step proposal form

A guided 5-step contact flow with per-step Zod validation, email delivery via Resend, and a confirmation email to the sender. Covers client info, project scope, budget expectations, contact preferences, and optional discovery call scheduling.

Dynamic OG images

Every page and every blog post generates a branded Open Graph image at request time using the Edge runtime — no image editing, no static files to maintain. Correct previews on Twitter, LinkedIn, Slack, and iMessage automatically.

Transactional email

Proposal submissions trigger two emails: a structured HTML brief to the inbox (with client info, project details, budget, contact, and notes) and a professional confirmation to the client with next steps. Powered by Resend with lazy initialization.

Performance & SEO baseline

• Lighthouse score: 95+ across all pages
• robots.txt and sitemap.xml generated at build time
• Semantic HTML throughout
• All images with explicit width/height to prevent CLS
• Inter + JetBrains Mono loaded via next/font (zero layout shift)