Day 90: Building a Resilient App Shell & Theme Engine in React

A robust serverless backend is useless if your frontend feels like an unfinished prototype. Today, I executed a complete visual and structural redesign of my Financial Agent.

Here are the technical highlights of the frontend overhaul:

1. Full Theme Persistence
   I built a theme engine supporting System, Light, and Black modes using #171717 and #f4f5f0 base colors. Instead of just keeping this state in the browser, the React app sends the appearance_preference to the AWS backend. This ensures cross-device UI continuity when the user authenticates.

2. App Shell Architecture
   I ripped out the top-bar navigation and implemented a proper desktop App Shell. It features a sticky left sidebar and a dedicated right insights panel for desktop. To fix native scrolling physics, I applied overscroll-behavior: none to the body, preventing the browser's default background rubber-banding.

3. Hardening the Local App Lock
   The PIN lock screen got a UX and security upgrade. I added an invisible input over the PIN dots to seamlessly trigger the mobile keyboard. Architecturally, I implemented a custom PBKDF2 fallback for environments where the native crypto.subtle API is blocked, and wired up a backend endpoint for server-side PIN verification.

Structure your UI with the same rigor you apply to your databases.