StoryTree

Inspiration

StoryTree was inspired by the popular mobile photography app VSCO. We wanted to create something similar to VSCO, a place where people can store their photos and messages as a lifelong memory, but put a creative twist on it. That creative twist is what led to the formation of the tree, where people can leave their momentos and cause it to grow more and more as the climber climbs higher and higher.

What it does

StoryTree is one public link. A figure climbs a tree that only grows because people post to it — a photo or a short note. Each post adds a branch and makes the tree taller, the post itself hangs on that branch for the next visitor to open. Every 50 posts, the climb pauses for a milestone, everything left since the last one scatters across the screen at once. Every 100 posts, the tree's whole colour palette shifts through four lighting phases morning, afternoon, dusk, night so the tree visibly ages as it fills. No accounts, no feed, nothing to win.

How we built it

The tree is drawn procedurally in code as an SVG tree whose height, branch positions, and the climber's position are all pure functions of one number the total post count. Posts live in a single Supabase table with a gap free index; concurrent posts race on a unique constraint and retry. On top of that procedural skeleton, we have AI generated photos from Reve cartoon art (the climber, leaf clusters, sky backgrounds) drops into public/tree/ and gets compiled into the app automatically on build so art and code could ship independently without either side blocking the other. We split the work two ways on purpose: one person owned the majority of the code (lib/, app/, components/, the database), the other owned only the art assets and the visitor facing copy. A shared brief (PARTNER-BRIEF.md) kept both sides working without stepping on each other's files.

Challenges we ran into

Keeping a two person team from colliding in the same repo was the biggest one we solved it by drawing a hard line between "art and copy" files and "code" files, and treating any cross lane fix as something to report, not patch, even when it would've been faster to just fix it. Getting ten separate illustrations (four climber lighting phases, three leaf shapes, four skies) to read as one consistent art style rather than ten unrelated images took real back and forth, including catching one asset with mismatched outline weight and a sky with a garbled AI generation artifact in it. On the code side, procedurally placing fruit and foliage so nothing looks repetitive, while keeping positions deterministic (hashed from index, so nothing shifts between renders), took some tuning.

Accomplishments that we're proud of

We kept the old branching story version fully working as a fallback instead of deleting it, so nothing was lost in the pivot. The build pipeline compiles dropped in art and copy with zero code changes required, a half finished art set never breaks the app, it just falls back to placeholder shapes. And every visual element from Reve and the code itself, was checked for the thing that actually matters on a phone: does the climber still read as "a person climbing" at 80 pixels tall.

What we learned

This being our first hackathon, we both learned a lot that we could not have learned any other way. Neither of us have ever launched a website before, and since this was a big part of the main track, we had to spend hours learning how to use tools such as Vercel and Supabase. Technical aspects aside, one of the biggest things we learned throughout the duration of this hackathon is the importance of well thought out planning. We were so focused on getting started with the code that we did not spend enough time planning through the whole thing, and because of this we had to restart our entire idea very late into the first day of hacking.

What's next for Story Tree

The biggest change that has to be made with StoryTree involves the privacy aspect of it. Currently, there is only one tree that everyone has access to, but there may be many instances where a user might not want their photos to be accessible by the entirety of the public. To fix this, we plan on adding user specific trees, and group trees. There will even be a leaderboard for group trees to show who has been sharing their memories the longest.

Built With

• claude
• nextjs
• react
• reve
• supabase
• tailwindcss
• typescript
• vercel