Questle

Guess the hidden word within a limited number of tries — each guess reveals which letters are correct, present, or absent from the answer.

Features

• Classic Wordle gameplay — guess a hidden word within 6 tries, with tile-by-tile feedback (correct / present / incorrect)
• On-screen keyboard that updates letter colors after each guess to reflect what's been learned
• Configurable word length (4–6 letters) via game config
• Game result modal summarizing the outcome at the end of a round, with a share action
• Toast notifications for invalid guesses, wins, and losses
• Responsive layout that adapts to mobile viewport height

Tech Stack

• UI/UX Design: Figma
• Frontend: React 19 + TypeScript, built with Vite via vite-plus
• Styling: Tailwind CSS v4, shadcn/ui on top of Radix UI primitives
• State management: Zustand
• Notifications: sonner
• Testing: Vitest + React Testing Library (jsdom)
• Package manager: pnpm
• Hosting: Netlify

Project Structure

src/
├── components/
│   ├── GameBoard/        # Board, Row, Tile — renders the guess grid
│   ├── Keyboard/         # On-screen keyboard
│   ├── GameResultsModal/ # End-of-game stats dialog
│   ├── Layout/           # Navbar, Footer, page shell
│   └── ui/               # shadcn-generated primitives (Button, Dialog, Toast)
├── pages/                # Landing / Playing / Finished — one per game phase
├── store/                # gameStore.ts — single Zustand store (phase, board, answer, guesses)
├── lib/                  # Pure, unit-testable game logic (gameLogic, createEmptyBoard, getRandomAnswer, tailwindUtils)
├── data/                 # constants.ts, word lists (wordles.json / nonwordles.json)
├── types/                # Shared TS types (board, game, keyboard)
├── hooks/                # useViewportHeight, etc.
└── test/                 # Vitest specs + jsdom setup

Live Demo

🔗 questle.netlify.app

Requirements

• Node.js 24.12.0 (see .nvmrc)
• pnpm 11.9.0

Getting Started

1. Clone the repository

   git clone https://github.com/chingu-voyages/V61-tier2-team-21.git
   cd V61-tier2-team-21

2. Install dependencies

   pnpm install

3. Start the dev server

   pnpm dev

4. Other useful scripts

   pnpm build    # type-check and build for production
   pnpm test     # run the Vitest suite
   pnpm lint     # lint the codebase

Our Team

Product Owner

• Ademola Kujore: GitHub / LinkedIn

📚 UI/UX Designer

• Tu Huynh: GitHub / LinkedIn

🔧 Web Developers

• Danim Kim (Tina) GitHub / LinkedIn
• William East GitHub / LinkedIn
• Derek Barus GitHub / LinkedIn

License

This project is licensed under the MIT License.