Make a Wordle Clone with React #2 - Using JSON Server

Key Takeaways

all right then so before we start coding the wordle game itself i just want to take a few minutes to talk about what initial data that we'll need for the game and how we're going to fetch it so the data we need to begin with is basically just going to be a list of solution words and then when we start the game we can just randomly select one of those words for that particular game and if we refresh the page we can randomly select another word and so forth now i guess you could just create a giant array of words in your application code and randomly select one from there but what i'd like to do is be able to fetch those words from an external source independent of the application code and then we can always change where we source these words from in the future if we want to so there's a few different options that we have we could use a third-party api to get us a list of words that are all five letters long i'm sure an api will exist somewhere like that or we could set up a database to store our words in like mongodb and then just fetch a random one of those words for each game or even simpler we could use a json file to store all of the words in in json format and then use something like json server to fetch that json and that's the approach that we're going to use in this series but if you prefer you can use a different approach so to begin with we need to create a json file to store our data in now you can do this wherever you want but when i'm using json server i like to make a data folder in the root of my project folder so that's what i'm going to do and then inside that folder i'm going to create a file called db.json where db just stands for database because in a way the json file is kind of acting like a database and storing all of our data inside it so then inside this is where we need to write some json data so to start with we need to open up some curly braces this is how we start the json file and then inside here we can have multiple different properties where each one when we're using json server would represent a different resource that we might want to try and reach for example if this was a blog site that i was building right now i might have a blogs property which would be an array of blog objects and i might also have a categories property which would be an array of category objects and then we technically have those two resources that we could fetch using json server now in our case i don't want those resources we just want a solutions resource for now so let's type that out and this is also going to be an array of objects and each object inside this array is going to represent a different solution word so each one is going to have a word property and that's going to be the solution word itself a string and also each one is going to have an id property just in case we want to fetch a single word using the id property at some point in the future we might not but just in case all right so instead of writing all of these solutions out from scratch what i'm going to do is copy and paste the rest of them from the course files repo and remember the link to that is going to be down below the video so you can go and copy them as well unless you want to make your own and write them all out from scratch anyway now we should have a list of about 15 solutions and from our application we're going to be able to fetch these solutions and select one at random each time we start a new game so the next step is to install a package called json server so that we can use that to fetch this json data from inside a react component because what json server does is wrap our json data file right here with api endpoints so it essentially turns a json file into an api and each resource has its own end point that we can use to fetch that resource for example we would access the solutions data by using the endpoint local host port whatever forward slash solutions and that would get us all of the solutions data so let's start by installing json server globally on the computer and to do that you just need to open up a terminal and you want to type npm install then hyphen g meaning install this package globally on the computer then jason hyphen server and then you want to press enter now i've already installed json server on my computer so i don't need to do it again so i'm going to delete all of this but you hit enter and that's going to install it globally on your computer and now once you have that installed you can run it to wrap our db.json file with api endpoints so to do this in the terminal just write json hyphen server then write a path to the json file that we want to wrap which from this location is dot forward slash into the data folder then forward slash db.json then we're going to use a flag called port so double dash port to specify what port this api should be served on and we're going to say port 3001 because react is already using port 3000 right and then just hit enter for json server to do its magic so it's just going to take a second or two but when it's ready it's going to let you know that you can now access the solutions resource using localhost port 3001 and then forward slash solutions so let's try using this endpoint in our code to fetch the data all right so we're going to do this from the root app component over here oops we don't need that open the app component so up here i'm going to use the use effect hook to run some code when the component first renders so i'm going to say use effect like so and i'm going to click on this to auto import it at the top and this is going to fire a function when the component first renders and also we want that to be the only time that it fires the function as well so we'll add in our dependency array which is going to be empty to begin with but we need to add something into this later on okay so we also need some state to store the solution in when we have one so i'm going to create that at the top so we'll say const and we'll call the state solution and we need a function called set solution to update it as well because this is going to start off as no i'm going to click on this to auto import as well so we place null in here for the initial value because we don't have a solution to begin with but we're going to try fetching the solutions now right here then selecting a random one and once we have that random one we are going to update this bit of state right here to be that solution okay so in order to do this we just need to use fetch like so oops and you need to spell it correctly and the end point is going to be what was in the terminal down here so i'm going to copy this thing and then i'll paste it right here like so and then once we get a response we can tack on a their method to fire a function with that response now when we use the fetch api the response we get needs to be passed from json into some kind of javascript object or data structure that we can use so to do that we take the response and we can use the json method on it to get us that and that returns another promise because it's asynchronous and we can second another then method to fire a function once we have that data so i'm just going to call this json and then inside a function we can do something with that so what i'm going to do is just log this to the console first of all so we can see it works like so and i'm going to save this and now in a browser if you open up the console you should see an array of different solution objects we can see all those right here so that's worked we're fetching the data now we just need to randomly select one of these that's going to be the solution for this particular game so back over here i'm going to delete this console log and replace it with a little comment to say we need to basically generate a random integer between 0 and 14 because we're going to use that then to grab an item from this array of data so it's going to be something like this json and then we want random number like 7 or 0 or 14 and it's not 15 because if we used 15 that gets us the 16th item in the array which we don't have and it does that remember because the first item in an array is zero so we need a random integer between 0 and 14 to place inside the square brackets to get us one of those solutions a random one so to do this we'll delete all this right here and we'll create a constant and i'm going to call it random solution like so and we set it equal to json and then square brackets because we're getting a random solution from the json array right so we want a number to go in here and the way we're going to get that number is by saying math dot floor and the floor method basically floors a decimal number so if we have something like 4.6 then it will floor it to an integer 4. if we had 4.1 it flows it doesn't matter how high the decimal point is it could be 4.99 it would still floor it to 4 okay so we use math.floor and then inside parenthesis we want to pass in math dot random and what this function does is get us a random number between zero and one so it could be something like 0.576 whatever it could be any number between zero and one and what we want to do then is times that by the length of our solution array so we can say multiplied by json dot length and that's going to be 15 in our case but if we had 50 solutions in the future then it would times it by 50 and that would get us a random integer then between 0 and 49 okay so let's delete this over here that's pretty much all we need to do that's going to grab us a random solution from the json array and then what i'm going to do is update the state over here the solution using set solution so set solution like so and pass in the random solution and then also because we're using this external function here we need to pass it in as a dependency in the dependency array so set solution goes here and if this is going over your head if you're not sure what use effect is or what this dependency array is then definitely check out my other react tutorials first of all i'm going to leave the link to that down below the video all right so now we have the valid solution it starts off as null but then once we've done this right here once we've fetched it and grabbed a random one we update the solution to be that random solution so that's going to change from null to the random solution and then what i'd like to do is output that in the browser so double curly braces to output something dynamic and i'm going to say solution double ampersand and then a div and then inside the div i'm going to output the solution so we'll say solution is and then double curly braces again output the solution so the reason i did this on the left is because i don't want to output the solution over here until we have a value for solution so while that's null to begin with if this is null over here or any kind of false value then react will never output the template on the right okay so this is kind of conditional templating right here but then when we get a value for solution and this evaluates to true then it's going to output this template on the right okay so now let's give this a whirl in the browser now actually before we do that i've just noticed that this right here this random solution actually is an object because if we go to the db.json it's one of these things right here so we're trying to update this bit of state to be an object now i don't want it to be the full object i just want it to be the word so what i need to do is say over here random solution dot word to grab the word property this value right here and update the solution to be that not the whole object okay so once you've done that now we can save it and now hopefully we can preview this in a browser all right so now in a browser we can see that we get a solution word right here in the template because we output it and if we refresh then we should see a different solution word because when we refresh the page we're re-fetching the solutions and then we're re-selecting a different random solution from that array of data and that's pretty cool because then if a user wants to play a different game with a different solution all they have to do is refresh the page awesome