Skip to content
Guess Me!

Guess Me!

A two-player Persian word-guessing game — one player sets a secret word, the next guesses it letter by letter on an on-screen Persian keyboard before the chances run out.

Year: 2022Role: Designer & Developer
ReactTypeScriptViteTailwind CSSFramer MotionLucidePWA

Overview

Guess Me is a two-player word-guessing game I built from scratch with React and TypeScript. One player picks a category and writes a secret word, then hands the phone to a second player to guess it letter by letter on an on-screen Persian keyboard — before the chances run out. The whole thing is mobile-first and right-to-left, with a glassy look over a gradient background.

Setting up a round

Starting a round is simple: pick one of ten categories — city, country, animal, fruit, actor, movie, and a few more — and type the secret word. The letter count ticks up live as you type, and the field only accepts Persian letters; anything else is caught with a short message.

Playing the round

Now the guessing begins. The hidden word shows up as empty boxes, and the player tries letters on the Persian keyboard pinned to the bottom. Each correct letter turns green and drops into place; each wrong one turns red and costs a chance. Score and remaining chances stay in view up top, and short sound effects add to the feel.

Winning & losing

Find every letter and you get a trophy with your final score; run out of chances and the right word is revealed so you can see what you missed. From there you can start another round or share your score with friends.

Guide & small touches

There's a short “how to play” guide and an “about” sheet so newcomers get going fast. Sharing your score uses the browser's Web Share API and quietly falls back to copying to the clipboard on devices that don't support it. The game is also installable as a PWA.

Under the hood

  • React + TypeScript UI, bundled with Vite
  • Game logic on a useReducer state machine (four phases: setup, playing, won, lost)
  • Styling with Tailwind CSS and full right-to-left support
  • Animations and screen transitions with Framer Motion, icons from Lucide
  • Sound effects synthesized with the Web Audio API — no audio files
  • Sharing via the Web Share API, installable as a PWA