Back to Projects

About "Not-Wordle"

Overview

Not-Wordle is a word guessing game built with Next.js and TypeScript. The game challenges players to guess a 5-letter word within 6 attempts, providing visual feedback through a color-coded system similar to the popular Wordle game, but with a unique terminal aesthetic to simulate it's original implementation as a command line game written in Python. View the original Python script on my GitHub.

Key Features

Game Mechanics

  • Players have 6 attempts to guess a 5-letter word
  • Each guess provides feedback through color-coded letters in classic Wordle style:
    • Cyan: Letter is correct and in the right position
    • Orange: Letter is in the word but in the wrong position
    • Gray: Letter is not in the word
  • Game ends when the player either:
    • Correctly guesses the word (win)
    • Uses all 5 attempts without guessing correctly (loss)

Game Flow

  1. Game initializes with a welcome message
  2. Player enters a 5-letter word guess
  3. System validates the guess and provides feedback
  4. Colors update to show correct/incorrect letters
  5. Process repeats until game ends
  6. Final screen shows game outcome and the correct word
  7. Player can restart the game at any time (for the Wordle faithful, read "cheating is allowed")

User Interface

  • Terminal-inspired design with a dark theme
  • Clear visual feedback for each guess
  • Guess history displayed in a scrollable terminal window
  • Input field with command prompt ($) styling
  • Responsive layout that works well on different screen sizes

Technical Implementation

  • Built with Next.js and TypeScript
  • Client-side state management using React hooks
  • Server-side game logic in TypeScript
  • UUID-based game session management
  • Focus management for improved user experience (cursor automatically moves to the input field when game is active)
  • Automatic scrolling to keep the latest content visible

Technical Architecture

  • Frontend: Next.js with TypeScript
  • State Management: React hooks (useState, useEffect, useRef)
  • Game Logic: Server-side TypeScript
  • Styling: Tailwind CSS