Hexart | Devpost

Inspiration

At first, I simply wanted to create a unique puzzle — something more challenging than just rebuilding a classic puzzle from Reddit. I envisioned a puzzle that feels intuitive, fun, and simple, yet still offers a satisfying challenge.

My idea was to build a hexagonal puzzle using different colors. Each hexagon needs to be placed in the correct position by comparing the colors of the surrounding hexagons.

I also wanted the puzzle to have an engaging theme. Inspired by Reddit’s focus on daily challenges and user-generated content, I thought it would be great to let users upload images and generate color palettes from them. This way, each puzzle would have a personal and unique touch.

What It Does

Gameplay

The puzzle consists of 19 hexagons in four colors. Each hexagon contains three sub-dots. Players can swap hexagons by dragging and dropping them on the board.

A hexagon is considered correctly placed when all its sub-dots match the colors of the adjacent hexagons. The goal is to arrange all hexagons into their correct positions. On average, each puzzle takes about 2–3 minutes to complete.

Level Creation

To create a new level, the player uploads an image. The system then automatically extracts the four dominant colors from the image to form the puzzle’s color palette.

How We Built It

UI: Konva, React

Backend: Express.js

Challenges We Ran Into

The drag-and-drop feature was quite performance-intensive, especially on mobile devices. I spent time optimizing the codebase to ensure a smooth and responsive experience across platforms.