I Built a Puzzle Game to make Graph Coloring Easier to Understand

I recently built 3Color Simulator, a browser-based puzzle game based on the graph 3-coloring problem.

The idea is simple: players are given a graph and have to color every vertex using only three colors. The challenge is that no two connected vertices can share the same color.

You can try it here: https://3color.vercel.app/

Why I built it

I’m a Computer Science student, and I’ve always been interested in algorithms, graph theory, and problems like P vs NP.

Graph coloring is one of those topics that can feel abstract when you first learn it. You might see a diagram in a textbook, but it is not always obvious why the problem is interesting or why it becomes difficult as graphs get more complex.

So I wanted to turn the concept into something people could actually play.

Instead of only reading about 3-coloring, players can click through the problem, make mistakes, see conflicts, and gradually understand the rule visually.

What the app does

The current version includes:

Level-based graph coloring puzzles
Locked progression through levels
Conflict detection when connected vertices share a color
Move tracking
Timer tracking
A custom graph mode for generating new puzzles
Mobile-friendly gameplay
Clearer instructions for non-CS players

One thing I learned after sharing the first version is that not everyone immediately knows what “3-coloring a graph” means, even if they understand the rules once they start playing.

That pushed me to improve the instructions and make the game feel less like a CS assignment and more like a puzzle.

Tech stack

I built the project with:

React
Vite
JavaScript
CSS
localStorage
Vercel for deployment

The core logic is based on graph data structures. Each level stores vertices and edges, and the app checks whether any connected vertices have the same color.

What I learned

This project taught me a lot about turning a computer science concept into an interactive experience.

The technical side was important, but the bigger lesson was UX.

A feature can work correctly and still confuse users. After people tried the site, I realized I needed to make the goal, rules, and completion state much more obvious.

I also learned how much small details matter in a game-like project: mobile layout, button placement, level flow, feedback messages, and whether players know they succeeded.

What I want to add next

Some future ideas I’m considering:

More levels
Daily puzzles
A level editor where players can create their own graphs
Shareable puzzle results
Better completion animations
More advanced graph generation

Eventually, I’d like users to be able to create and submit their own 3-colorable puzzles, but only after they solve them first. That way, every submitted puzzle has a valid solution.