A browser-based word guessing game inspired by Wordle — but harder. You have 6 attempts to guess a secret 6-letter word. Built with React, TypeScript, Vite, Tailwind CSS, and Framer Motion.
Deployed at: https://6wordle.netlify.app/
Gameplay Screenshot: Gameplay Screenshot
- Guess the hidden 6-letter word in 6 tries
- Type your guess into the input field and hit Guess
- After each guess, the tiles will flip and change color to show how close you were:
| Color | Meaning |
|---|---|
| 🟩 Green | Letter is in the correct position |
| 🟨 Yellow | Letter is in the word but in the wrong position |
| ⬜ Grey | Letter is not in the word |
- The game ends when you guess the word correctly or run out of tries
- Hit Play Again to get a new word and start over
| Technology | Purpose |
|---|---|
| React | UI framework |
| TypeScript | Type safety |
| Vite | Build tool and dev server |
| Tailwind CSS | Utility-first styling |
| Framer Motion | Tile flip and UI animations |
Make sure you have the following installed:
- Node.js v16 or higher
- npm v7 or higher
- Clone the repository:
git clone https://github.com/milanz14/6wordle.git
cd 6wordle- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe output will be in the /dist folder, ready to deploy to any static hosting provider.
To preview the production build locally:
npm run previewThe core game logic lives in App.tsx and works as follows:
Word Selection — on mount, a random word is selected from the word library and stored in a ref to avoid re-renders affecting it mid-game.
Guess Validation — each submitted guess is checked against three rules before being accepted: it must not be empty, it must be exactly 6 letters, and it must exist in the word library. Invalid guesses trigger a shake animation on the input and a toast notification explaining the issue.
Tile Scoring — handled in GuessLine.tsx. Each letter is compared against the solution: an exact position match gets green, a letter that exists elsewhere in the word gets yellow, and anything else gets grey.
Win/Loss Detection — if the guess matches the solution exactly the player wins. If the player exhausts all 6 guesses without a correct answer the game ends in a loss and the solution is revealed.
- 🎨 Dark neon aesthetic with a glowing animated title
- 🔄 Tile flip animations on guess submission via Framer Motion
- 📳 Input shake animation on invalid guesses
- 🍞 Toast notifications instead of browser alerts
- 📱 Fully responsive — works on mobile, tablet, and desktop
- ♿ Semantic HTML structure
The game uses a curated list of 6-letter words stored in src/data/words.ts. This list serves as both the pool of possible answer words and the set of valid guesses — if a word isn't in the list, it won't be accepted as a guess.
To add more words, simply append them (lowercase) to the array in words.ts.
- The word is re-randomised on page refresh, so there is no daily shared word mechanic
- There is no keyboard component — guesses must be typed via the text input
- No guess history is persisted between sessions
Contributions are welcome! If you'd like to add features, fix bugs, or expand the word library:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
This project is open source and available under the MIT License.
Inspired by the original Wordle by Josh Wardle.