I have my sister to thank for this one. She passed down a love of Kevin Bacon that goes beyond the movies; we’re talking his band, Bacon Brothers, which she loved enough that I grew up hearing them too. I’ve managed to see him perform a handful of times over the years, including once in Manhattan the week leading up to the Super Bowl when New York City hosted. My very pregnant sister and I stood outside in literal six-degree weather listening to his band play. So yes, when I was looking for a weekend React project, Six Degrees felt obvious.

The rules: connect any actor to Kevin Bacon through shared movie appearances in six steps or fewer. My constraint: no backend. Just React, Vite, Tailwind, and the free tier of the TMDB API.

The first version wasn’t fun

My initial approach was to pick random actors as starting points. This seemed clever until I realized: random actors from TMDB’s database are mostly people you’ve never heard of. You’d start with some character actor from a 2003 Bulgarian film and immediately lose interest.

The fix was to curate a list of 30 recognizable actors instead. Better UX; but also better performance. Famous actors have appeared in more mainstream movies, which means shorter paths to Kevin Bacon, which means fewer API calls. The same decision that made the game fun also made it fast. I later added custom actor search for players who had someone specific in mind, which turned out to be an easy addition once the core was working.

Bidirectional BFS: the interesting part

Finding the shortest path between two actors without a backend or unlimited API calls required some thought. A naive BFS explodes quickly; actors can share casts with hundreds of others, who each share casts with hundreds more. You hit O(b^d) territory fast.

Bidirectional BFS cuts that to O(b^(d/2)) by searching from both ends simultaneously and meeting in the middle. Instead of exploring a million nodes, you’re exploring roughly two thousand. That’s the difference between “this works” and “this melts the free tier.”

The six-degree cap also does real work here beyond just being true to the original concept. On the player side, if you haven’t found Kevin Bacon in six guesses, you lose. On the algorithm side, capping the search at six degrees means we never spiral into an infinite search if an actor turns out to be genuinely disconnected from the Bacon universe; which was exactly the problem with those obscure random actors in the first version.

Caching helps both the app and the player

Caching turned out to matter more than I expected as a session progressed. Once you’ve fetched an actor’s filmography or a movie’s cast, there’s no reason to fetch it again; so I used sessionStorage to hold onto those results. By the time a player is a few degrees in, a meaningful chunk of the graph is already warm in cache, and the searches get noticeably snappier. The same is true of the player: the more you play, the better your mental model of the Bacon universe gets. You start to notice the connectors; the movies that seem to link everyone, the actors who show up everywhere. The app gets faster; so do you.

Deployment was genuinely easy

Since there’s no backend, deployment was straightforward: push to GitHub, connect to Netlify, done. No servers to configure, no environment to manage beyond the TMDB API key. For a pure frontend project this is the right call; it also keeps it free to host indefinitely.

The live version is at sixdegreesofkevinbacon.netlify.app. Have fun playing!