React Wordle
This is a clone project of the popular word guessing game we all know and love. Made using React, Typescript, and Tailwind.
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
- Mondle: Mongolian
- Parolette: Italian
- Parolle.it: Italian
- Pashtoodle: Pashto
- Persian: Persian (Farsi)
- Rudle: Russian
- Sindhal: Sindhi
- Szózat: Hungarian
- Tàu Tâi-gí (Taigi Wordle): Taigi (Taiwanese)
- 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
- SGWordle: Swiss 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
- Filmle: Movie titles
- 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
- 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
- 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 ingenerateEmojiGrid
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