Skip to content
/ ayoble Public
forked from thesam73/wordle

A fun Wordle clone made using React, Typescript, and Tailwind, deployed on ayoba.

License

Notifications You must be signed in to change notification settings

yusufk/ayoble

 
 

Repository files navigation

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

or

$> 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. Please follow this tutorial for a complete discussion on building a Docker image for Reactle.

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:

To configure for variable lengths:

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?

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

Fun themes

Fun themes in other languages

Math, Acronyms, Science, Tech, and more

  • AI-powered: Includes an AI component
  • Biordle: Biology
  • Cloudle: Cloud technology
  • Colordle: Guess the hexadecimal color code of the background
  • Genele: 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
  • 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.

About

A fun Wordle clone made using React, Typescript, and Tailwind, deployed on ayoba.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.5%
  • CSS 2.2%
  • Other 1.3%