Making Connect the Stars

In October 2020, Amanda and I released Connect the Stars. This is the story of how it came together!

Inspiration

Like any good passion project, the inspiration for Connect the Stars is a unique mix of personal experiences. The first inspiration is a trivia game I played way back in 2015 at the Google office in Kitchener. I was a university student attending the Google Games, an annual recruiting event where Google invites students to compete in various puzzles and games.

One round in particular was my favourite — a trivia game that starts with an empty web-page with a few categories, like Disney characters. Your goal is to fill in these categories with examples, like Mickey, Minnie, Goofy… But when you enter in Pluto, you unlock a new category: the Solar System. So now you have a new category to start filling out: Mercury, Venus, and so on. This category can then unlock more categories like Roman Gods. Repeat this process enough, and soon the webpage is a huge, populated graph.

I absolutely killed it at this particular game, and our team went on to win the entire event. It was one of my favourite student experiences. I loved that trivia game — the way your answers unlock more questions, and the way you feel like you’re building something by filling in all that empty space. I never learned the name of the game, and never found more games like that online. I concluded that I would have to build this game myself. The ideal version of this game would have some way to generate endless instances of it, rather than one fixed puzzle. But how?

The Google Games 2015 champions! The theme was Space, so we called ourselves the KickAstronauts!

This question stayed in the back of my mind until late 2019, when Parasite by Bong Joon-ho became a worldwide phenomenon. I had always loved movies, but the line-up in 2019 made me really lean into it. Films like Parasite, Portrait of a Lady on Fire, and Marriage Story got me addicted to using Letterboxd to journal the movies I watch. In Letterboxd, you can quickly go from a movie to one of its actors, and then from that actor to another one of their movies — and after binging movies almost constantly throughout the pandemic, this mental web of movies and actors started culminating in my brain. When I recalled the Google trivia game from 2015, there was a clear idea here. I could play it endlessly, using movies and actors as the questions and answers! The way this idea combined my love for web dev, movies, and trivia games was too good to pass up.

Getting the Right Tools

I had the idea in 2019, but didn’t really know how to make it into reality. I’m an experienced React developer, but otherwise I didn’t have the proper knowledge of what technologies to use.

In March 2020, I found out that Letterboxd uses a free API called The Movie Database for all their movie data. The API provides everything you would need to make a movie app, and to this day I am astounded that it is free.

In July, after getting more settled into the quarantine lifestyle, I made a small web app called MOON DAYS. This little weekend project introduced me to the Ant Design Framework, an open-source component library that does a lot of the heavy lifting to make polished components for common UI patterns. This was an important tool to learn to avoid needing to build the UI from scratch. Moon Days also gave me experience with hosting single-page web apps on Github.

The last major tool I needed was a graph visualization framework. I found that cytoscape.js was the most popular one, so I started learning it. Cytoscape provides highly customizable visualizations and animations, allowing me to make the actor and movie graph look exactly how I like. It also provides APIs to query the shortest path between two nodes, letting me detect when the player wins the game, or improves from their previous shortest path. I could start making my game!

Early Product and Development

The core gameplay (a lobby to choose 2 actors, and then a game screen where you input text to populate the graph visualization) was all built in just one day. Here’s what the game looked like:

The prototype name was Six Degrees, after the Six Degrees of Kevin Bacon. There were no animations for adding a new movie or actor, so it looked really janky. The game didn’t tell you when you won. Choosing an actor in the lobby had no autocomplete, you just typed and pressed Submit and got whatever the top result was. And I was using all of the default UI stylings from the Ant Design Framework. It was cool to have a working game on day 1 — I had a blast finally being able to play it — but there was a lot more refinement needed.

On the second day of development, I started working on formatting the game layout more. I had to decide what the visual identity was, and I also had to come up with a name. Here’s a chat where I brainstormed names:

Looking back, the other names were pretty awful!

I knew I didn’t have the design chops to make a particularly beautiful UI, but I thought I could have fun with it by making the game look retro and edgy — a purposefully ugly in a vaporwave aesthetic. The result was an eyesore.

This took a few iterations of toning things down, so it was even uglier before this. I was hopeless when it came to styling this game in a way that would make people want to play. Here’s what the lobby looked like:

Adding the moving constellation background was a good idea, but obviously there was still a lot to be desired.

Notice in the lobby screenshot that I added the most important quality-of-life feature: the “Choose For Me” button. From play-testing with close friends, I found that no one wants to choose the actors themselves. Choose For Me provides a random actor from a curated list of over 100 well-known names. While you stay on the website, it will remember which ones you’ve already seen and make sure not to repeat any. From seeing everyone play the game, this feature is practically always used.

Amanda, Designer of Connect the Stars

My most fateful play-testing session was with my friend David. David wasn’t particularly good at movie trivia, so they’d often ask their partner Amanda for help. Amanda, who happens to be a professional designer, turned out to be a natural at the game.

I thought about how much Amanda “got” the game right away and understood its appeal. In mid-August, while I was on a trip with my family, I asked her to help me redesign the game. I wanted to work on Connect the Stars as soon as I was back from my trip, and figured that, if she said yes, she would need to find some free time and take a while to put things together. To my surprise, she put together some mocks the same evening that I asked her for help! I had spotty internet during all this, so it was only after I got back home that I looked at the designs and loved them right away.

The rest of the development of Connect the Stars was on-and-off over the course of almost two months, during which Amanda and I would bounce ideas off each other and polish the design over and over again. Amanda crafted the website’s appearance to have a refined, awards-ceremony vibe. The colours are now way better, there’s now so much more iconography, and everything looks classy. An aesthetic totally opposite of what I had envisioned, but vastly superior.

Amanda also made the logo. We went through a lot of options, as pictured here:

The top-left was the original icon I had made for the vaporwave aesthetic, and the rest were options that Amanda proposed. I really wanted us to convey both the words “connect” and “stars”, so we went with the one that was basically the combination of the star ⭐️ and link 🔗 emojis. We made both stars gold to look good on light and dark themes.

Amanda also made the gorgeous OG image (the big image attached when you share the link on Facebook) as well as the amazing promo images in our ProductHunt post.

More Quality-of-Life Refinements

Connect the Stars tries to make the game purely about movie trivia, and so there were some features to help get rid of frustrating scenarios:

• The previously mentioned “Choose For Me” button, so that the user doesn’t have to come up with who to start the game with.
• Spelling suggestions: If your guess closely matches one of the movies or stars that can be connected to your board, we show a little pop-up telling you what we think you meant, and you can then add it to your board. This is done using fuzzy string searching. We also don’t care about the word “the”, accent marks, punctuation, and so on.
• Recognizing alternate titles: People might know the movie Harley Quinn movie Birds of Prey, but no one knows its actual title, Birds of Prey (and the Fantabulous Emancipation of One Harley Quinn). When a title has a colon, dash, or bracket in it, we look up alternate names and accept those.
• The compass button: We let you pan and zoom around the screen, but then you might lose your graph! The compass button lets you find your graph again.
• In order to look nice, the graph visualization needed to be configured to use up as much space as possible before needing to be zoomed out. By default, the graph tended to grow taller rather than wider, even though most people have wider screens. I had to find a graph layout algorithm that let me customize the “gravity”. I use the width and height of the screen to compute an optimal gravity; wider screens have a stronger horizontal gravity, and taller screens have a stronger vertical gravity.

The Let’s Play Video

Amanda and I were just about ready to share the game with others, but we recognized that playing the game was asking for a lot of people’s time, and reaching a point where you “get” the game might never happen. For those people, we thought we could still share the game with them in the form a Let’s Play video. Amanda used OBS, the software that Twitch streamers use, to set up a recording of her game and our Zoom call, and we would play a bunch of games to show how the game works. It was fun to make, despite frustrating technical issues, and Amanda did a great job of putting together the video!

My favourite part of the video is the easter egg at the end: I added a surprise in the game and I’m so glad we recorded Amanda’s reaction to it.

Gaining Users

On release day, Amanda and I shared the game to our personal social networks and to Product Hunt. We got tons of lovely feedback from friends and strangers — it was a great day.

Besides release day, there were a few other moments when Connect the Stars saw larger audiences:

• ProductHunt tweeted about the game. This tweet caused a lot of attention on Twitter, and tons of celebrity stan accounts played the game.
• Some German forum really enjoyed the game, and caused a surprising amount of traffic.
• John August, the screenwriter who wrote movies such as Charlie’s Angels, Big Fish, Charlie and the Chocolate Factory, and Corpse Bride, shared a recommendation to Connect the Stars in his newsletter. It was very exciting to see folks in the industry enjoy the game!
• The most viral Connect the Stars ever got, by far, was when I posted it to the Letterboxd subreddit. It felt great that the Letterboxd community, who inspired the game in the first place, also enjoyed it the most.
• Girls Play, a Twitch stream with 71K followers, played Connect the Stars one day (skip to 55:25). They ended up playing for almost 2 hours!
• There was also some viral moment that happened in Argentina, but I have never been able to find the exact place where it started. It was the second-largest spike of users ever!

What’s Next?

I still work on the website on-and-off whenever inspiration strikes. I recently added a new options menu to change the pool of “Choose For Me” actors. I wanted to make the game better for niche communities who want to play with more obscure actors, Bollywood actors, or actors from before the 1970s.

I don’t have a clear end-goal from this project, I just enjoy making something that I personally find fun. I hope the story of Connect the Stars inspires other software developers to pursue creative projects for the joy of it, too. Creating apps and websites for the communities you love (in this case, the film community) helps keep the internet full of serendipitous fun.