Inspiration

Most phones have a Screen Time feature, but it only goes back a few days and stops at the app level — it tells you how long you spent on your browser, not what you were actually consuming inside it. There's no equivalent for web surfing, which is where people spend a significant chunk of their time. We wanted to build a comprehensive version: one that tracks not just how long you browse, but what you're consuming, how it breaks down, and what it's doing to your brain over time — with history that goes as far back as you want and insights deep enough to actually change behaviour.

What it does

MindMap tracks your content consumption habits through a Chrome extension and visualizes your brain health in real time. Every site you visit is logged and classified — learning content vs entertainment — and your browser history is reflected as a living 3D brain. The brain's colour, glow, pulse, and orbiting particles shift based on your learning-to-entertainment ratio over the last 7 days: cyan and thriving when you're learning, grey and rotting when you're not. Tapping the brain explodes it into floating category labels so you can see exactly where your time went.

How we built it

  • Chrome Extension — captures browsing events (URL, title, domain, duration) and stores them in a Supabase PostgreSQL backend in real time
  • AI Classification — uses the Gemini API to classify each browsing session into categories (coding/learning, news, entertainment, music, sport, etc.)
  • AR Brain Viewer — a mobile web experience built with Three.js 0.150.0 that layers a 3D GLTF brain model over the phone's front camera feed using getUserMedia. Brain state is computed live from Supabase data
  • Supabase — handles data storage and row-level security, with anonymous session auth so the AR viewer can query browsing data without a login wall

Challenges we ran into

  • Data classification — browsing events kept coming back as "uncategorized" or falling into the wrong bucket. We traced it to the Gemini API returning inconsistent results when keys were exhausted or rate-limited. We fixed it by rotating API keys and enforcing a policy of never committing keys to GitHub, storing them in a gitignored config.js instead.
  • AR on mobile — rendering the 3D brain reliably on iPhone Safari was a significant hurdle. WebXR doesn't support immersive-ar on iOS, and our first choice (MindAR) crashed on Safari due to a TensorFlow.js/WASM execution failure. We rebuilt the AR layer using a transparent Three.js canvas overlaid on a fullscreen getUserMedia video feed, which works across all mobile browsers.

Accomplishments that we're proud of

We are proud of getting an AR to work on iPhone Safari. MindAR and WebXR both failed on ios but we found a way to use getUserMedia and a transparent Three.js canvas overlay. Simple but effective, and it runs on every mobile browser The brain's color, glow, pulse speed, and particles all react to real browsing data from the last 7 days. It's not just a demo, it's actually connected to your life. (leave for team — e.g. got it working on iPhone, shipped three modules, etc.)

What we learned

Learned to render 3d brain model on top of the camera feed Implemented Supabase to store browsing events (url, title, domain, category, duration) from the Chrome extension learned to create a browser extension plugin that runs JavaScript in the background and can intercept browser events.

What's next for Mind Map

MindMap will be released as a standalone mobile app alongside the Chrome extension. For the dashboard, visualize browsing history over time (weekly/monthly trends). For AR improvement, the brain follows face position and more brain states or smoother transitions between states. The next step would be adding multi-user. Right now, all events in Supabase are shared (no user accounts) proper auth so each person has their own brain data. Phone notifications when your brain state drops ("you've been on social media for 2 hours") Weekly reports - email or push summary of your learning ratio

Share this project:

Updates