strdr4605/react-wordle

A fun Wordle clone made using React, Typescript, and Tailwind

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.

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)
• Pinyin: Pinyin (romanization system for Mandarin Chinese)
• 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
• ไทย: Thai

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
• 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
• 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
• UNLOCOdle: UNLOCODEs
• Visionle: Guess the label of randomly chosen image from ImageNet/ImageNet-Sketch dataset (Machine learning)

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 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