Breaking Down Wordle

If you’re not living under a rock and hiding from the world (if you are, that’s alright — given the current state of affairs, it’s understandable), you’ll know that the word game ‘Wordle’ has been all the rage. It’s been bought by the New York Times for seven figures, but the game itself is pretty straightforward. Anyone who is somewhat familiar with the web development devtools can reverse-engineer the game.

If we open the devtools, we can see everything. Firstly, the entry point for the javascript is here:

From the first glance, one can tell that Wordle is not written in vanilla JS, but uses a framework (React). But you can see some of the code’s function, still. If you scroll down, you can see, for example, a long array of words. This is where the answer comes from, and checks the word you enter as valid.

Wordle uses client-side logic to calculate the number of days and then determine a word from a list that’s been hardcoded in.

In addition, a critical part of the game resides in its ability to store its information locally. Going to view your LocalStorage, you can see that the answer, the past guesses, which row you’re on, are all stored here, along with some trackers from New York Times.

You can see here the state of the board, the status of the game (‘in progress’), and the status of each row for your guesses(‘evaluations’).

Having taken a dive in all of this, I decided to make my own version as a learning project. While I decided to stick with using React as the framework, I opted not to use localStore and replace its state management with Redux instead.

This has two consequences. One is that after you close the window, the game will lose all of the data. A player will not be to check the status of previous games and come up with the fun little graph. Another is that, as the game is split into multiple components, Redux makes communicating the data between them much easier than using the local storage.

Making the game itself is simple. The trick is to figure out the Redux state as well as how to place all the visual elements. I split the app into two main components: the Grid and the Keyboard. The Keyboard holds all the methods for interacting with the game — entering the letters, checking the guesses, moving onto the next row, and so forth. The Grid is responsible for displaying the status of the letters, the guesses, and the position of the correct answers.

I had fun making this, especially since it involves all the concepts of front-end development — state management, UI design, and programming logic.

Take a look at the demo here, and you can find the code here.