The 15-puzzle is trivial to describe and surprisingly fiddly to implement.
The board is a flat array of sixteen slots rather than a grid, so "is this tile next to the gap?" is arithmetic, not geometry — and the naive version happily lets a tile on the right-hand edge slide around to the left edge of the row below. Handling those row boundaries correctly is most of the actual work; the rest is bookkeeping.
React state carries a shuffled array from mount, a move counter, and a solved-check that runs after every slide and swaps in a congratulations screen once the tiles land in order with the gap at the end. New Game reshuffles and zeroes the counter.
Built with Create React App and CSS Modules, deliberately without a state library. Sixteen numbers and a counter do not need one, and reaching for one anyway is how small projects acquire dependencies they never shed.
Classic sliding-tile puzzle — slide numbered tiles on a 4×4 board until they're ordered 1 → 15.
🚀 Try it live →#
The board starts shuffled with one empty slot. Click any tile adjacent to the empty slot to slide it in — solve the puzzle by arranging the tiles in order with the gap at the end.
✨ Features#
- Click-to-slide tiles — only tiles next to the empty slot move (with row-edge awareness so tiles don't wrap)
- Shuffled start — the board randomizes on every new game
- Move counter — tracks how many slides you've made
- Win detection — pops a "Congratulations!" screen when the board is solved
- New Game / Reset — reshuffle and zero the counter at any time
- Play Again — restart instantly after winning
🛠️ Tech Stack#
- Framework — React 18 (Create React App)
- Language — JavaScript
- Styling — CSS Modules
🙌 Credits#
Built by Mohamed Gado.