Storyhaven

Sign In Page
Main screen
Loading screen
Avatar Customization
Movie Reviewing
Display shelf
Shelf Decoration
Media Logged
Saved Movie log
Community Forums
Forum Example
Friends Chat
Friends Page
Daily Story

Inspiration

There was once a wizard and a king in a magical far away land called Vernonland. The king, King Vernon, had a spirited young daughter who adored the bedtime stories the king would read to her every night. However, on one particularly savage night, a monster of the night kidnapped the daughter and took her away, never to be seen again. King Vernon, devastated in his irreconcilable grief, called on his loyal army to ban stories across the nation in remembrance of his daughter. In the span of a couple weeks, the vibrant nation transformed into a soulless nightmare of dark and destitute fortunes. Without dreams, the people had no hope.

That's when the Wizard, an old graying man, travelled 5000 miles to plead with the king and ask him to bring back light to the land, but the king would not listen. So the wizard, hopeless and desperate, used all his magical skills and drafted a story. Not a majestic or magnificent story, but a story close to the king's heart. A story about a father in the far reaches of his kingdom who could no longer tell bedtime stories to his daughter because of the king's decree. The king, thoroughly moved, ruled that stories must once again flourish in Vernonland, and that a great library of incommensurable size would be built for people all across the kingdom to read and celebrate stories.

That library is Storyhaven.

Storyhaven was built as a response to a decline in reading for pleasure; from 2003 to 2023, the percent of people in America who read daily for pleasure dropped by more than 40% according to a UCL and University of Florida study. That is why we created Storyhaven, an app for lovers of story to communicate, discuss, and learn from each other. Storyhaven is meant to inspire people to read while also cultivating a warm community. We hope you love what we've created!

What it does

Storyhaven is a multi-feature social media platform for books, movies, and music. With Storyhaven, you can:

Discuss your favorite media in the forum with other people who have similar interests.
Rate different books, music, and movies.
Catalog the media you want to explore, are currently enjoying, or have already experienced.
Meet new friends with the weekly friend matching system!
See what your friends are reading, watching, or listening to.
Discover new stories on the daily story page.
Decorate your bookshelf with cute items! They're obtained by completing achievements, such as logging a media entry or making a friend.
Customize your user-specific avatar, including hair, eyes, mouth, accessories, and more.
Talk to your friends in DMs and group chats.
Meet your community of readers, cinephiles, and music listeners. Storyhaven is meant to foster discussion and love!

On top of all that, Storyhaven provides a cute pixel UI designed to make the app comfy!

How we built it

We used a robust tech stack that allows the Storyhaven app best serve its users. Here is an overview of our stack:

Frontend

Phaser.js for the core game mechanics and the lobby. Allows users to move through the app and creates a dynamic and unique menu.
Next.js for the overall application and hosts the Phaser app within it. Is also used for the variety of unique features including the friends page, the forums page, the daily story page, and the library.
Auth0 for the frontend side of authentication. Allows users to have their own accounts.

Backend/Database

Next.js. We used an integrated frontend and backend with Next.js to create a seamless application.
Supabase/PostgreSQL. We used Supabase for a variety of features including profiles, rewards, forum page, chat page, and the overall functionality.
Gemini was used to generate demo users, posts, and comments.

Deployment

GoDaddy registrar to use the domain name storyhaven.ink.
Vercel for hosting the frontend app.

We also used Resprite for our pixel art!

Challenges we ran into

UI Alignment

Because of our ambitious design for a UI that is comfy and homely, we ran into many alignment difficulties. It was difficult to integrate a versatile UI that was also functional, but in the end we were proud of how it came out! Sophie, our group artist, systematically worked through the web page and meticulously curated the pixel art and how the pixel art actually shows up in the application to create a page that is simultaneously cute and streamlined.

Forum Page

The forum page was a particularly difficult challenge. We need to find a way to use forums to cultivate discussion and welcome interaction. In addition, the forum itself was probably our hardest engineering task as it required a complex database schema and a well thought out frontend interface. In the end, we created an interface that allows users to discuss in a general page, by book, movie, or album, and a discussion page for the daily short story. This way, we create a space for people to talk about specific niche interests as well as general interests. For the database, we created a robust system that allows for filtering through profiles, books, and time posted to create a well organized frontend. We decided to use a relational database for its powerful SQL query abilities.

Friends Page

The friends page was similar to the forum page; it was also a particularly difficult logistical hurdle. In order to make sure that the friends page allowed for seamless user interaction, we decided to include a variety of important features. Firstly, we created the ability to talk in both group chats and individual chats. This would allow users to create their own book clubs! In addition, we also implemented a matching algorithm that matches you with people who have similar interests. This allows users to find new people on the platform if they don't know people already.

Accomplishments we're proud of

The UI

All of our group art was carefully hand drawn by our group's artist, Sophie. We are incredibly proud of the way we integrated a powerful application with beautiful handmade art that really brings the application alive. We believed that curating the art would give it a very human feel! Zero AI art was used in this project!

The Menu

Our main landing page is unlike a traditional landing page. Rather than have users click buttons to access features, we created a 2D game interface where users to move around in their own customizable avatar! This ended up becoming a beautiful interface that feels more like an experience.

Weekly Friend Matching System

Inspired by Yak Match, our friend matching system calculates internal similarity scores from their user catalogs, and pairs users based on their similarity. Then, at a predetermined time, everyone gets their new match revealed, a new friend they can discuss their favorite media with!

Custom Avatars

Users can create their own avatar for their profile. They can change the avatar's eyes, hair, accessories, clothes, and more! We wanted to give a personal feel to the entire application, and we believe the custom avatars was super important for allowing users to feel at home.

What we learned

That UI design was a much more time consuming process than anticipated, and a substantial amount of time had to be dedicated to planning out a good design, and how all our elements would connect, in order to create our ideal project. We also learned a lot about maintaining a clean and organized backend, in order to properly integrate the two halves of our project.

What's next for Storyhaven

We plan to implement several new features that will make Storyhaven even better! Firstly, we wanted to make the matching features more robust by implementing a vector-based system to match users more effectively, rather than relying on the current similarity scores. Additionally, we'd love to add a short form video option, allowing people to create verbal discussions for the media they are consuming!