0:00 Introduction – In this video we will be building a better version of wordle, where you can customize the length of word and the number of guesses. We will be building this in ReactJS.

1:52 Introduction continued – Trello board, how to follow along — this is where I keep track of this project and prioritzation. This is not a tutorial, but a live coding session.

2:48 Setting up the skeleton of a react web app. I use create-react-app from the reactjs.org tutorial to set up my project locally.

4:51 Taking a look at the react web app skeleton and making a small change.

6:16 Making a github repository

7:40 Next we’re going to deploy to Heroku

10:59 Setting up auto deploy on github

13:45 Adding “Wordle Clone” to the header of the app

26:18 Adding the grid of words to the app. It took me the longest time to figure out that I needed a return statement within a map for the divs to show up on the screen.

48:10 I realize that I want to work with scss, so I needed to add a node package called sass. The benefit of this is you can write nested css.

49:42 I continue writing SCSS in order to match the designs of the wordle website.

58:32 Adding a keyboard into the web app.

1:07:53 – Styling the keyboard

1:15:00 – More product scoping

1:16:33 – Changing the title of the web app that’s shown in the tab

1:17:16 – Designing and implementing the state

1:23:35 – Explanation of react hooks, useState, and useEffect.

1:35:59 – Styling the tiles (colors)

1:53:15 – Implementing typing on the keyboard keys. There is an important concept here called data abstraction, where we define the right interface for developers. I use an useEffect hook to update the state whenever a user presses a key.

2:02:24 – Enumerating all the next states based on the key press action. Here I define a function that takes the user to the next state on a key press. I do this in pseudocode first.

2:07:24 – Thinking through the end of game scenario and playing game on the wordle website.

2:10:37 – Implementing the terminal game states.

2:13:30 – Handling key press (implementation)

2:23:59 – Fixing a bug with the backspace
2:30:05 – Finally discover the bug.
2:30:56 – Figuring out how to add to an array in Javascript without mutations.

2:36:00 – Scoping the next few stories on trello

2:37:31 – Finding an list of english words online and importing that into our web app. I end up creating an english.json within our app.

2:39:40 – Attempt to read from a json file. I struggle a bit to find the best way to do this. I started with loading the file into memory, but was saving the json file in wrong place. Ultimately, I figured out that the english.json needs to go into the `public/english.json` location.

2:52:01 – I got some working version of loading english words from a json file in my local dev environment, so move forward based on that. However (much later in this video, I run into deploy issues and have to change this up and move the json file into the public directory.

2:58:55 – Fixing a bug where the word list is lower case but the current word is upper case.

3:06:16 – Playing a game as a way to QA.

3:07:36 – Another round of quick round of prioritzation and scoping.

3:07:46 – Flashing to the user when a word is not in list and when a word is too short.

3:14:21 – Another round of scoping

3:14:56 – I discover a deploy issue. Fixing various deploy issues. Then I discover that loading all english words into memory as part of the build process crashes heroku.

3:38:50 – I decided to do a bit of refactoring so the UI is a bit more intuitive and allow the loading of the words to be after a user action. I use `react-router-dom` (V6) to handle navigation.

4:26:20 – I tried another appraoch and converted the english.json into a english.js file. This seemed to eowkr locally, but I learn later on that it doesn’t work for heroku still. I spent around 30 minutes going down this path.

4:35:52 – Another round of QA, I discover more bugs with upper and lower cases.

4:51:52 – I finally figure out to move the json file into the public directory, then use the FETCH api. That works!