DEV Community

lyyluca
lyyluca

Posted on • Originally published at puzzletoolbox.com

How I built a fast, client-side puzzle solver suite using Next.js and Web Workers

This ensures that animations, inputs, and layout renders remain buttery smooth while the background thread crunches millions of permutations.

Algorithmic Optimizations: Bitwise Operations & Tries

To keep execution times under 100ms, raw JavaScript array manipulations weren't going to cut it. I had to optimize the algorithmic data structures:

  • Block Blast Solver: Instead of using 2D arrays to represent the board state, I utilized bitwise representations (integers as bitboards). Checking if a block fits or clearing a completed row becomes a lightning-fast bitwise AND (&) and OR (|) operation.
  • Nonograms: I implemented a constraint satisfaction solver that applies line-solving heuristics (like intersections and spacing checks) to pre-fill cells before falling back to depth-first search (DFS). This reduces the search space exponentially.
  • Word Search: I built a lightweight Trie (prefix tree) structure. When scanning the grid in 8 directions, we can discard paths instantly if the current character sequence isn’t a valid prefix in the dictionary.

The Cost of Scale: $0 Hosting

By pushing 100% of the computation to the client's CPU, the hosting overhead is practically non-existent. The static Next.js export is served globally via a CDN, meaning fast load times worldwide without paying for expensive server compute cycles.

Check out the live tool at https://puzzletoolbox.com and let me know your thoughts! I'm happy to chat about the algorithms or Web Worker state synchronization in the comments below.

Top comments (0)