Jakob Löhnertz

Senior Software Engineer & Leader

Screenshot of Spectra: a deduction puzzle with draggable items.

Spectra

A free deduction puzzle where you sort items by deducing the hidden metric.

What is it?

Spectra is a daily deduction puzzle I built that’s basically “Mastermind meets Wordle meets Data Trivia”. You get a small set of items (usually 4-9) and need to drag them into the correct order from high to low. The twist: I don’t tell you what you’re sorting by. Is it height? Population? Lifespan? Release year? You have to figure that out by trying different orderings and learning from the feedback.

Each item shows whether it’s in the correct absolute position after you submit, so you iterate on your hypothesis until you either crack it or run out of attempts.

Play it here: https://spectra.quest/

Why I built it

I’ve always been fascinated by deduction games – puzzles where you have to infer hidden information from limited feedback. I wanted something that combined the satisfying “aha!” moment of Mastermind with the shareable, daily-puzzle format of Wordle, but with a twist that required actual knowledge or reasoning rather than just vocabulary.

The challenge was making puzzles that consistently create that moment where everything clicks without feeling arbitrary. Too easy and it’s boring. Too obscure and it’s frustrating. Finding that balance took a lot of iteration.

How it works

The gameplay loop is simple:

  • Input: Drag and drop items in a vertical list (high to low)
  • Feedback: Each item shows whether it’s in the correct absolute position
  • Deduction: Use the partial information to narrow down both the metric and the correct order

The key is that you’re solving two puzzles at once: what you’re sorting by, and what the actual order is.

Tech stack

I built Spectra with modern web tech to keep it fast and responsive:

  • Next.js 16 + React 19 + TypeScript with the App Router
  • Tailwind CSS v4 for styling
  • dnd-kit for touch-friendly, accessible drag and drop (this was crucial – getting it to feel good on both mouse and touch took a lot of tuning)
  • Framer Motion for smooth, physics-y animations
  • Zustand for state management with persistence

On the backend, I’m using Next.js API routes with Redis and Postgres for things like leaderboard submission and anonymous cloud saves. The whole thing is serverless-friendly.

What I learned

Building Spectra taught me a lot about puzzle design and UX:

  • Puzzle design is hard. Creating an “aha” moment consistently without being arbitrary requires careful curation.
  • Drag-and-drop UX needs careful tuning to feel responsive on both mouse and touch. Small details matter a lot.
  • State management benefits from explicitly modeling game states (attempts, locks, feedback, win/loss) rather than trying to derive everything on the fly.

I’m still iterating on the puzzle difficulty and variety, but it’s been really satisfying to see people enjoy it!

CA