React Wordle

This is a clone project of the popular word guessing game we all know and love. Made using React, Typescript, and Tailwind.

Try out the demo!

Build and run

To Run Locally:

Clone the repository and perform the following command line actions:

$> cd react-wordle
$> npm install
$> npm run start

To build/run docker container:

Development

$> docker build -t game:dev .
$> docker run -d -p 3000:3000 game:dev

Open http://localhost:3000 in browser.

Production

$> docker build --target=prod -t game:prod .
$> docker run -d -p 80:80 game:prod

Open http://localhost in browser.

Projects built using this repo

Other languages

Arwordle: Arabic
Boludle: Argentinian
Gerdle: Cornish (Kernowek)
Keclap: Sundanese
Kelmaly: Arabic
Latindictionary.io: Latin
Lexoula: Ελληνικά (Greek)
Malay: Bahasa Malaysia
Parolette: Italian
Parolle.it: Italian
Pashtoodle: Pashto
Persian: Persian (Farsi)
Rudle: Russian
Sindhal: Sindhi
Szózat: Hungarian
Tlembung: Japanese
Tugma: Hiligaynon (spoken in the Philippines)
Ukrainian: Ukrainian
Urdle: Urdu
Vārdulis: Latvian
Word-leh!: Singlish
Wordlar: Uzbek
Wordle (BOS): Bosnian
Wordle (Spanish): Spanish/Espanol
Wordle-RO: Romanian
Wortel: Afrikaans
Wörtchen: German
kelma.mt: Maltese
Слівце: Ukrainian
ਪੰਜਾਬੀ: Punjabi
சொல்லாடல் Soladle: Tamil
字知之明: Traditional Chinese
꼬들 - 한국어: Korean
한글 풀어쓰기 5자: Korean

Fun themes

'en si lì'ur: Na'vi, the constructed language from James Cameron's AVATAR (2009)
Airportle: Airport Codes
Anidal: Animals
Birdle - Emojis: Bird emojis
Birdle: Birds
Buildly: Construction themed
Crosswordle: Crossword mashup
Dundle: The Office
FFXIVrdle: Final Fantasy XIV
Harry Potter: Harry Potter
JoJodle: JoJo’s Bizarre Adventure
Mahjong Handle: Mahjong Hands
Movie Wordle: Bollywood
Murdle: Spooky hangman mashup
Poker Handle: Poker
Quettale: Quenya, Elven language in LOTR
Radiole: Radio-themed (for World Radio Day)
Squirdle: Pokeman
Taylordle: Taylor Swift
Trekle: Star Trek
Weedel: Video game characters
Wordle.cl: Chilean modisms, cities, places
Wrdl: Words that are 5 letters long after getting rid of their vowels

Math, Acronyms, Science, Tech, and more

AI-powered: Includes an AI component
Genel: Gene symbols
Jazle: Javascript
Mathler: Find the solution that equals X
Morsel: Morse
Numble: Maths
Opsle: Ops
Passwordle: Passwords
Primel: Prime numbers
Rundle: Like wordle, but only last three guesses are considered.
Stockle: Guess the stock or ETF
Syscordle: SYSCALL
UNLOCOdle: UNLOCODEs

Want to add one to the list? Just make a pull request or let us know via a comment here

FAQ

How can I change the length of a guess?

Update the MAX_WORD_LENGTH variable in src/constants/settings.ts to the desired length.
Update the WORDS array in src/constants/wordlist.ts to only include words of the new length.
Update the VALID_GUESSES array in src/constants/validGuesses.ts arrays to only include words of the new length.

How can I create a version in another language?

In .env:
- Update the title and the description
In public/index.html:
- Update the "You need to enable JavaScript" message
- Update the language attribute in the HTML tag
- If the language is written right-to-left, add dir="rtl" to the HTML tag
Update the name and short name in public/manifest.json
Update the strings in src/constants/strings.ts
Add all of the five letter words in the language to src/constants/validGuesses.ts, replacing the English words
Add a list of goal words in the language to src/constants/wordlist.ts, replacing the English words
Update the "Settings" modal in src/components/modals/SettingsModal.tsx
Update the "Info" modal in src/components/modals/InfoModal.tsx
If the language has letters that are not present in English update the keyboard in src/components/keyboard/Keyboard.tsx
If the language's letters are made of multiple unicode characters, use a grapheme splitter at various points throughout the app or normalize the input so that all of the letters are made of a single character
If the language is written right-to-left, prepend \u202E (the unicode right-to-left override character) to the return statement of the inner function in generateEmojiGrid in src/lib/share.ts

How can I add usage tracking?

This repository includes support for Google Analytics or Plausible Analytics, but, by default, this is disabled.

To enable Google Analytics:

Create a Google Analytics 4 property and obtain the measurement ID (of the format G-XXXXXXXXXX)
In .env, add REACT_APP_GOOGLE_MEASUREMENT_ID=G-XXXXXXXXXX

Keep in mind that your region might have legislation about obtaining a user's consent before enabling trackers. This is up to downstream repos to implement.

To enable Plausible Analytics:

Create a new website with Plausible Analytics with a given domain, e.g. example.app
In .env, add REACT_APP_PLAUSIBLE_DOMAIN=example.app

Narutuffy / react-wordle