/react-wordle

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

Primary LanguageTypeScriptMIT LicenseMIT

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

Fun themes

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?

How can I create a version in another language?

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