Story Builder

Inspiration

In a world where screens and the passive consumption of content have become the norm, we sought to make a game that was fun while also allowing friends to work together and exercise their creative muscles to build stories together. We hoped to blend our passion for games and software development with our love of reading.

What it does

Story Builder empowers youth and teenagers to become 'Authors' of their own stories and inspire a lifelong love for reading. Writers explore a gamified world of storytelling, collaborating with others to craft engaging narratives. Authors join an online room where the game code is the "Title" of their story, and they take turns putting a single word or sentence to the story. At any point, any author can end the adventure, moving on to the next phase.

An API call to OpenAi is made to summarize the written story and engineer the prompt to interface well with the Metaphor API, whose AI model reads the summary and returns links to books that align with the creative journey.

In simpler words, what Story Building does is to inspire a love of storytelling and imagination among people who play it 📚.

How we built it

We used React, Bootstrap, and CSS were used to develop the frontend, along with Node.js, Socket.io, and Puppeteer to implement the backend. We utilize the LLM provided by OpenAI's API for the story summarization and leveraged Metaphor API to provide book recommendations and their websites, as scraped from goodreads.com.

Challenges we ran into

• Designing the platform to give a smooth user interaction
• Web scraping the Goodreads website (we had to use a package called Puppeteer in order to wait for javascript scripts to finish dynamically rendering before we could access the raw webpage html)
• Integrating frontend ~ backend
• Discovering the best use of Metaphor's capabilities in our project (we explored a TON of different applications before we settled on this one because we felt it best leveraged the creative advantage of the API as compared to more generic search models)

Accomplishments that we're proud of

We are proud of the number of features and technologies we could implement given our limited crew, in addition to the new skills that uniquely aggregate us despite our different hackathon familiarity. We learned a ton of new technologies. We were a team of 2, one of whom is a beginner, so it was a great learning experience :)

What we learned

On top of the technical knowledge of software development, we felt the importance of collaboration and organization, both of which are essential for delivering successful projects and fostering a productive work environment.

What's next for Story Builder

• Story Archives: Create an archive where players can revisit and edit their completed stories. We were thinking of implementing this using USBs.
• AI Image Summary: Given the summary used in Metaphor to return the books, we can also use it as a prompt into a text-to-image model, illustrating the story.
• AI-driven Story Guidance: Utilize AI algorithms to provide subtle hints or suggestions to guide the story when players encounter creative blocks.
• E-commerce referral links: Instead of listing books' websites, we can connect referral links like Amazon's to generate revenue for each time an Author buys a book from our list, creating a business model.

Built With

• axios
• bootstrap
• cheerio
• express.js
• metaphor-node
• node.js
• openai
• puppeteer
• react
• socket.io