Momento

Momento System Design
Momento: Your personal memory scrapbook

Inspiration

As a team, we started talking about how fast everything moves today—how we’re constantly taking pictures, posting, creating, and consuming. But even with thousands of photos on our phones, we realized we barely remember most of them. Snapshots of our days get buried among lecture notes and perfect scenic shots.

The moments that actually make us feel something—a late-night walk, a laugh with a friend, a quiet morning—are lost in the noise. In a world that’s always moving, we realized how important it is to pause and reflect.

That’s what inspired momento: a personal memory scrapbook built for mindfulness.

It lets you capture photos and thoughts as they happen, then helps you look back with intention—organizing your memories by mood, theme, and meaning. Over time, momento becomes more than a journal—it’s a calm space to breathe, reflect, and reconnect with what truly matters.

What it does

Users upload photos and jot down short notes about their days (including thoughts and reflections).
Claude analyzes each entry to identify the mood, themes, and key emotions behind it.
Claude automatically tags your memories for easy sorting and rediscovery based on category.
Supabase stores and manages the media files and the text metadata securely.

Over time, momento builds a gentle timeline of your life, organizing memories by how you felt, not just when they happened. This creates a mindful space for users to pause, breathe, and reflect on what truly matters to them.

How we built it

We built momento as a full-stack web application using Supabase, React, and Anthropic's Claude SDK.

Supabase handled authentication, storage, and real-time database management, allowing users to log in securely, upload images, and save reflections without external dependencies. This structure gave us a fast, open-source alternative to Firebase while letting us manage relational data and file storage seamlessly.

We integrated Claude to analyze memory entries and generate insights based on tone, emotion, and topic. Using the Claude SDK, we designed structured prompts that classify user input into themes—like joy, nostalgia, or calm—and generate short, reflective summaries to accompany each entry.

Finally, the frontend was built in React, styled with Tailwind CSS, and managed through npm for package dependencies. The project architecture was organized with configuration files like vite.config.ts, tsconfig.json, and component folders for scalability.

Challenges we ran into

We first tried building momento as a mobile app using Expo Go, but we quickly ran into dependency mismatches and layout issues when trying to connect everything through Supabase. After a few rounds of debugging, we realized it made more sense to focus on a web version first, which optimized the development process.

We also wanted to let users upload videos along with their photos, but realized their large storage dependencies and difficulty in analyzing them with LLMs would make the project scope unfeasible. So, we started brainstorming smarter ways to handle storage and compression for future versions.

Finally, one of the biggest challenges was getting React components to sync properly with Supabase data, especially when managing state and timing across different functions. Ultimately, these challenges helped us understand how the pieces of a full-stack app fit together, and made our final build much stronger.

Accomplishments that we're proud of

We’re proud that we built a full-stack web app that can help people practice mindfulness. From integrating Superbase for user authentication and storage to connecting Claude for generating insights and implementing React for our interface, every part came together to create a platform that encourages mindfulness and reflection. This was our first time working with Claude’s SDK and Supabase’s backend, so we’re proud of how we extended Anthropic’s models to build an application that promotes mindfulness and reflection within our communities.

What we learned

Throughout this project, we deepened our understanding of web development, especially how authentication and database management connect in Supabase’s backend to create a secure, data-driven experience within a React framework.

Working with Anthropic’s Claude SDK taught us how to design intelligent features responsibly and effectively. From the CalHacks Claude workshop, we learned about prompt structure, caching, and memory, which helped us refine how Claude analyzes user reflections. Finally, we learned the importance of scope and clarity and how by simplifying our stack, we can create a more stable and focused user experience.

What's next for momento

Next, we want to make momento even more dynamic and personal. One of our main goals is to introduce a video memory feature, allowing users to capture short clips that complement their written reflections and photos. We plan to implement smarter compression and analysis tools to handle video data efficiently during this extension.

We’re also exploring a community reflection feature where users can anonymously share their thoughts, experiences, or gratitude moments with others. The goal is a space for shared mindfulness that helps people feel more connected in their experiences and builds a community grounded in authenticity and reflection.