How to build the Wordle game using React

Team Atomic Loops
Atomic Loops
Published in
8 min readSep 13, 2023


Do you remember Wordle? It became a viral sensation around 2021 and still has many regular players today. In the game, players are given six chances to identify a five-letter word. For each guess, players receive feedback in the shape of coloured tiles that show which letters match or are in the right place. In this blog we will build this game from scratch while refining our React skills.

Getting started

To set up the project run npm create vite@latest , npm install and start it using npm run dev and leave only App.jsx, index.css and main.jsx with the following code:

App.jsx Index.css


Fetching the words

We will be using json-server to set up a local endpoint to serve the words. For a production app, you might want to setup an actual backend.

Make a db.json file in the data folder.

Install json-server using npm i json-server to fetch data inside React component. The json-server turns JSON data into API endpoints. Run json-server using the command json-server ./data/db.json — port 3001. It’ll provide the endpoint http://localhost:3001/solutions to access the data.


We’ll use the useEffect() hook to fetch data from json-server. Also, we need the useState() hook to store data from json-server. Now, the App.js file will look like this:

Make a custom Wordle hook

Create a useWordle.js file inside the src/hooks folder. Let’s add a skeleton logic in the useWordle.js file.

Tracking guesses

You need to track the guess while the user submits the word. For this, we’ll use an event listener for every key press. We will build a new component src/components/Wordle.jsx

For every key press, handleKeyup function will get fired. So, you need to make sure only English letters get tracked. Also, backspace will delete the last letter from the current guess.

We’re going to add UI in the Wordle component. So, we also need to update App component according to it.



Submitting and formatting guesses

When a user submits the word by pressing Enter, we need to handle this word for further game logic. We’ll build the following logic:

  • Only add a guess if the turn is less than five
  • Don’t allow duplicate words
  • Check word is five chars long

Format guess functionality will compare each letter against the solution word and apply colors accordingly.


Also, you need to call formatGuess() inside handleKeyup() when the user presses Enter.


Add new guesses

Now, you’ve done guess tracking, guess submitting, and guess formatting. You must add a formatted guess in the guesses array of the useState() hook. After that, we’ll print these guesses onto the Wordle grid. In the handleKeyup() method, we need to call addNewGuess() after formatGuess().

src/hook/useWordle.jsx in handleKeyUp()

We need a list of six guesses to print on the game grid. So, we’ve to set the guesses’ length to six in useWordle.js.

const [guesses, setGuesses] = useState([…Array(6)])

Let’s implement the addNewGuess() to update the guesses list for the Wordle grid.


Also, we need all these values inside the Wordle component.


Making the game grid

Now, We’ve to display guesses on the Wordle grid. We’ll create a grid of six rows. Each row will consist of five squares for five letters. So, we’ll create two components, Grid and Row. Let’s create the Grid component first.


We must create a Row component for the Grid component.


Let’s add styles in the index.css file for the Row Component.

Finally, add the Grid component to the Wordle component.


Result so far:

Show the Past and Current Guesses

At the moment, no letter is displayed on the grid. We’ll display the guesses’ list on this grid. First, we’ll pass each guess to Row. All letters of guess will get displayed on row squares. Every square will have a background color according to the guess. Let’s pass a guess to each row inside the Grid component.


Also, we need to adjust the logic of the Row component for the guesses display. Now the row component will look like this.

Add the following styles for squares to the index.css file.

We’re displaying all the past guesses on the grid. We need to display the current guess while typing as well. In the Grid component, we want to pass the current guess to the Row component. So, the row with the current turn will display the current guess.


Now, update the logic of the Row component for the current guess. Also, extract the current guess as a prop in the Row component.


Now, we can display the current guess and past guesses.

Tile Animations

There’re a few more things we need to do. First of all, we’ll handle animations for letters and words. We’ll do this through keyframe animations. Let’s add animations to the index.css file.

We also need to add a bounce effect to squares of the current guess. Let’s add this bounce animation to the index.css file.

Now, We’re done with the animations part as well.

Result so far:

Visual keyboard component

We’ve to build a little keypad to show the letters used and matched. It’s basically to visualize what letters we’ve used. Let’s first create letters data for the keypad.

Create a new file src/components/keys.js


Now, we’ve to create a Keypad component. In a new file:


Let’s add styles to index.css for the Keypad component.

Now, you need to add the Keypad component to the Wordle component.


At the moment, the keypad’s not reflecting the keys used. We’ve to update it inside useWordle.js.


Also, update the Wordle component.


Now, handle the usedKeys prop inside the Keypad component and reflect used key colors on the keypad.


We must add styles to index.css for the Keypad component.

Now, we’re done with the Keypad component.

Result so far:

Endgame modal

Finally, we need to detect when to end the game. We’ve to handle two scenarios:

  • When the user guesses correctly.
  • When the user runs out of turns.

For this, we’ll add an event listener inside the useEffect() hook of Wordle component.


Now, we’ve to make a modal appear on the screen when the game ends. Let’s create a Modal component.


Also, add styles to index.css for the Modal component.

We need to add the Modal component inside the Wordle component.


Final Result

And thus, we have completed the wordle clone. This was a pretty good exercise for learning how to use events and custom hooks to implement our logic and organize our code.

Contributed by:

Aryan Sawale