Systems Architecture · Topology & Design

System Architecture & Data Flow

A transparent, technical breakdown of how real-time communication, intelligent routing, and content infrastructure interact across this platform.

01Core Technology Topology

Next.js & React

Application Core

Built on the App Router with Turbopack, Incremental Static Regeneration (ISR), and progressive web app capabilities with offline asset caching.

Supabase & PostgreSQL

State & Realtime Engine

Manages low-latency real-time WebSockets, serverless rate counters, collaborative state synchronization, and privacy-preserving site visit logs.

Sanity.io

Structured Headless CMS

Provides structured content schemas for the engineering blog, public changelog, and developer gear with global edge caching.

Resend & React Email

Email Delivery Engine

Handles transactional email delivery for direct inquiries with server-side validation and formatted responsive email templates.

Telegram Bot Relay

Mobile Admin Gateway

Enables bi-directional, zero-polling live chat communication between web visitors and my mobile device via webhook callbacks.

Gemini & OpenRouter

Multi-Turn LLM Tier

Powers the genious.exe systems assistant with FAQ semantic matching, prompt guardrails, and automated multi-provider failover routing.

02End-to-End Request Flows

Flow A: Direct Contact Submission

How a message submitted through the contact form transitions from client validation to verified inbox delivery.

Step 1 · ClientForm SubmissionClient-side format checks validate email and character lengths prior to dispatch.

Step 2 · Edge APIAbuse & Rate GuardsServerless function validates payload integrity, sanitizes input strings, and checks rate limits.

Step 3 · DeliveryResend API DispatchPayload is rendered into structured HTML and dispatched to my personal inbox with delivery confirmation.

Flow B: Autonomous Systems Assistant (genious.exe)

How user queries are filtered, semantically matched, and routed across resilient LLM providers.

Step 1 · IngestionInput & GuardrailsValidates origin headers, checks server-side rate limits, and sanitizes multi-turn message history.

Step 2 · Knowledge RouterSemantic MatchingEvaluates question intent against indexed portfolio knowledge to construct targeted context.

Step 3 · InferenceDual-Provider FallbackExecutes inference via primary model (Gemini 1.5 Flash), automatically failing over to secondary models if limits are reached.

Flow C: Zero-Polling Live Chat Relay

Bi-directional, zero-polling communication between a web visitor and my personal mobile device.

Step 1 · VisitorRealtime Session JoinVisitor browser subscribes to a scoped Supabase Realtime channel keyed by an unguessable session ID.

Step 2 · RelayTelegram Bot PushServer forwards the message to Telegram Bot API with quick-reply action buttons sent directly to my phone.

Step 3 · ResponseWebhook to RealtimeMy mobile reply triggers a verified serverless webhook that immediately broadcasts to the visitor's channel.

03Engineering Decisions & Architectural Rationale

Why a Hybrid Data Architecture (Sanity + Supabase)?

Early in the design of this portfolio, I evaluated using a single database for everything. However, editorial content and operational application state have fundamentally divergent access patterns.

Sanity CMS excels as an immutable content lake for articles, project write-ups, and changelogs. It provides clean structured schemas and benefits from global CDN caching with Incremental Static Regeneration (ISR).

Conversely, Supabase (PostgreSQL) was chosen for dynamic, low-latency workloads: real-time collaborative scratchpads, ephemeral live chat session mapping, rate limit tracking, and privacy-respecting analytics. Isolating dynamic operational state from editorial content keeps both systems fast, robust, and cleanly separated.

Zero-Polling Live Chat via Webhooks

Most portfolio live chat widgets rely on third-party SaaS embeds (Intercom, Crisp) that inject hundreds of kilobytes of tracking scripts, damage Core Web Vitals, and incur monthly seat subscriptions.

I engineered a zero-polling relay: when a visitor sends a message, my serverless route relays it to a private Telegram Bot API chat with instant push notifications on my phone. When I reply or tap a quick-reply button in Telegram, an authenticated webhook triggers a broadcast event over Supabase Realtimedirectly into the visitor's active channel.

The visitor gets instantaneous answers without long-polling or bulky third-party scripts, and I manage incoming communications from an application I already use daily.

Resilient Multi-Provider AI Routing

AI service rate limits and downtime are inevitable when relying on a single provider tier. To guarantee that genious.exe remains responsive around the clock, I implemented a tiered routing architecture.

Incoming queries are first evaluated against local portfolio domain knowledge. When high-relevance domain questions are identified, queries route to Google Gemini 1.5 Flash. If rate ceilings or upstream outages occur, the request automatically falls back to secondary open-weights models through OpenRouter.

This ensures high precision, zero downtime, and strict control over provider quotas without degrading the visitor experience.