Building PWA from the Ground Up
GeniusArc is a daily learning PWA built around history's most brilliant minds — artists, composers, scientists, thinkers. As a sole builder, I designed, developed, and shipped the entire product: from product strategy and UX to frontend architecture, backend infrastructure, and deployment. The idea that drives everything: learning sticks when it has context — and context is exactly what existing apps leave out.
The Vision
Where other apps give you isolated facts, GeniusArc gives you a world. The quiz is the hook — one question, one legend, every day. But the answer opens into a figure's full biography, their place on an interactive historical timeline, their artistic legacy, and the museums where their work lives. Each layer adds context to the last.
The Marketing Homepage
Designing the signed-out homepage was a distinct design problem from the product itself — and in some ways the harder one. The product earns trust through repeated use. The homepage has one shot.
The strategic decision was to lead with a fact rather than a feature. Da Vinci and Michelangelo were alive at the same time. So were Mozart and Goethe. That headline doesn't describe what GeniusArc does — it makes the visitor feel why it matters. The moment that spark of curiosity lands is the moment they want to play. Everything after that is just removing friction.
Product Architecture
The challenge of building GeniusArc solo was making every feature feel intentional, not incremental. Every structural decision was shaped by one organizing principle: context collapse — the ability to move from a trivia answer to a figure's full biography, timeline placement, artistic legacy, and nearby museum in as few taps as possible.
Quiz + Timeline
The daily quiz and the interactive timeline are the heart of GeniusArc — two features designed to work together. The quiz delivers the spark of curiosity; the timeline gives it somewhere to go. Answer a question about Caravaggio and land on a visual map of his lifespan overlapping with Galileo's, filtered by era, favorited alongside figures you've already discovered. The combination turns a single trivia moment into a genuine understanding of when, where, and alongside whom history's great minds existed. This is the pairing no other art or history app has built.
Information Architecture
The daily quiz is the home for signed-in users — no dashboard to click through, no friction between returning users and the question they came back for. The question is waiting the moment you open the app
An interactive timeline with overlapping lifespans, era and discipline filters, and favoriting — designed to make historical relationships visible rather than just readable
Slug-based routing across figures, museums, and artworks, enabling shareable, linkable URLs for every piece of content
A three-category search (figures, museums, artworks) with database-first image resolution and Wikipedia API fallback, session-cached to avoid redundant network calls
Daily Habit Loop
Date-seeded quiz questions with a per-position shuffle algorithm that guarantees the same question for all users on a given day, with stability across app restarts and notification taps
Push notifications with per-user timezone and delivery-hour preferences, so the daily prompt arrives when it's actually useful
Streak tracking that turns a single good habit into a daily ritual
Museums & Discovery
A fully navigable museums guide with city- and museum-level slug routing, artwork drawers, and favoriting
Clickable artist name links from artwork views that route directly into figure profile pages — creating a natural path from a physical museum visit to biographical depth, closing the loop between the real world and the app
Technical Execution
GeniusArc is built on React/TypeScript with Tailwind CSS and shadcn/ui components, powered by Supabase for the database, authentication, and serverless Edge Functions. The PWA layer handles installability, a service worker, and push notification delivery via VAPID keys managed as Supabase secrets.
Several of the most meaningful engineering decisions came from constraints, not choices. Building on a AI app builder with a limited credit budget pushed me toward a discipline of surgical, targeted changes — understanding the codebase deeply enough to make one-line GitHub edits rather than re-generating entire components. This constraint produced cleaner code than abundance would have.
Key technical challenges solved:
Timezone-safe notifications: Resolved a UTC/local mismatch bug in the cron-based notification system that was causing users to receive yesterday's question at the wrong hour
Shuffle stability: Designed a per-position seeding algorithm so the daily question randomization is deterministic — the same result on every device, every render, without drift
Mobile layout precision: Navigated the full complexity of PWA mobile UX —
fixed inset-0instead ofh-screen,env(safe-area-inset-bottom)for iOS home indicator clearance, and avoidingbackdrop-bluron Android to prevent scroll jankImage resolution pipeline: Built a layered image strategy — database URL first, Wikipedia summary API fallback at Wikimedia-compliant thumbnail sizes — with module-level caching to avoid redundant fetches
Design Language
GeniusArc is built on React/TypeScript with Tailwind CSS and shadcn/ui components, powered by Supabase for the database, authentication, and serverless Edge Functions. The PWA layer handles installability, a service worker, and push notification delivery via VAPID keys managed as Supabase secrets.
Several of the most meaningful engineering decisions came from constraints, not choices. Building on a AI app builder with a limited credit budget pushed me toward a discipline of surgical, targeted changes — understanding the codebase deeply enough to make one-line GitHub edits rather than re-generating entire components. This constraint produced cleaner code than abundance would have.
Key technical challenges solved:
Timezone-safe notifications: Resolved a UTC/local mismatch bug in the cron-based notification system that was causing users to receive yesterday's question at the wrong hour
Shuffle stability: Designed a per-position seeding algorithm so the daily question randomization is deterministic — the same result on every device, every render, without drift
Mobile layout precision: Navigated the full complexity of PWA mobile UX —
fixed inset-0instead ofh-screen,env(safe-area-inset-bottom)for iOS home indicator clearance, and avoidingbackdrop-bluron Android to prevent scroll jankImage resolution pipeline: Built a layered image strategy — database URL first, Wikipedia summary API fallback at Wikimedia-compliant thumbnail sizes — with module-level caching to avoid redundant fetches
Key Takeaway
GeniusArc is the project where design and engineering stopped being separate disciplines for me. Every UX decision had an infrastructure consequence. Every technical constraint shaped a design choice. Sole ownership of the full stack forced a level of systems thinking that cross-functional collaboration rarely demands.
What I'm most proud of isn't any single feature. It's that the product coheres around a single idea — that context is what transforms information into understanding. The quiz, the timeline, the museums guide, and the daily habit loop all exist to serve that premise.
