1st place prize at the FreeCodeCamp/Netlify 2018 Hackathon at GitHub
WITWorld.live | Medium Post | How to play
See our team interview & full demo here.
Grand prize winning submission at the freeCodeCamp/Netlify JAMstack Hackathon 2018 by team Where In The World (Jeff Appareti, Tyler Vick, Gabe Greenfield, and Tadas Antanavicius).
We've made changes to the project since the hackathon. View the original submission on the original-hackathon-submission
branch.
Read more about the weekend where we hacked this project together on Medium.
Where in the World is a real-time game show application built on the JAMstack. Its mission is two-pronged:
- Show off the power of JAMstack
- Show off the world
We think we hit goal #1: who knew a hacked-together static site could play host to a massive, real-time interactive game?
Goal #2 is within sight, but more work needs to be done.
Are you interested in seeing this app go somewhere? Let us know by Watching and Starring this repository.
With the infrastructure we have set up, there can only be one game (hence the live, real-time Trivia HQ-like experience) going on at a time.
If you visit witworld.live, you'll see one of the following screens:
- "Please wait while we prepare you a game..." - You're in the player lobby, waiting for a game
- "Where in the world is this photo" - You're in the middle of a game - act quickly!
- "Game results" - The prior game has ended, and you're viewing the results
Start by initiating the player lobby if it is not yet initiated. To do so:
- If it's in the middle of a game, let it finish (games are only 30 seconds long)
- If you see the results screen, click this Finish Game endpoint to initiate the next game's lobby
Next, we need to kick off a game. Keep in mind, if you happen to be doing this process at the same time as someone else, you'll be in the same game -- the more, the merrier! To get started:
- Scroll down to the admin panel section
- Choose one of the games to play (each game is associated with a particular image)
- There's more than 4; consider choosing a random one!
Then it's gametime!
Lastly, don't forget to click Finish Game when you're done.
In a simplified nutshell, here's the flow of the game:
- Clicking "Finish Game" invokes a Netlify Function that calls on our Hasura instance (hosted on Heroku) to move all the ongoing games (should be at most 1) in our database to "finished" state.
- Clicking one of the "Start Game" links in the admin panel kicks off a Netlify Function that also calls on Hasura: move ongoing games to "finished" state + set a new game to "live" state
- At this point, there's a live game. The client-side React code is connected to our Hasura instance via GraphQL subscriptions, and the logic is such that this shift to a "live" game will automatically throw all the clients into this "live" game
- The # of live players in the top left of the UI also uses a subscription to stay updated. Our code assumes any player who has initially loaded the app in the past 5 minutes to be "live".
- Each player's guess input is sent to a Netlify Function, which transforms it into a score, and pushes it back out to Hasura
- The results page is built on yet another subscription, and paints the guesses as they come in
The code in this repository is hackathon code! It works, but please please do not reference it when writing real production code. Best practices were not observed, and even the code indentation is at times entirely sloppy.
The performance bottleneck on the app is likely the number of GraphQL subscriptions that the Heroku free tier can support. Each player has to maintain that websocket connection for the game to appear "live" for everyone. We suspect we would run into issues at somewhere between 100-200 players - and we don't think the code would fail gracefully.
Use these links to manage the game:
The team was thrilled with how much everyone loved the game and the level of interest in the details of how we made it work. We're hoping to do a little bit of work on it as an open source side project to make it live on.
As noted above -- If you're interested in seeing this app go somewhere, let us know by Watching and Starring this repository.
To run the React app locally:
cd app && npm start