FeV
WorkAbout
0%//NAV
INDEX //THEBLACKBOX
Full-Stack / Local-FirstLocal-FirstCanvas & Widget SDKOAuth VaultRealtime Sync

TheBlackBox

Local-first personal control center & modular widget platform. Freeform draggable canvas, schema-driven manifest widget engine, client-side AES security vault, and hybrid Supabase realtime sync.

// System Dossier2025
ROLELead Architect & Full-Stack Developer
CATEGORYFull-Stack / Local-First
TECHNOLOGY STACK
Next.js 16React 19TypeScriptZustandSupabaseTailwindCSSFramer Motionreact-rnd
Live Platform↗
★Verified ReceiptsEMPIRICAL
✓Shipped live production platform at the-black-box.vercel.app/dashboard supporting 14+ built-in widgets (Kanban, Focus sessions, Gmail, Calendar, Custom API).
✓Zero-latency local-first execution: all canvas moves, widget interactions, and task CRUD resolve optimistically on-device with zero network wait.
✓Complete configuration portability: full dashboards and custom widget manifests export to portable JSON bundles with zero cloud lock-in.
NAVIGATE DOSSIER01 · Media Hub & Theater02 · Engineering Challenge03 · 4-Step Pipeline04 · System Blueprint05 · Adjacent Systems
2K FLUID THEATER
TheBlackBox
OFFLINE-FIRST ARCHITECTURE // THEBLACKBOX2025 ARTIFACT SPECIFICATION
// 01 · THE PROBLEM STATEMENT & ARCHITECTURAL CONSTRAINTS

Productivity workflows fragment across dozens of disconnected web apps and browser tabs.

Productivity workflows fragment across dozens of disconnected web apps and browser tabs. Existing dashboard tools are either rigid, static grids with fixed built-in widgets or cloud-locked admin panels that introduce network latency on everyday actions and expose private API credentials in unencrypted cloud databases.

// 02 · 4-STEP SYSTEM ENGINEERING PIPELINE
STEP 01

Architected a local-first freeform widget canvas (react-rnd + Zustand) with multi-canvas switching, snap-to-grid, independent mobile deck ordering, and instantaneous optimistic persistence to localStorage.

STEP 02

Engineered an extensible manifest-driven widget engine: decoupled runtime execution from UI manifests, enabling schema-driven custom widget authoring, JSON import/export portability, and a custom API widget with deep JSON response path inspection.

STEP 03

Built hybrid cloud synchronization over Supabase PostgreSQL: implemented an offline mutation queue with debounced background pushes, soft-delete reconciliation, and Realtime WebSocket multi-device sync.

STEP 04

Implemented client-side vault encryption & server-isolated OAuth: encrypted third-party API tokens in local state before disk persistence, and quarantined Google OAuth tokens strictly in server-side HttpOnly cookies with on-demand refresh helpers.

// 03 · SYSTEM BLUEPRINT & DATA FLOW SCHEMATIC
PURE SVG VECTOR ENGINE
freeform canvas enginereact-rnd · multi-canvas · snapmanifest widget runtimeschema-driven forms · json portabilityclient aes vaultencrypted local secretscustom_apijson inspectorkanbansubtasks & dndfocus_sessionpomodoro / chartsgoogle_calmonth crudgmail_inboxquery presetsnews_readerreadabilitylocal-first core (zustand)0ms optimistic ui latency · instant localStorage persistencemulti-canvas switching · undo/redo · mobile deck layouts100% functional offline without cloud connectivitysupabase sync enginedebounced push · offline queue · realtimeserver-isolated oauthhttponly cookies · 0 client token leakagelocal-first freeform canvas · 14+ widgets · manifest sdk · client aes vault · zero cloud lock-in
MORE SYSTEMS ARCHITECTUREFull Works Index →

Next System

Blinky

AI / Desktop Agent

Next System

VoiceNotes

Local-First / AI Platform

Next page

About me

→

You are one click away

Let's build something.

Open to collaboration, hackathons, and interesting systems problems.

EmailGitHubLinkedInX / TwitterAbout

© 2026 Gourish Julka

Amritsar, India