Mind Palace - A Memorization Game

Inspiration

One of us has used the memory palace method for years and can memorize lists, decks of cards, and chapters of material quickly by placing vivid images in a building he knows well. The other first saw the technique at a magic show, where a performer memorized a shuffled deck in minutes, and was excited to finally meet someone who actually uses it. The method connects abstract information to memorable images in specific places, but setting one up can be hard: you need a space you know well and a memorable image for every fact. We wanted to make getting started easier by turning real rooms into palaces you can look around in your browser.

What we learned

How to build an interactive 360° room experience in the browser: displaying panoramic photos, converting a screen tap into a position within the panorama, and linking rooms together with hotspots.
How to keep memory images anchored to specific spots as the user looks around. An image needs a location within the room’s panorama, rather than a fixed position on the screen.
That the memory palace technique is really about concrete images in specific places, so the app had to be image-first and the AI had to suggest simple, familiar objects rather than elaborate stories.

How we built it

We built a Next.js, React, and TypeScript web app, deployed on Vercel, with Photo Sphere Viewer and its markers plugin for the 360° photo rooms. The viewer sits behind an adapter, and panorama positions are stored as yaw and pitch in degrees, keeping the application’s data separate from the rendering engine.

In Edit mode, you import 360° JPEGs, choose a spot in the room, enter what you want to remember and a note, and either upload a picture or describe one to generate. Two protected API routes call OpenRouter: one suggests three familiar objects associated with the information, and one generates a transparent PNG cutout. The server checks the generated image for transparency and visible content before accepting it. Circular links connect rooms so you can move between viewpoints. In Explore mode, the editing sidebar disappears and tapping an image reveals its associated information.

The shared demo saves palace data in Supabase Postgres and images in private Supabase Storage, allowing both teammates to access the same workspace. Revision checks prevent an older edit from silently overwriting newer changes, and failed saves display an error. ZIP export and import provide portable backups. The responsive interface also includes touch navigation and phone-motion controls where supported.

Challenges we ran into

Keeping images in one spot. Memory images needed to stay attached to the same location in a panorama while the user looked around. We stored each image’s room, yaw, and pitch, and converted those coordinates inside the viewer adapter so placement stayed consistent.
Dragging an image versus looking around. Both actions use dragging, so they could interfere with each other. We added explicit editing behavior, intercepted marker-drag events, and used a movement threshold to distinguish a tap from a drag.
AI images that are not real cutouts. Requesting a transparent PNG does not guarantee a usable result. We added server-side checks for transparent edges and a visible subject, rejecting unsuitable outputs before they entered the palace.
Sharing without overwriting each other’s work. Moving from browser-local storage to a shared Supabase workspace introduced conflicting edits. We added revision checks and a “Load latest” action so teammates could retrieve newer changes without silently losing their drafts.