Inspiration

Community, community, community. Without a doubt, building a true, long-lasting, and organic community has been hard in this virtual environment. Many of us have turned to icebreakers, Among Us, and navigating awkward breakout rooms.

Enter StoryTeller - a web app game designed to not only bring out the fun but also the creative side of people. This way, you not only get to play with your colleagues but also get to see how they express their creativity on a fundamental and instantaneous level.

What it does

The objective of this game is to build a story with others - and quickly. In this game, players join a "virtual room" and are given a prompt. On their turn, each person has to write a sentence to continue the story within the time limit. However, turns are randomized - you're always on your toes, wondering whether you'll be next!

At the end, the entire story is shown - so everyone can laugh at the inevitable typos and wackiness of their story built off of quick thinking.

We envision this being a fun game friends could play (we often joked about how we could play this with our CS class group members - who've quickly become new friends) to mix up the typical agenda of playing Among Us, Skribbl.io, Drawphone, etc.

But we also imagine this being a great icebreaker for teams. Many of us have been working on initiatives at the University of Washington - for example, some of us have been working on creating a startup incubator program at the UW like Stanford's Cardinal Ventures - that really involve creating a strong community. We've experimented with typical icebreakers, but we also felt that, many of them, while fun, were missing a personal and creative touch. We wanted to see how people's brains worked - and bringing out their creative side by writing a communal story is a great, organic way to do so.

How we built it

We used Node.js, JavaScript, HTML, and CSS to code our web app. We hosted it through repl.it (a savior!), which is where we also coded it (although we then pushed it to GitHub for visibility)

However, we spent a lot of time brainstorming. We all resonated with the social (inter)connectivity track and wanted to create another way that we, our friends, and others could connect with people in this strange, sometimes impersonal, virtual environment.

We also all love stories - some of us dabble in poetry, others are just great storytellers - and, after some back-and-forth, decided that this idea was what we wanted to center our game around.

Challenges we ran into

None of us knew Node.js or JavaScript coming into this! So, we looked over a bunch of Youtube Videos, tutorials, and articles before trying our hand at a largely JS web app.

Also, none of us are designers - and handling anything to do with UI design was (and continued to be) a challenge throughout TreeHacks.

It was also hard to all be working on the same thing at the same time. Instead of using GitHub, we used repl.it which is a live coding IDE. Definitely advantageous in the fact that you don't waste time pushing and pulling, but difficult in the sense that it's easy to step on each other's toes (and there's no version control - eek!)

Accomplishments that we're proud of

We got our base game to work! It's not quite where want it to be in terms of design, and there's definitely some bugs to fix - but we're pretty proud that we were able to create our base functionality.

Also, the fact that we were able to code this coming in with absolutely no Node.js background - kinda amazing.

The starting screen UI also does not look half bad.

What we learned

Node.js is super unlike anything we've done but we had a great time learning it and seeing how it operates as the main "backend-like infrastructure" for JavaScript.

Overall, this was a really fun and meaningful way for all of us to experience frontend dev - some of us have realized it's not quite for us while some of us feel inspired to pursue web dev further in the future.

Also, coding small games like this is a lot more rewarding than one might think! :)

Something fun - we finally learned what "===" means in JavaScript!

We also all are learning how to best go about a Hackathon project. We wanted to start small and then go big with this project, but ended up being caught up on some little details. Regardless, we are super proud of what we made (and do think it is quite fun), so we are super stoked that we had such an awesome intro into Node.js and JS.

What's next for StoryTeller

  • Fix our timer. We had a timer that count down from 5 seconds, but broke it while trying to make our UI prettier (you win some, you lose some).
  • Add more prompts! We want to have a ton of prompts that are randomly generated.
  • Create a side chat window! We realized how much we wanted to roast each other's sentences during the game, so a chat window would be fun.
  • Prettier UI! We intended to play around with Figma to come up with a solid design but got caught up in learning JS
Share this project:

Updates