memory box

Inspiration

Memory Box was inspired by the feeling of wanting to send something more meaningful than a message or a playlist. I wanted a way to package emotions (notes you never sent, photos that hold memories, and songs that say what words can’t) into a single intentional experience. It’s about connection, nostalgia, and care, especially across distance.

What it does

Memory Box lets you create a small digital gift box filled with notes, photos, and music. Once created, the box can be shared via a link and opened by the recipient as an interactive experience. Each box is unique, emotional, and personal, embodying the experience of opening a gift.

How I built it

I built Memory Box using Next.js (App Router) for the frontend and routing, with React and TypeScript for component structure and state management. The boxes and their contents are stored using Supabase, allowing links to work across devices in real time.

The layout uses a fixed design “stage” that scales responsively across screen sizes when receiving a box, preserving the handcrafted look while remaining usable on mobile. I also implemented basic theme detection based on the text content to surface contextual information about the box.

Challenges I ran into

One of the biggest challenges was handling responsive scaling while keeping the visual integrity of the box intact across devices. Another big challenge was ensuring real-time sharing worked reliably across devices, especially when moving from local state to persisted data. I also ran into several build and deployment issues close to the deadline, which required careful debugging under time pressure.

Accomplishments that I'm proud of

• Successfully implementing real-time, cross-device box sharing !!!
• Creating an experience that feels emotional and intentional, not just functional
• Designing and shipping a fully interactive product end-to-end within a tight timeframe
• Handling deployment and debugging complex issues under pressure

What I learned

I learned how critical prioritization is when building emotional products under time constraints. Deciding which features to focus on, which ideas to cut, and how to allocate effort mattered as much as the implementation itself. Even small choices in animation, copy, and flow significantly affected the overall experience. On a technical level, I gained deeper experience with Next.js App Router patterns, responsive scaling strategies, and integrating a backend service smoothly under time constraints.

What's next for memory box

Next, I want to expand Memory Box with a community gallery where users can explore boxes with similar themes, improve mobile interactions, and add more customization options. Long-term, I see Memory Box becoming a space for intentional digital gifting: birthdays, long-distance relationships, friendships, and moments that deserve more than a quick message.