Many Stories – A Digital Life Scrapbook

Many Stories is a scrapbook to track life’s "firsts." Remember your stories with photos in a vibrant, private digital trophy case.

Comment

Inspiration

We take so many photos on our phones, but the most important moments like your first car or a big trip get lost in the thousands of other pictures. I wanted to build a "digital trophy case." A place where these special "firsts" can stand out and be celebrated with stories, not just photos. Many Stories (also called Stories of Lifetime) is a place where your life isn't just recorded; it’s celebrated. I wanted to make every life milestone feel like you are "leveling up" in a video game.

What it does

  1. Many Stories is a smart, multimedia journal that turns your life into an interactive timeline.
  2. Capture Memories: Users can add titles, dates, locations, and descriptions for every milestone.
  3. Multimedia: Unlike a basic diary, you can upload photos, record your voice, or even record a video directly in the app.
  4. Gamification: The app tracks your "streaks" and awards you 10 unlockable badges (like "Legend" or "Story Teller") to keep you motivated.
  5. Perspectives: You can share a story link with friends, and they can add their own version of the event to your card without needing to log in.

How we built it

  1. React 18 & Vite: This is the core "engine" that makes the website run smoothly and load instantly.
  2. Tailwind CSS: We used a "Neo-Brutalist" style. This means using bold black borders and very bright colors to give the app a unique, cool look.
  3. MediaRecorder API: We added a feature where you can record your voice or a video directly on the website to save the "sounds of the moment."
  4. LocalStorage & Session Sync: Your data is saved directly in your browser. If you have two tabs open, they update each other instantly using a special "listener" that watches for changes.

Challenges we ran into

The hardest part was handling Video and Audio without a big server. Storing a 50MB video directly in the browser is tricky. We had to learn how to turn those files into long strings of text (Base64) so the browser could "remember" them without a database. Another big challenge was the "Shared Story" feature. We had to figure out a way to let people see a story through a special link without having to log in, while still letting them add their own comments safely.

Accomplishments that we're proud of

  1. Multimedia Tools: We are proud that you can record audio and video directly in the browser on both phones and computers.
  2. The Streak System: We built a "Gamification" engine. It tracks how many days in a row you add a memory and gives you "Badge" pop-ups and confetti when you hit goals.
  3. Collaborative Storytelling: Our app lets friends or family add their own account of the same event to your memory. This turns one memory into a shared story from many different points of view.

What we learned

We learned that you can build a very powerful app using just the tools already inside a web browser. We mastered State Management (keeping track of all your data as you click around) and learned how to make a complex website look perfect on both a tiny phone and a giant computer screen.

What's next for Many Stories – A Digital Life Scrapbook

Our next steps are to move the data to a real cloud database so you can see your memories on any device. We also want eventually add a button that lets you order a real, physical book of your digital timeline.

This project is submitted under the Software Development & Engineering theme as it focuses on building a scalable, multimedia-rich web platform using modern frontend architecture and browser APIs.

Built With

Share this project:

Updates