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 reactle:dev -f docker/Dockerfile .
$> docker run -d -p 3000:3000 --name reactle-dev reactle:dev

Open http://localhost:3000 in browser.

Production

$> docker build --target=prod -t reactle:prod -f docker/Dockerfile .
$> docker run -d -p 80:8080  --name reactle-prod reactle:prod

Open http://localhost in browser. See the entry in the FAQ below about requirements for sharing of results.

FAQ

How can I change the length of a guess?

The default configuration is for solutions and guesses of length five, but it is flexible enough to handle other lengths, even variable lengths each day.

To configure for a different constant 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 to only include words of the new length.

To configure for variable lengths:

• Update the WORDS array in src/constants/wordlist.ts to include words of any of the variable lengths desired.
• Update the VALID_GUESSES array in src/constants/validGuesses.ts to include words of any of the variable lengths desired.

Note that guesses are validated against both the length of the solution, and presence in VALID_GUESSES.

How can I create a version in another language?

• In .env:
  • Update the title and the description
  • Set the REACT_APP_LOCALE_STRING to your locale
• 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
• Update the statistics migration components modal in:
  • src/components/stats/MigrationIntro.tsx
  • src/components/stats/EmigratePanel.tsx
  • src/components/stats/ImmigratePanel.tsx
  • src/components/modals/MigrateStatsModal.tsx
• To ensure that migration codes are unique to your application, update the Blowfish encryption key and initialization vector with random 30 character and 8 character strings in src/constants/settings.ts
• If the language has letters that are not present in English update the keyboard in src/components/keyboard/Keyboard.tsx
• 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

Why does sharing of results not work?

For mobile and wearable devices and smart TVs, sharing of results is initially attempted using the Web Share API. For other devices or when sharing to the Web Share API fails, the results are written to the clipboard. Both these methods will succeed only in a secure context, which require you to implement the HTTPS protocol when hosting this repo on a public domain.

Projects built using this repo

Other languages

• Arwordle: Arabic
• Boludle: Argentinian
• Gerdle: Cornish (Kernowek)
• Jwordle: Japanese
• Katadel: Jawi (Malay Arabic script)
• Keclap: Sundanese
• Kelmaly: Arabic
• Kerdle: Cornish/Kernewek (Standard Written Form)
• Latindictionary.io: Latin
• Lexoula: Ελληνικά (Greek)
• Malay: Bahasa Malaysia
• Mondle: Mongolian
• Parolette: Italian
• Parolle.it: Italian
• Pashtoodle: Pashto
• Persian: Persian (Farsi)
• Pinyin: Pinyin (romanization system for Mandarin Chinese)
• Rudle: Russian
• Sindhal: Sindhi
• Szózat: Hungarian
• So'zzana: O'zbek (Lotin)
• Tatar: Tatar (Turkic Language)
• Tàu Tâi-gí (Taigi Wordle): Taigi (Taiwanese)
• Telugu: Telugu (South Indian Language)
• Tlembung: Javanese
• 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
• SGWordle: Swiss German
• kelma.mt: Maltese
• Žodelė: Lithuanian
• Слівце: Ukrainian
• ਪੰਜਾਬੀ: Punjabi
• சொல்லாடல் Soladle: Tamil
• 字知之明: Traditional Chinese
• 꼬들 - 한국어: Korean
• 한글 풀어쓰기 5자: Korean
• ไทย: Thai
• ಕನ್ನಡ: Kannada

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
• Chipotle: Chipotle (food, items, etc.) themed
• Crosswordle: Crossword mashup
• Dundle: The Office
• FFXIVrdle: Final Fantasy XIV
• Harry Potter: Harry Potter
• JoJodle: JoJo’s Bizarre Adventure
• Mahjong Handle: Mahjong Hands
• Filmle: Movie titles
• Fletcherdle: American singer-songwriter FLETCHER
• Lyricle: Lyrics
• Marvle: Superhero (Marvel and DC) themed
• Movie Wordle: Bollywood
• Murdle: Spooky hangman mashup
• Pawnle: Parks and Recreation
• Poker Handle: Poker
• Poker Handle 2: Poker
• Polygonle: Wordle with a shape-based clue for each character
• Quettale: Quenya, Elven language in LOTR
• Radiole: Radio-themed (for World Radio Day)
• RareWordle: Word guessing with multiple simultaneous solutions of varying "values", all created from the same letters. The goal is to find the most obscure solution. It is inspired by the TV game show Pointless.
• Reverdle: Wordle but in reverse, that is one has to make as many guesses possible which do not have any green letter (i.e. a letter in the correct location compared to the hidden solution).
• Squirdle: Pokeman
• Tacticle: Chess puzzles
• 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
• WROUD: W R O U D is a simple word game that challenges people to find a six-letter word in 3 guesses from a cloud of letters.
• 香港麻雀 糊 dle: Mahjong hands under Hong Kong rules

Math, Acronyms, Science, Tech, and more

• AI-powered: Includes an AI component
• Colordle: Guess the hexadecimal color code of the background
• Genel: Gene symbols
• Jazle: Javascript
• Mathler: Find the solution that equals X
• Morsel: Morse
• Numble: Maths
• Opsle: Ops
• Passwordle: Passwords
• Perfdle: Performance Testers and Engineers, DevOps, and Observability
• Primel: Prime numbers
• Qwordle: Quantum version of Wordle (uses entangled word-pairs)
• Quantle: Another quantum variant where guesses are quantum equations
• Rundle: Like wordle, but only last three guesses are considered.
• Stockle: Guess the stock or ETF
• Syscordle: SYSCALL
• TwoKinds: There's only two kinds of people in this World.
• UNLOCOdle: UNLOCODEs
• Visionle: Guess the label of randomly chosen image from ImageNet/ImageNet-Sketch dataset (Machine learning)
• Zip-zap-bam!: Word ladder game.
• 0xdle: Hexadecimal

Want to add one to the list? Please make a pull request.