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.
Feedback welcome
I’d love feedback on two things:
- Is the concept clear if you are not already familiar with graph coloring?
- Does the game feel engaging enough to keep playing after the first few levels?
Project link: https://3color.vercel.app/