Shifting from Mobile to Web: How I Built a 3-Pane Desktop AI Interface with Expo Web & FastAPI

#ai #opensource #webdev #gemma

When building full-stack applications, we often get boxed into choosing a platform early. But what happens when your native mobile app needs a desktop-grade web version with a multi-pane layout, real-time streaming, and zero friction?

For my project, LLM Council, I decided to bridge that gap entirely. Here is the breakdown of how I migrated our native architecture to a high-performance web client.

The Architecture Setup

The goal was simple: support our iOS/Android mobile builds while building a completely detached, premium desktop web app from the exact same codebase.

Frontend: Expo Web (React Native for Web) + NativeWind (Tailwind CSS)
State Management: Zustand (Local caching, bypassing heavy sync networks for guest modes)
Backend: Python / FastAPI hosted on Render
Hosting: Vercel (Edge network optimization)

3 Technical Hurdles We Overcame

1. Bypassing CORS with a Server-to-Server Proxy

Browsers enforce strict Cross-Origin Resource Sharing (CORS) rules when talking directly to third-party AI APIs like OpenRouter. To solve this, we routed our frontend requests straight to our FastAPI backend. Because Python servers don't face browser CORS restrictions, our backend handles the secure API calls seamlessly.

2. Live Streams via Server-Sent Events (SSE)

To get that ultra-smooth, ChatGPT-style typing animation on the web, we bypassed heavy database listeners and went straight to the native browser ReadableStream API. We parse the incoming raw binary text streams chunk-by-chunk and surgically dispatch updates to our Zustand store to animate the different stages of the AI debate.

3. Fighting the Vercel "White Screen of Death"

Deploying an Expo Router app on a static platform like Vercel usually results in MIME-type panics or routing issues if you refresh a subpage (like /chat/123). Dropping a custom vercel.json rewrite configuration into our directory fixed the single-page routing loop permanently:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

We Are Officially Live! 🚀

The desktop client is officially up, running, and streaming context seamlessly on Vercel's global edge network.

Check out the live announcement and see the final UI breakdown here:

https://x.com/JimmyFalco65924/status/2061129219049181598?s=20

Have you ever migrated an Expo app to the web? What was your biggest layout or deployment hurdle? Let's discuss below!

DEV Community