Word Length:

Turn: 1 / 5

react

typescript

tailwind

Overview

Wurdle is a custom-built word guessing game inspired by Wordle, developed using React, TypeScript, and Tailwind CSS. Players attempt to guess a randomly generated word within five turns. Each guess is validated letter by letter, with real-time feedback through dynamic coloring and animations that highlight correct and misplaced letters. The app demonstrates clean state management, responsive UI, and interactive keyboard input (both on-screen and via physical keyboard).


Key Features

  • Implements the random-words library to generate a new random word at the beginning of each game with a variable length selected by the user.
  • Fully supports physical keyboard entry and an on-screen clickable keyboard.
  • Tracks turns, validates guesses, and provides clear win/lose states.
  • Displays a modal overlay at the end of the game with the correct word and a "Replay" button that instantly resets theboard, keyboard and word without refreshing the page.
  • Built with Tailwind CSS for a modern, adaptive interface across devices.

This project not only sharpened my technical skills in React, TypeScript, and Tailwind CSS, but also reinforced the importance of balancing logic with user experience. By iterating through challenges like controlled inputs, state resets, and responsive layout constraints, I built a deeper understanding of how to create applications that feel both intuitive and engaging. Wurdle stands as a showcase of my ability to transform a simple concept into a polished, interactive product that highlights both design sensibility and technical execution.