Building a Marvel Search engine with ReactJS

hello there welcome everyone my name is marco and i'm a full stack developer i haven't been posting on this channel for quite a while almost over a month now and i apologize for that but it's been quite a busy month i had a project with a friend of mine and it came out pretty good actually and if you're interested i've used as well kit and tailwind css which i gotta admit as man was so much fun and if you're interested just let me know in the comments and i will do certainly some some videos and tutorials about it because it's just so much powerful but we are here today to learn react and so we're gonna learn react so for today i have something particular in mind which is a step up from what we've done from what i've done so far because when you're using frameworks and libraries react angular view whatever you actually the most basic stuff that you can do is actually consuming data from an api and today we are going to do just that we are going to use the marvel api to build basically to fetch heroes and to look for them and to read some description and to show them on the screen on the web page something very simple but that can be really expanded and the imagination is really the limit here now what can you learn from a project like this i'd say that this is an intermediate level project because of course the concept of components is always going to be there but now we're going to work with two things one is as i said apis so consuming data from an api parsing those data and showing them nicely on the page and secondly we're gonna work with routing through like react routers of course it's gonna be like different from a server side render route these are gonna be client-side it's a whole different like story and there's so much to say about this but these are the fundamental things that you can learn from a project like this one so as i said we're going to use the marvel api and to be honest it's not the easiest to set up so i decided to split this video into parts the first part is gonna be it's gonna show you how to set up and make requests to this api which again it's not the easiest one i'm not the biggest fan of how it is so it is all organized and the second part is actually going to be the decoding the coding part building the web application this being said let's start coding okay so the first step that we need to navigate through this this api documentation is go to the website which is developer.marvel.com and basically you're presented with this opening page which basically has everything so the first thing i'd suggest you to do is to create a an account of course i've already created mine but you need to create an account and you need to verify your email address i mean it's something that you've already done somewhere some sometime for sure once you did that you can come here back and go to the how to's and we can start with the getting started information now i like to start from this because if they provide it there must be a reason and the first thing that you notice is that you have a list of things like a checklist and the first thing that we want to do is to get an api key now let's do this first i'm gonna open it in a new page and this is basically my developer account now this is gonna be my username and i'm given a public key and a private key and this is exactly what you want to like keep secret i'm told that i have 3000 requests per day which is fine this is default i guess it's a list of domains but you need you don't need to change anything and then you just fill the this is misspelled the test project update beautiful just give the name of your project of the project you're working on now these keys are quite important and you want to keep them like secret of course the public key is going to be exposed at some point because you make a request from react but the secret is going to be like the private key is going to be it's going to remain private and you'll see how we can authenticate in this it's a bit complicated and for my taste it's a bit too complicated but i think that in terms of safety and security they hit the sweet spot then after you create the api key you're basically good to go but you need to a good you need to be a good api citizen and so you need to abide by the terms of use of course i mean if you have time just read it and then you need to link back this is quite important because i think it's something to do with like attribution and stuff and if i go here attribution and linking guidelines you got rate limits t for staying within rate limits uh you are told that you can cash results but not indefinitely yeah that makes sense because you're basically stealing data and you can cache them for 24 hours max i think only make the so if you're wondering what caching is is basically since you have 3 000 requests per day maybe you foresee a visit on your traffic on your website way higher than that but maybe the like 2 000 people request the same exact superhero makes the exact same query you don't want to all the time heat the end point with the same exact query so you just cache the result so you basically save it locally in your cache and you provide that without making a call that will save you a lot of calls and that is the way to go actually if you want to implement an application that serves like a lot of traffic it's not the case that we're seeing now but if you plan to do so and i hope that your application will have a lot of traffic this is the path to follow and i think the other thing is yeah attribution attacks on every application screen or webpage which display the api results needs to have this yeah this is basically something that we need to add and we're gonna put a link back to to this address i'd say yeah marvel.com yeah this is the basic attribution rules that i am ready to follow then keep in touch tell us about what you're building this is probably some statistics some form and build cool stuff which is what we are going to do okay so enough with getting started we can start actually seeing first of all how we manage authorization so how we authenticate when we want to make a request so we go to authorization and as i said it's not the easiest one to follow but try to i mean it's not super complicated but it is a bit odd so first of all you need to pass a parameter which is api key it's not comma case so make sure that it's not come a case and this represents basically the public key that you're given in your account then you have two different systems of authentication like client-side which is not our case and server side we're not going to work with a server but we're actually making a request from another website so we want to use this and to use this we have this endpoint the gateway.marvel.com every route starts with v1 and then public and then the endpoint that you want to hit and in this request we need to pass two additional parameters one they call it ts and it's a timestamp why is it a timestamp you're gonna see it in a second the second one is the ash which is an md5 digest md5 is just an algorithm and this is quite important because it basically represents a combination a string concatenation of the timestamp the private key and the public key and this is important the order in this case is very important because you don't want to mess it up so the final result in the request should be that you have a ts timestamp you have the api key with your public key and the ash which is a combination of the timestamp the api key and the private key now why do they pull like a timestamp here so the md5 algorithm is quite predictable and if someone was to like get that ash all the time you make a request eventually if that ts doesn't change they will discover your private key they will figure out what private key that is you you're basically using because the md5 always generate the same output for the same input therefore if you use a timestamp in this case and a timestamp can be everything like in seconds and milliseconds and if you think about it every second is going to be different and even if you use like milliseconds every millisecond the timestamp is going to be different so that is made that makes him more secure and then you got the authorization errors like you got a 409 which i have no idea what they put a four or nine which is a conflict if you're missing the api key i would have pulled like a 400 which is a bad request but i'm not the back-end developer on this project so i don't care and then you got the 401 which is unauthenticated and the 405 which is very odd it's like method not allowed and a 403 is forbidden and this is it for authorization now we actually want to make a request but where do we make a request well this is a good point and they offer a very very nice interactive documentation where if it loads you have a list of basically all the endpoints they provide where you can actually make a request and as you can see there are a lot of them so if you plan in any way to make an application just you have a lot of like possibilities here because you got the stories endpoint it fetches a list of stories the series events even the creators for today's purposes i'm just gonna focus on these two endpoints the characters and the second one which is going to be the details about the characters and if i click on it i can actually see the entire model and schema of the response object which is exactly what i want because these explain to me what i should expect as a response object and if i click on model schema i got the entire schema so basically i will receive a code which is an integer and if i don't know what this code is just go to the model and say yeah code it's the http status code of the return result so basically it's going to be like 200 if it goes well and then i got a status which is a string description of the call status which is going to be okay in this case so 200 okay and then this bunch of stuff the important stuff is data this one because this is where the data are coming from we're going to have an offset and a limit and this is to make subsequent requests because i think you cannot get more than 100 or maybe 50 50 or 100 results per request and the main results are going to be stored in this key the results which is a list and a list of characters basically there's going to be an id and this is very important when we have to eat the subsequent the the next endpoint with the id of the character it's going to be the name the description the resource uri which i think is what you should link to and for the attribution you got the urls and you got the thumbnail this is what we want and also we're gonna get a bunch of stuff that we don't really care this is actually quite important because this will show the image now how do we request the image when we put like the image as an html element you know that you have a source and that source can be a local path or a url they provide it actually they provide a path and they provide the extension and this is actually the next thing i want to talk about oh by the way the next endpoint is going to be like the character id and this is basically the same as almost the same schema but it returns just the result of one character and also and this is quite important it says the various parameters that we can use in the query and for today we're going to use this one the name starts with because it returned characters with names that begin with the specified string which is exactly what we want in terms of images we need to go to another place in this documentation as i said this is quite thorough but it's a little bit maybe overwhelming if i go to images i get the explanation of how i need to put the source for getting the image this is basically the response that i will get in the thumbnail i will have a path that looks like this and then an extension which is jpeg or png or jpeg whatever what i need to do is to append this extension to this request so basically the request in the source is going to be yada yada yada dot jpeg or and this is where they explain here you can append the variant name to the path element what is the variant name well they provide a lot of like resolutions for the image let's say that i want this one the important uncanny which is 300 by 450 i need to basically make the request with the entire path slash the portrait in this case the the ask for the x large i will ask for the portrait uncanny and then dot the extension and i will get image if i don't do that if i just append to what i get in the response.jpg i will get the full resolution image which is okay i guess but in terms of data consumption you might want to request a smaller image especially if you if you think that you're gonna use it in like small thumbnails which is what we are going to do this being said i think i've said everything and of course i encourage you to go here it's a very comprehensive documentation it's quite uh probably it's too broad for my taste but i strongly encourage you to read it all especially if you plan to create something very very big with this something professional and don't forget to abide by their terms of use rules and don't expose your your keys that is probably number one and number two rules to follow these being said we can start looking at some code okay so i have vs code open in front of me and it's quite blank and it can be intimidating but we have a powerful tool for this which allows us to create a react app and it's called create react app so in your terminal just type npx create react app like this and then a dot so that it's going to create the folder and all the dependencies in this folder it's gonna take a while so relax and chill out for a second okay we are back i hope you finished your cup of tea or whatever you were drinking and at the end of the script we should have a structure like this we have a public folder there is a bunch of stuff in an src folder where there is even more stuff now to be quite honest we don't need all this stuff so i'm just gonna clean up a little bit so the readme definitely wouldn't need it setup test and this maybe the logo yeah test we don't need this and well i'm gonna just leave the rest as it is i'm just gonna delete [Music] move to trash yes okay what's left to do in the app yeah we got a bunch of stuff here and we can see if everything works i don't think it will because we remove some stuff so maybe from here we need to this because it doesn't exist and this is well let's hit save in the app.js we can remove this one as well you know yeah we're going to use the index in the tip but now we need to remove it from the app which is here nice let's hit save and this is the basic thing that we are going to have okay if i want to start uh like dev server i just type npm start and they should start something on my local server and of course it will take some time but wow yeah this is because there is no styling but basically there is everything let's go back to the code and let's remove all this stuff because we don't want it not even a class name who cares for now we're just going to have a div that says [Music] typical hello world why not and i'm going to go in the css and i'm going to delete everything now yes we have it now the goal of these videos is not the css so you'll excuse me if i just copy paste what i've written here i'm going to explain it like while i do it but basically yeah the css is pre-written i'm going to upload this code on github for like entirely uh so you can look at the css right in there if you are interested and now we should look at something totally different there is no marginal border because i removed it but basically we're gonna see it coming through okay so let's start creating um a file in the root folder i'm gonna call it dot emv and this is where we are going to store our environment variable this is quite important because as a framework it's not a framework but working in the in the on the front end we are going to have to deal with secrets that we don't want to expose like when we upload this to github or something and it is possible to pass environment variables since we are using create react app that in the background uses webpack to bundle everything we need to start our environment variable with react app and then the name of variable now i just want to give it a base url and react app i'm gonna have an api key this is gonna be my public key and there's also gonna be a private key now of course in here you are going to have your own keys okay so around this point my audio decided to quit and live for another planet so i'm gonna do a voice over i hope that's okay basically i'm gonna comment the code and what i'm doing now is setting the environment variables again it's very important to do so because especially when you're dealing with a front-end framework whatever that is you want to have some environment variables to keep secret uh of course some of these environment variables will be exposed during the request but uh this is the list that you can do and also if you try to push a code like this on github you're gonna receive an email with basically a wording saying you are exposing some environment variables and you shouldn't do so okay we are back in the app component which is the main component and i'm gonna do some magic for sure okay right here i am installing the react router and just do an npm i react out of dom and this will actually give me the react router which is quite important actually nice now that that is installed and i have it here in the dependencies version 6. yeah that's quite important what i want to do is import it and i need to import actually three things and you'll see what the first thing is the browser router which i'm going to recall router [Music] if i can spell it yeah okay router here we go then i need to import the routes and then the route and everything will come from react router dom nice now that i have this the way reactor react router works is that you need to wrap everything around the router so basically i'm going to use it to wrap everything all my components let's say and my routes inside it so i create a router component inside i will create routes those are the only things that i want to keep in the routes because there are some things that you might want to display in all pages and those are going to be outside the routes because they don't depend on the route itself one big example is like a navbar you want to display the same number in all of your pages so that is going to be put outside as we see as you will see like later i'm going to create a route actually two routes for for explaining the thing now i'm setting the two property which is not correct and you'll see why it's not working this actually should be a path and two is reserved to a link but i'm gonna figure out i'm gonna figure it out in a bit so don't worry [Music] the other prop that a route component receives is actually the the element and the element is the component that you want to show in that route in this case for the slash route i want to display the home component and i'm gonna put it [Music] whereas in the about i will show the about component [Music] nicely done marco now this thing of course it won't work because i don't have neither and the the home and the about component and as you can see the console i just error out in my src folder i will create a routes folder now this is quite important because even if i call it routes it's not a reserved name i could have called it whatever like frank for instance uh react doesn't really care about it this is just for my self-organization like i know that in the routes i'm not going to have like pure components but my components will be assembled in there so they have more organization more flexibility like this but pay attention because react doesn't really care about that if you think about other frameworks like next js that supports routing and so you will have a route folder and next just will look for that to create to dynamically create routes this is not the case so inside my routes folder i will create basically components that are be that are going to be handlers for the other components and of course i'm going to have my own jsx and just as an example i'm going to have my about or jsx now rfc is like a shortcut and you can use it if you have the ps4 extension for react it's quite convenient because you basically create a component which has an export of default it's neat and it really saves you a bit of time especially when you're when you need to basically code the same thing all the time so now i have two components and i'm going to import them this is very important naturally it will yeah i would import it like this from routes nice [Music] and it's going to be about yeah my typing scale are off the charts now the server should work let's see if that's true yes it does and if we go and look of course there is nothing showing up because and now i'm starting to realize that it's not a 2 but it's a path and there it is so just change it to path and now it would work as expected i'm in the about page so i will just see about but if i go to the home page i will see hope neat now we can start thinking about building our components and the first component that i want to build is the nut bar for organization i'm going to create a folder of components and inside here i'm going to have my my first component now this is a very subjective things because of course react is not a very opinionated type of library so you can really build the components as you wish my suggestion is to try and keep it as consistent as possible of course there is no right or wrong but there are things that might be considered better than others so for instance just to build an entire component out of the app it's i mean all in one place you can do it but definitely it's not the best solution and also the opposite is not the best solution so basically grab each uh html element and wrap it around as a react component because that would be like too atomic in my opinion i would keep the reusability of the component in mind but there are some things that really i mean you're gonna use once in your website and the navbar is one of those things so i usually have a component for my navbar i've seen people do like create the nav bar and then the nav item and like this it becomes more reusable becomes more like modular because you can add enough items etc but for this one i'd say we can go with a blank navbar so to create the most basic number i just gonna have either an element element and then enough element and inside i am just going to put an unordered list with a list item and of course i'm gonna fight a bit with vs code shortcuts not shortcuts helmet shortcuts which are super useful but you need to yeah dig a bit that's better and of course for now i'm going to have a slash route which is going to bring me home and the about which is going to bring me to the about page [Music] i'm just going to give it a class name [Music] and i remind you the css for this project is already written so basically i'm just giving that class name and this style is coming through what is left to do now well i need to import it in app.js js so i will import it as a component of course because it is [Music] and i will put it outside routes because this is something that i want to be able to see in all the pages so it's not a b it's not going to be part of the route i could have put it outside router as well and so i now see it up there and if i click to the about it brings me to the about home brings me back home so the router and the nav bar now works i think we can start uh moving on let's create the actually the the route that we are interested in which is the hero details this is going to be the route that actually is going to show the details about our hero and we are going to do the same as the about now i want to create a dynamic route and to do so in react but in all cases you need to use a column so i'm gonna do a slash and colon id and this will basically say whatever comes after the slash you take that with a key of id and that is important because i can have access to that particular parameters in the in the url we're going to render that component and we're also going to eliminate the about because we don't care about it see what i did there and of course we're gonna eliminate that yeah that link because it doesn't bring us anywhere and now whatever i write behind the slash like one two three it's gonna bring me to the hero details so routing is working and that's that's good news that's good news actually the first thing i want to build is a container component now this is a we can call it a utility component maybe you want to differentiate this but what it does is just export or it returns a div or a main which is a block element anyway with a class of container so that i can have it in my repertoire let's say actually to create something like this is quite convenient because this is super usable i can use it in another page i can use it if my website has like 10 pages instead of rewriting the same thing with the same class i just use this component now how can i represent every component that i put inside this well react for every component passes a prop that is called children and what the children are basically all the different elements that you put inside so if you put it inside an h1 or a paragraph or a paragraph or another div or another component that will be rendered inside there and you just need to specify it with the curly brackets and you just say children make sure to write it inside the curly brackets yeah like this nice once this is done i'm gonna import it like as a component of course not that it changes but just for my own reference and i'm gonna put it on the page of course i will render something inside it and for this one i'm gonna render like yeah a title or something and you can see that everything is shifted because now i have my container class [Music] you can see there is a main with a class of container next one i think is the search bar which is going to be the main entry point for our query [Music] i tend to use jsx for all the components and javascript like js for the utilities but this is really it's not really important you can still use js if you want for components it's just for me because i know that a component is a component so the search wire is just going to be a form with one input and the input is going to be of type text so that i can write on it and i think i can put a placeholder yeah i put a placeholder [Music] and that and then very simply a button this is yeah super super simple component we can put it whatever we want send search launch your your choice now that we have the input element we need to create a reference to this element because we need to basically extract this value whatever the the user is going to input inside and we can use the use ref hook in react the user of rook i find it more convenient than the use state because right now you're gonna bind it it's yeah we can call it binding with the ref keyword and so you just make a reference to this particular html element and this will grant you basically a reference to the to the element itself so you can extract its value and the typing and the update is all managed by html not by react so this is not by definition a controlled component but that's good because every time that i changed something if this were a control component every time i change something in the actual input i would need to re-render the component and i i find it so inconvenient honestly but like this i can just type something in and html is gonna take care of it i can put a title [Music] [Music] if i type something in html is gonna take care of it so that's fine and this is not controlled by by react there is not a retrigger of of components however i have access to its value thanks to the to the user refwork to the reference let's create another component called grid and this is falls in the same category as a container this is basically just an html element with a class name on it and in this case the name is pretty self-explanatory it's going to be a grid and i'm going to lay all the different results inside this grid it's quite useful to create this utility type of components at least i think it is again just remember to pass the children props and inside you can pass the children this is going to have a class name of grit and it's going to be linked to a css class with that just gives this container like a great type of layout i'm going to import it of course i'm just going to put it yeah below the search bar this is where the results are going to be displayed basically inside i need something so basically it's children and i can create whatever i'm going to create some divs and yeah you can really create whatever you want everything inside this grid is going to be shown with a grid layout like this one two three yeah very very interesting now back in the search bar because now that i have basically my own built out i need to build the most important thing which is the function to trigger when i search something basically i push the button so basically back in the home component i'm gonna import a powerful hook which is called the use state hook and it's fundamental to manage state now in react you can use state and data interchangeably they are basically the same thing and to do so when you're using the use state hook you will have access to two things the first one which i call the hero heroes is the actual variable the actual value whereas the second one the set here is it's the function to change that value and you want to use that function because otherwise you're not going to trigger a re-render of the component itself and what happens if you don't trigger a re-render well basically you know you're not going to see any changes in the in the component itself so think about a counter if you change the counter just like changing its variable you're not going to see it displayed on the on the component because the state of the component will be fixed the function provided by the use state is actually needed to change it one good news is that i can pass this function to the search bar and remember every time i pass something i can only do so like state and data and props i can only do so from parent to child there is no way for me to unless we are using maybe a context manager context api to pass the variable or the function from a child to its parent so basically i'm passing the setup function which is going to set the heroes object or the year's data to the search bar and i'm going to bind an event to the button which is the on click and i'm going to call it just end of click in this function i can actually write it inside the component itself [Music] yeah so basically just creating um an arrow function that takes the event because it's linked to the an event in this case the link the click event so first thing first i'm gonna initialize a value and as i said we have reference to the input element and to access its value we're going to select current and then value value it's the actual property of the hm html element the reason why i use dot current is because the use refwork actually returns an object and the object is like current equal something so this is an edge case so if the value is an empty string so you leave the search bar like without anything i'm not gonna waste a request for that so i just blank return otherwise i'm gonna put this in a try catch block i'm gonna say that heroes and i'm gonna await this function that of course it doesn't exist anymore but i'm gonna i'm gonna create it [Music] this function is going to take the the value and the value in this case is just going to be like the the initials the the name how does the name starts for instance the second step here is of course to set the heroes as the new the new object and i'm going to use the setter function that comes from the parent to set the heroes variable in the parent itself this is the only way you can do it if you're not using the context api if you're not using a context manager in general as in all cases when you working with a asynchronous function and the await syntax you want a try catch block and for now i'm just gonna console error the error just to have that information just to have some information now i think we need to create the fetch heroes function and i'm going to do it in a in a folder that i'm going to call utilities or utils for lib call it whatever you want i mean this is my type of organization but you can really do whatever you want [Music] this time i'm going to give it a js extension because it's not a component it's actually javascript [Music] i'm going to create an error function called fetch heroes this is not how you initialize an error function marco [Music] yeah that's better so you have a value [Music] first thing first i want to set the url so basically where do i want to make the quest to it's going to be a string leader also that i can interpolate some like different stuff and i'm going to get the api url and i'm going to get it from the environment variable and then if you remember to heat the character's endpoint we need to specify v1 then public then characters yeah i think it's in the documentation yeah right there nice so of course i'm going to get the api url from the environment variable and to do so you can access environment variable in react with the process.emv and then the name of the variable of course [Music] and if you don't remember this is basically the getaway.marvel.com which is the endpoint they suggest you use now i need three more pieces of data one is the timestamp which is a ts and i'm going to use of course the current data and i'm going to transform it to a string so that i can interpolate it like concatenate it with other stuff and this is going to be unique for every second basically then i will need my public key so the api key this is coming from the environment variables as well [Music] and last but not least i need the private key this is all that is required to make a request from the documentation this is basically everything that is required now there must be some processing because we need to basically create the hash and so we're gonna need the hash as well [Music] to generate it we're just going to use a function that we are going to create let's call it get hash and this is going to take basically the three different arguments that there needs to be that are needed to create the the hash once i had all of those i can compose my url so that i can start making my request so we will start from the base which is the euro url which i think it's a yeah yeah base url it's much better nice [Music] and then we introduce query parameters so we need a question mark the first one is the timestamp so ts is going to be equal to ts that's pretty straightforward [Music] [Music] then it's the api key which is the public key [Music] and then the hash itself [Music] and then of course we need the initials of the name because the endpoint requires it otherwise you're not gonna get anything like if you look at the documentation you have the name starts with which returns the characters that that have a name that starts with this and this is going to be taken from the value of course [Music] now that we've done everything we are going to basically make the request and we're going to use the fetch api so we're going to have a response we're going to await for the response of this request [Music] the response needs to be processed and transform into json so we're going to await this as well and we are actually going to return this data otherwise we're just gonna return a blank nothing [Music] we could also return the error actually yeah it's better maybe return the error don't don't even look at this now just return the error [Music] so now it does fail because we don't have to get hash function now to create this in a md5 digest we need the crypto.js uh package that we're going to install okay once it is it is installed i can import it in my in my utility.js.js file and i will import the mdmd5 which is all capital letters [Music] yep and i'm going to create my get ash function which will basically just return the md file i could have just used the md5 but i like to wrap it around my own function so basically just return a digest of that thing [Music] now in this case the order is important because and this actually caused me quite a few bugs and they want time the time stamp then the secret key then the public key and it's not like don't confuse like the the public key and the secret key otherwise you're not going to get the results you expect just for reference let's try on console locked data this is something that i usually always do because it gives me a good feedback if i'm receiving the the correct stuff and actually in this case it will show that i'm not receiving the correct stuff and you know why because this should be an async function and i'm not doing that yep of course we need to export it and we are using it in the search bar itself so we can import it here [Music] i must admit i'm not the best at naming things you can even put it like index.js instead maybe you save yourself some i don't know some typing and as a matter of fact now i understand that it's not working because i need an async function nice let's see what happens [Music] when i request hulk of course there is a problem [Music] now this is not really a a problem it's not a bug or anything you basically just need to restart the server because i am introducing environment variables and to and to make sure that they work you need to restart the server so that webpack can just pick them up so this is a very simple thing you just basically restart the server ctrl c then npm start again [Music] so inspecting and if i try to make a request now i see something coming in and those are my data actually and they exactly look like they how they should look like there is a 200 status code yeah and the status is okay which yeah that's it and there is also there is also the data it's a limit of 20 and these are the results so for all we have nine results and it's a list this is quite important because we can loop over it now that i know this i can basically copy paste this function i could have done it in one maybe more in a more conservative way you can if you want but now this function will actually fetch one hero so it's not gonna go by name but it's gonna have the id basically at the end of the endpoint [Music] yeah it's gonna hit that endpoint [Music] everything is basically the same and this is probably the reason why you should keep one function but yeah sue me [Music] of course we need to export it nice now we can start creating our cards which is basically where the data are going to be displayed which is basically yeah a card like the image and then the name don't don't think of anything too too complex basically in the component i'm just going to create the card component the jsx using my nd 10d shortcut [Music] i'm going to uh the link from react router now this is not really necessary because basically what the link does it it wraps your whatever element you put inside in an anchor tag but you can do it yourself but you can also do it like this so basically what i'm doing now is i'm wrapping around uh everything around the link so the image and the div and everything when you click on it it's gonna be a link [Music] i'm going to have my image inside and the source is going to be one prop so i'm gonna have to pass a source uh to this to this car component and then of course there's gonna be like a name and this is gonna be a prop as well you can think of props as parameters that you pass into a function because actually that's what they are i am passing like if you consider a component like a javascript function the probes are the parameters that you pass into the function of course there are some parameters that you don't see because react does it itself for instance children but that's another story right here i specify where the link should link to with the two parameter and of course it's going to link to the id of the the hero in this case and uh where do i want where do i take the id well this is going to be another prop so now this card is very reusable because i can basically generate an let's say an infinite number because i just need a few props so i need the thumbnail of the image i need the name of the hero that i want to display and i need the id because i need to create the route basically not create the route but link it to the to the correct route let's import a card component and right here now we need to do a few things so right now the state or the data mainly heroes it's empty there is nothing when you load the page you still haven't typed anything but i want to do something so what i'll do is that if i have heroes so if that variable is not empty i will create a like a cards element no it's not an element it's it's a variable a card's element this is going to be populated now remember that when we said in the data that we received back the results it's actually an array and we can use the map method over the array and in the map method we have access to each individual hero and we can create the card and pass the prop that we need because we have the hero id or the name in this case and we pass it like herodor name we have the id [Music] we are gonna use uh we're gonna put a key and this is something that react actually requires when you have many of the same component inside a page it requires a key and this is because for re-rendering and and keeping track of the virtual dom and then of course the thumbnail now the thumbnail it's a little bit trickier because we need to compose it and definitely not like this but we need to compose it because we need the path and the extension and in this case we also want not the original resolution but a smaller resolution so that we don't load too many pictures at once like high resolution pictures at once and if i yeah if you look at the images here we can grab the portrait fantastic which is 168 by 252 that's more than enough just to display a small thumbnail and if you remember like we need to basically append a slash then portrait fantastic then the extension so jpeg png whatever so now here i have the path i'm gonna yeah you can do it but i'm gonna put um global variable like an image size [Music] [Music] yeah that's that one correct and then i'm gonna use it there so basically i put the image size and then the dot [Music] and the extension [Music] inside the grid what i can do is verify that the cards is not none so basically if there are cards to display i will render the cards otherwise it's gonna be either like no or an empty string basically nothing remember that the heroes will be populated when we click on the search bar because when you click on the search bar you're gonna trigger the setter function which takes from the set heroes and it's gonna populate the heroes so in here i can decide basically what gets returned not it gets rendered but if i select hulk i'm gonna have a bunch of errors of course and that's yeah well that's the data now i want to give you a small spoiler here and it's the fact that i'm not returning the correct thing because yeah i'm returning the data which is the entire object and i just want to return the list because i'm actually looping through so the heroes is must be the list and i can get access to it like this so data.data.results [Music] not seeing anything don't be worried it's that i've put it in the wrong function we're going to put in the right function now but these are the things that happen very often when you're coding like small bugs they really take you a bit of time to understand basically this is the wrong function this is the fetch hero i should have put this in the fetch heroes which i'm gonna do right now [Music] now if i print it i will see the list as a matter of fact i do with nine results now the problem is another one why isn't that showing up in the grid i should have the results in the grid this is another problem with with coding so in the map function i'm using actually a curly bracket to return the cards and that is not correct i should use parentheses when i'll do the results will show up now i change the parenthesis which is what i was supposed to do and now everything should work if i look for the hulk the whole will show up and look at the ass me and hulk he is my favorite character by the way because he's a genius but he's also like beast as a monster but it's part genius part monster i mean it's he's a lovable guy but he's a beast he's a lovable guy also has a beast i mean at least for me but anyway the important thing is that when you click on it you actually have access to the id and this brings us to the next step which is going to build basically the detail page now for the detail page we can reorganize a few stuff and i'm probably gonna do everything in one page because there is there are not many components here so the only thing that i want to display i mean there are like a lot of information there is a lot of information that you can display with this because the marvel api returns a lot of stuff but uh i'll keep it simple and i will just return the image of course the name the description and the series hero belongs to or appears in to begin with i import the use params hook from react router and this allows me to get access to the parameters because if you remember i have the id inside the url parameters and i can get access to it just by the structuring yes good and using the used berms nice will it work let's test it out i always recommend you to test things when you're doing it because sometimes maybe you get a bug and you have no idea where it comes from and then you realize that the input that you should get is actually wrong so try it so i type one two three and i get one two three so i'm getting the correct thing [Music] i need to import the fetch euro because right now i want to just fetch one and if you remember it takes the id [Music] as a parameter and also i want to import two states two two hooks one is the use state and the and the other is the use effect you will see these two hooks used in combination quite often and actually in more let's say advanced project you can actually create your own hooks like custom hooks and these two will come up very often especially when you're working with apis because basically what the use state does it's keep tracks of your data the state in your component and the use effect will allow you to run a particular function dependent on variables you can make it dependent on some variables called dependencies or without any dependency so basically what it will do it will run the function once and that's it right now is the behavior that i want i want to run the function once when the component loads or when the component mounts and that's it okay so the use state is going to keep track of my state so the data in my component which in this case is the hero and remember the set hero is the function that i have to use to change the state now the question might be do i really need to to to to have the use state in this case and i'd say yes because there might be like no result from the api for whatever reason and you don't want to create like a huge breakdown because something didn't work in the request once that is done you're going to use the use effect hook which takes a function inside this function you basically run something and i'm going to run the fetch hero now fetch hero is an asynchronous function but you cannot use the async away qr syntax in use effect instead i'm going to use the dot 10 notation because after all i need an asynchronous type of events here i'm going to return the data this data need to be actually don't need to be anything because i'm going to pass it as it is and i'm going to basically set my state with the new data [Music] now what i'm doing here is actually wrong because the fetch hero already returns the data.data results but i'm going to figure it out this is very common when you're working on these things i'll always like to put some conditional stay some conditional rendering so if the hero doesn't exist just return and do anything [Music] otherwise yeah i'm going to render like the container i could have used the container the container [Music] component here but this is like a larger container and then i'm gonna basically structure the way i want to show my data [Music] i'm gonna have my image of course the way i figured i pictured it is like i want it to be responsive but when it's large i will have them side by side so we'll have two divs one in this case is the eurodetails container now one in this case is the image itself and the other one is all the text they're gonna be side by side but they're gonna have a property like a display of flex and they're gonna have a flex wrap which will make them [Music] go one above the other when the screen gets too small which makes it responsive [Music] i need to yeah i need to compose the url so basically if you remember right now i want the full resolution i don't care about other resolutions and to do so i just need to change the path to the extension that's it so basically whatever it is dot jpg or dot png [Music] then i'm gonna have another div this is gonna be side by side with the image and this is gonna be the actual hero details so basically all the text and i can have an h4 with name of course [Music] and i'm gonna show the hero name now in this case you can say marco if if i don't have any hero like if the object is still undefined this thing is going to explode and as a matter of fact it won't because if you look above i specifically said if there is no hero just return so this part will will not even be like rendered or processed if we are here it means that we have a hero so there is no risk of not having like a hero the only thing that i'm checking is that if i have a description because not all heroes have description for some particular reason and so i'm just checking if there is basically render like a fragment that is called a react fragment with the description inside otherwise you just don't don't show anything inside the details i want another div and this time is for the series again you can display whatever you want there is so much stuff in this api that it's overwhelming but you can really display whatever you want here i'm just gonna display the series and actually you can make a link out of this this series because the there are api points like for the series as well so you can really do whatever you want but here i'm just going to display plain and simple with a non-order list i'm going to have a list item for each one so if you remember like this series is a list actually it's not a list maybe i need to get into the to the items i think the series and then items and that is a list and then you have a resource uri and a name and i will have to access that name but that's fine and the results is a list as well so i'll need to do that that is wrong you'll see why so i'm going to the items now this is a list i can loop over it i have access to the to the to the map method i have access to each individual series and i have no idea what is the singular of series [Music] and i am going to render a list item just a simple list item [Music] so i get access to esto name and actually we do yeah we do need a key because yeah and for now i'm just gonna do some random stuff uh the what this does it's basically gonna give me a number between zero and a thousand which is never a thousand it is supposed to be unique now everything should work but it won't because there is one important error in this code and you'll see which one well this is not the error i was talking about this is just miss typing because i'm basically saying just description yeah no right there you need to hear a description good marco good this is not the error i was talking about the error is actually now if i yeah let's try it [Music] nothing shows up and when this happens you want to inspect your console and see the errors and it says hey i don't have anything as results why well because did you did you figure it out [Music] we need to inspect the fetch hero function we are already returning the results yeah that is the that is the error the only thing that i need to do here is just take the first element yeah that was the mistake now it should work does it let's see oh yeah it does but there are a lot of requests and that is because i forgot another thing i forgot the dependencies on the use effect so basically with an empty array you're saying there are no dependencies so you just run once but if you don't if you leave it every time you fetch new data it considers it like a dependency has changed and so it's just gonna re-trigger the the rendering it it's how react works now everything should work and look at this if you type the oak i got the name the description and the series which is amazing amazing that is the amazing spiderman and it's also responsive i mean what else can you get america's oh yeah i remember yesterday i went to see doctor strange the multiverse of madness there was this character like america something america america what vasquez something and i didn't know her she was quite interesting actually but yeah doesn't exist here what if i type strange oh yeah yeah this is not yeah okay this is not doctor strange guys and this is not dr strange because you're looking for the initials the name starts with this is actually stranger which is an interesting character i love to know more about this old bodybuilder man which looks like a magician as well but what i want is actually dr strange [Music] okay oh yeah this is network guys don't worry it's just my network that is very slow and if i type on it i can see dr strange look at this handsome guy all right all right it works nice [Music] i think that one last thing that we need to add is just the attribution maybe marvel will get like pissed if we don't do it so let's do it it's going to be very simple we can just add the footer with their attribution yeah let's just start a footer element maybe a footer component yeah and as you notice i'm putting it outside the routes so this will be displayed basically on every page i'm creating the component and inside i will just put whatever the attribution needs to be chavez america chavez did i say vasquez sorry [Music] and we can wrap around this like an h yeah an anchor tag and we can set the link to go yeah there and don't forget to put the target as blank so that you open it in another page [Music] now of course we don't see it because i didn't import it and i didn't save this file now i'm going to do it [Music] it should be somewhere there it is look at that let's just give it some styling just for good measure [Music] i don't think i'll do something yeah just maybe some text line here and some spacing on the top okay that's fine yeah and it moved nice so now if i look for anything it's gonna load inside the grid yeah and that is going to the bottom nice and that is gonna stay there for the page as well well we did our job we behaved as good api citizens the attribution is there everything is done anyway this is it i think everything is is finished is completed let me know in the comments below what do you think about this project was it too easy was like too not so easy and also what you'd like to see next uh i'll see you the next one on the next episode if you haven't done so please leave a like and share and also don't forget to subscribe i'll see you the next one ciao

Channel: BeGeos Dev

Views: 6,440

Keywords: reactjs, frontend developer, web development, API, public apis, marvel api, marvel universe, coding fun project with javascript, web developer, learn how to code, learn reactjs, begeos

Id: nH2eYCustTE

Length: 79min 54sec (4794 seconds)

Published: Sat May 28 2022