What shipped

YouTube metrics auto-refresh with Blob caching

Video statistics (views, likes, comments) are now cached in Vercel Blob and refreshed automatically. Two refresh paths:

• Cron job — runs daily at 06:00 UTC via /api/cron/refresh-metrics, fetching public statistics using a YouTube API key
• Admin visit — live OAuth fetch on every dashboard load, with results cached for the cron fallback

The metrics dashboard now shows a "Last updated" timestamp and a manual Refresh button.

Animated blog components

Four new client-side components for visually rich blog posts:

• DashboardShowcase — animated recreation of the YouTube metrics dashboard with count-up animations, gradient border, macOS window chrome, and staggered reveal
• PipelineFlow — 5-step content pipeline visualization (horizontal on desktop, vertical on mobile) with animated gradient connection line
• ImpactGrid / ImpactMetric — scroll-triggered counting stat cards with glow effects and color-coded borders

All components use IntersectionObserver for reveal-on-scroll and requestAnimationFrame for smooth counting animations.

Admin-only feature gating

YouTube publish buttons, newsletter notifications, and LinkedIn copy are now visible only when the admin is authenticated. Public users see article video links but not publishing controls.

Interactive 3D architecture visualization

A React Three Fiber scene renders the full js17.dev architecture — 17 provider nodes with orbital rings, connection lines, cost labels, and auto-rotating camera. Embedded in the blog via dynamic import with ssr: false.

New blog post: "The Machine That Builds Itself"

A showcase post demonstrating the full pipeline with real YouTube metrics data, animated dashboard, pipeline flow visualization, impact stats, and the 3D architecture scene — the most visually rich entry on the site.

Public article video links

Blog readers can now see YouTube Short and Long video links on published articles, even without authentication.

What shipped

AI-powered YouTube video publishing

Every blog post now has a "Publish to YouTube" button visible to the admin. One click triggers the full pipeline: GPT-4o generates a narration script tailored to the article, OpenAI TTS converts it to audio (onyx voice), Shotstack composes a video with custom slides, and the result uploads directly to YouTube — all server-side, no manual editing required.

Two formats are supported per article: Short (1080x1920, vertical, under 60 seconds) and Long (1280x720, horizontal, full narration). Each format tracks its own YouTube URL to prevent duplicate uploads.

Brand video management page

A dedicated admin page at /admin/youtube manages brand-level videos (logo animations) in both short and long formats. Publishing status, YouTube URLs, and format metadata are all visible in one place.

Newsletter post notifications with AI synopsis

When a new blog post is published, the admin can notify all subscribers with a single click. GPT-4o-mini generates a concise synopsis of the article, which is embedded in a redesigned email template. Sent posts are tracked in Vercel Blob to prevent double-sends.

Newsletter email redesign

Both the welcome email and post notification emails received a visual overhaul — branded header, clean typography, prominent CTA buttons, and proper unsubscribe links compliant with RFC 8058 one-click unsubscribe.

OAuth token auto-refresh

Google OAuth access tokens (1-hour TTL) are now refreshed automatically in auth.ts using the stored refresh token. YouTube uploads no longer fail silently after 60 minutes of session time.

Admin auth hardening

All admin API routes now use verifyAdmin(req) with getToken from next-auth/jwt instead of getServerSession, which cannot read cookies reliably in Next.js 14 App Router route handlers. This fixed 401 errors on all admin endpoints.

Environment variable hygiene

All Vercel environment variables were re-added using printf '%s' to prevent trailing newline characters (%0A) that caused silent authentication failures with Google OAuth and the Shotstack API.

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)