Wordicle - A React based Word Guessing Game

Wordicle - A React based Word Guessing Game

Another Wordle clone, only better

ยท

4 min read

One morning I woke up to this -

๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ๐ŸŸง๐ŸŸง ๐ŸŸฉ๐ŸŸฅ๐ŸŸฉ๐ŸŸฅ๐ŸŸฅ ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ๐ŸŸฅ๐ŸŸฅ ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ๐ŸŸฅ ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ๐ŸŸฉ

A strange pattern of green, yellow and red boxes.

So like everyone else, I stumbled upon the game which has taken the world by storm - WORDLE. Its so simple, yet so interesting and addicting. So for those of you who haven't yet heard of WORDLE - its a popular word game, where the user has to guess the word of the day in 6 tries. Its a new 5 letter word each day, and the main USP of the game is that, for every word you submit you get hints as to how close you are to solving the word.

You can check it out yourself here: https://www.powerlanguage.co.uk/wordle/ Kudos to the developer who designed this simple and intuitive game.

Anyway I have been hooked to this game for quite some time now. But every time I guess the WORDLE of the day, I have to wait for the next day to solve the next word, which is frustrating! I wanted to have a word game where the user can keep playing as much as they want. And since I had started learning React quite recently, I thought why not develop a WORDLE clone, but with some new features.

So that is what this article is all about.

So one morning I woke up and started breaking down the existing WORDLE game. And then I realized, that this game has no backend server, and the entire dictionary and solution exists in the source code. I could easily find out the solution of the day through local storage.

All you need to do is, open up WORDLE, bring up the Console on the Developer Tools, and then type in the following command to fetch the solution from local storage.

JSON.parse(localStorage.getItem("gameState")).solution

image.png

So after this realization, my interest for playing the game everyday died. So I started working on my clone of Wordle called WORDICLE (I know right?!). So here in this article I will just go through how Wordicle is different from Wordle.

Oh, and before I start here is the link to the game I developed https://debanjan1992.github.io/wordicle-fe/

This game is still in beta, and I'm still in the process of fine tuning and fixing few things - just a heads up!

Okay so back to Wordicle. First lets take a look at the game screen -

image.png

And this is how to play the game:

image.png

Now lets take a look at some of the things in which Wordicle is different.

  1. You can play Wordicle unlimited number of times daily! (Finally)
  2. You are not restricted to only 5 letter words. Instead you can get any word between 4, 5 and 6 letters.
  3. There is a hosted backend NodeJS server and PostGres database where I'm maintaining all the sessions, words and all the validation logic. This means that there is no way you can get to see what the answer is. (Technically there is still one way, but I'll leave it up to you to find that out)
  4. There is a competitive nature to each word. So for every word you get, you are presented with the quickest time in which that word has been solved in the world. And you have your own timer running, where its always a challenge to beat the shortest time!

image.png

And if you manage to solve the word, then you get this awfully ugly looking screen (I'm working on it!)

image.png

  1. If you are not able to guess the Wordicle in 6 tries, well better luck next time, but yes we reveal the word for you.

image.png

  1. Wordicle is a Progressive Webapp (PWA) - which means you can go ahead and install it from your browser - either on your laptop or your tablet or phone, and play it from your desktop or mobile homescreen.

So these are some of the things in which Wordicle is different from Wordle. Rest everything is the same, the base design, the idea - in short Wordicle is a rip off of Wordle. However, it was an amazing experience learning and developing Wordicle in React. It is basically my first ever web game which I developed. I developed Wordicle in my own way, and I wanted to share it with you. This is my first ever article, so yeah fingers crossed!

I will probably write another follow up article on Wordicle - from a more technical standpoint. Here are the github repos where you can find the source code:

https://github.com/debanjan1992/wordicle-fe https://github.com/debanjan1992/wordicle-be

So till then play Wordle or Wordicle, and share feedback if possible! Hope you guys enjoy playing!

image.png

ย