Modern AI applications face two critical bottlenecks: security exposure (API keys leaked in client-side code) and state fragmentation (user data trapped in browser localStorage).

HYNAWEB’s flagship product, KODA, recently underwent a radical infrastructure transformation to solve both problems simultaneously. This case study documents the migration from a vulnerable frontend architecture to a secure, serverless, cloud-native ecosystem powered by Cloudflare Workers and Supabase.

🛑 The Problem: The "Black Box" Risk

Prior to v24, KODA operated on a direct-client model:

1. Exposed Secrets: API keys were embedded in JavaScript bundles, making them visible to any user via the Network tab. Automated bots exploited this, draining inference credits within hours.
2. Local-State Lock-in: Chat histories lived in localStorage. Users could not switch devices without losing context. Clearing cache meant deleting work.
3. Fragile UX: Network interruptions caused infinite loading states ("stuck forever") due to missing timeouts.

The mandate was clear: Zero exposed secrets. Zero state loss. Maximum resilience.

🏗️ Solution Layer 1: The Cloudflare Edge Proxy

We eliminated direct client-to-provider calls entirely. Instead, we deployed a Cloudflare Worker as a secure middleware proxy.

How It Works:

1. Request Interception: KODA sends a POST request containing only the prompt and history to the Worker URL.
2. Secret Injection: The Worker retrieves the API key from encrypted Environment Variables (invisible to the client) and attaches it to the header.
3. Self-Healing Fallback: If the primary model endpoint fails or rate-limits, the Worker automatically retries against a secondary model chain (gpt-oss → llama-4-scout). The client remains unaware of the failover.

Result: API keys are mathematically impossible to extract from the frontend. Uptime increased by 40% due to automatic fallback handling.

☁️ Solution Layer 2: Supabase Cloud State Management

To break the localStorage trap, we migrated all persistent state to Supabase (PostgreSQL) with Row Level Security (RLS).

Schema Design:

• conversations: Stores metadata (title, timestamp, user_id).
• chats: Stores individual messages linked to conversations.
• files: Powers the Code Vault.
• profiles: Handles auth, referrals, and gamification stats.

The RLS Advantage:

Instead of building complex backend middleware, we pushed authorization down to the database layer. Policies ensure that auth.uid() matches the user_id of every row queried. Even if a malicious actor bypasses the frontend, PostgreSQL rejects unauthorized access at the disk level.

Result: True cross-device continuity. A user can start a chat on their phone, open the web app on a laptop, and see the exact same conversation history instantly.

🎨 Solution Layer 3: The UI Revolution (v24)

With the backend secured, we overhauled the frontend for enterprise-grade reliability and aesthetics.

Key Improvements:

1. Viewport Stability: Replaced rigid 100vh with dynamic 100dvh units, eliminating mobile address-bar overlap issues.
2. Resilient Input Handling: Implemented AbortController with a 45-second timeout and a 60-second watchdog timer. Requests can no longer hang indefinitely; users receive actionable error messages instead of frozen screens.
3. Glassmorphic Dark Mode: Adopted a Linear/Vercel-inspired design system with deep blacks (#0A0A0A), subtle borders, and backdrop-blur effects for a premium feel.
4. On-Screen Error Catcher: Added a global window.onerror listener that displays JS exceptions directly in the UI, accelerating QA cycles.

🚀 Impact Metrics

📌 Conclusion

The v24 overhaul demonstrates that security and scalability do not require massive budgets or dedicated DevOps teams. By leveraging serverless edge functions for secret management and managed Postgres for state persistence, HYNAWEB transformed a fragile prototype into a robust, production-ready SaaS platform.

The server is dead. Long live the edge.

Explore the ecosystem: https://hynaweb.vercel.app/

Architecture #Serverless #Cloudflare #Supabase #SaaS #HYNAWEB #CaseStudy