What I built

I built a searchable index of online games people can play with each other (or on their own!) to feel connected while social distancing measures are in place. It can also quickly pick a game for you depending on how many people are in your online party, and anyone can suggest new games to help improve the index for others!

Category Submission:

Program for the People

App Link

https://whatshouldweplay.xyz

Screenshots

Description

This is a little website I built to showcase games you could play with friends online while on a Zoom/Meet/FaceTime/some other call together. The site breaks down games based on how many players can fit in a game and whether they're free or not. Besides searching, anyone can quickly have the website generate game suggestions for them depending on their party size! The site also features a suggestion form so that anyone can help add new games to the index. This submission is broken down into the back-end (main repository), front-end as well as an admin panel to quickly review and add in new suggestions captured on the form.

The entire project was written using Python for the backend and React in the frontend, with Auth0 managing authentication for the admin panel.

For those trying to use this data/functionality in their own applications, I've also exposed certain endpoints on the app's REST API that are documented here.

Link to Source Code

The back-end, front-end and admin panel code live in separate repositories. Each have a Deploy to DigitalOcean button to easily get them live on App Platform or a Docker Compose file to get up and running on your local machine!

• Main repository and back-end: https://github.com/mm/wswp
• Front-end: https://github.com/mm/wswp-frontend
• Admin panel: https://github.com/mm/wswp-admin

Permissive License

All repositories are released under the MIT License:

• Back-end: https://github.com/mm/wswp/blob/main/LICENSE
• Front-end: https://github.com/mm/wswp-frontend/blob/main/LICENSE
• Admin: https://github.com/mm/wswp-admin/blob/main/LICENSE

Background

Throughout the lockdown, a constant source of entertainment has been playing games with friends or co-workers. "What should we play?" ended up getting asked a lot on those calls, and I saw a lot of threads on Reddit with great games to play and news articles but no website dedicated to it, so this was a cool opportunity to try building one!

How I built it

The tech I used in this project was:

• Back-end: Python (Flask, SQLAlchemy, Marshmallow), PostgreSQL
• Front-end: React, Chakra UI
• Auth/Identity: Auth0

I love working on back-end projects and APIs, but I hadn't dabbled in front-end work too much. I really wanted to learn more about building React apps, so this was a project that allowed me to dive into React in general and learn how to use Chakra UI, an amazing component library that helped me make this whole thing a reality. Their documentation is stellar, and I have a whole new level of appreciation for how tricky UI work can be. Also, building an admin panel and submission functionality gave me an excuse to try out authentication with JWTs and Auth0 as my identity platform. Their Flask and React documentation helped me get up and running quickly.

DigitalOcean's App Platform powered this project the whole way through. I couldn't believe how intuitive it was to get my API + database set up, and then add a static site atop it with environment variables set dynamically depending on the app's base URL or database URL. I deployed the admin panel as a separate static site to not complicate the main build too much. Some things I really appreciated about App Platform:

• Easily adding a static site to a project that already has a service & database defined
• Environment variables super easy to manage
• Built-in console a huge plus for running CLI tasks on the fly (like running database migrations)
• Painless domain management and component HTTP routing

I'm hoping to use this project to write a tutorial about deploying Python/Flask + React apps to App Platform in the future!

Additional Resources/Info

• Component library powering the front-end (and the awesome dark mode): Chakra UI
• Icons courtesy of Octicons, Hero Icons, and Font Awesome via react-icons
• If you see something that could be improved on the site, please let me know or open up an issue on GitHub! I had so much fun developing this and would love to build it into something the community could get use out of.