Live coding: Let's build Wordle (but better!) in ReactJS!

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!