Creating Simple Dynamic Movie App | React + Typescript | Fetching Movies From TMDB Beginner Tutorial

[Music] hello everyone and welcome back to today's exciting tutorial in this session we are focusing on leveraging the power of react and typescript to uh seamlessly Fetch and display data from the movie database so which is this as you can see this is widely used movie database online which is free to use we can use so much uh I would say pretty much everything for free from here all you need is an API key so I'll show you how to do that and then we will create this simple react project using the typescript type safety and we will see how we can fetch the information from here and we can display it to the user by making API call so let's get started and unlock the secret of integrating tmdb data in your react project so before we dive into the coding uh we should get an API key from the tmdb database so in order to get that all you have to do is go to www.tm db.com and or you just search tmdb on Google you will find the link the first one over there and then you just go join tmdb I already have one so I can just go there and log in but if you don't have one you can join this you have to write a username uh password for yourself and this and then and then you will get an email uh confirmation email and then you will have your own account so which you can just log in later later on and then I will show you I will log in my account and show you where we can get the API key so once you log in or you signed up and then you can log in this is where you will go this is the main page your profile page that's where the link will will bring you and in here all we have to do is go into the settings once you go to the settings you will see on the left hand side we have some menu here and all we have to do is go into the API so this is my API key I don't really care if you want to use mine mine or you want to get your own API key but since my API key is been used in my other tutorials and I got a email from them that there's too many requests that have make so a free API key can only make limited requests so if your API this API key might not work for you so I will suggest you to create a new account but try with it if it works so you have to copy this and then we will go ahead and create a react Ty using the template typescript so now let's open the vs code and as you can see I am in no directory So currently I have opened the vs code and let's check where we are in the terminal so I am in my main disk so I'm going to go to desktop CD desktop and I'm going to CD into tutorials these are the previous tutorials I have so I'm going to create a react app here using the template typescript so we can use the typescript along with react so how do you do that npx create react Das app and you can name whatever you want to name it we will name it fetch actually fetch tmdb data and then to use the typescript in it we can use template typescript so we'll just wait till the app get installed a few moments later all right that took a while so now that we have the app installed we going to want to check that if we have got the typescript installed so we don't have it here what we're going to do is CD fetch tmdb data now we inside the directory we're going to do code here we will open another vs code so we are going to use this one now we are inside the directory we're going to test it with Yar start or if you're using npm you can use npm start so this is the D Mo that I've showed you before was on and now we are going to see the new app from scratch so this is how the basic react app looks like now let's get into the coding and get rid of everything so we have a blank page so let me just go ahead and close this one so we have these two now we going to clear up these extra files that we don't need [Music] and let's clean up the extra Chunk from the HTML file as well I'm going to fast forward this process so we don't waste much time on this and we can name it tmtb fetching same for Source folder we can go to the source folder we don't need this we don't need this we don't need this we don't need this we don't need this delete all of that we need to go into the app. TSX we need this stuff so we don't have nothing in here same as index or TSX now we have a blank app so what we can do now inside our app. TSX what I'm going to do first we should install the dependency that we going to use so we're going to use npm npm install AOS so exos is a library which helps you to send HTTP request so making API call that's it's really straightforward to use and really easy to use so we'll use exos otherwi you can use default fetch function with that's a built-in JavaScript function but we will use xos for this video so XS is installed next one will be npm install style components so while the both dependencies are getting a we can check them we have got styled components version 6.1.0 and xus yes and now let's go ahead and I need to cop copy my API key which is here so I'm going to copy my API key come back to this and the first thing I'm going to declare here is an variable called API key which will be this as a string and then we need a end point cuz right now we don't have an endpoint so I'm going to use popular endpoint this the thing won't give it to you you have have to search it for on Google for how many end points you can search so I'm searching from the popular movies that are currently popular on the database so https so I'm just going to hard code this API the movie db. original org sl3 slov SL poopular so they are different uh Endo like popular trending popular trending is the same thing you can have the upcoming movies here this week movies and all that so this is for that so now that we have got the API key and the endpoint set up the next thing we should do is check that if our API link is working so in order to do that we need a use state but now since we are in typescript so we have to declare our interface on what we will be fetching from that but first let's check how we can actually see what information we are expecting from this database so I'm going to create a use State here cost movies set movies which is use state so as you can see as as soon as I wrote use State the intelligence also imported it up there if I control Z you can see there's nothing here or you can do another way you can do react do use State cuz we are importing react from react or you can just do this use State use State and we will be using use effect so actually we'll do later use state which is this and now let's see if we can fetch anything from that for we need a function for that so what we're going to do is we're going to create a function const fetch data this will be an arrow function and now let's import exos from exos and inside this function we're going to make an API call xos doget so we are sending this request we're going to use template literal cuz we are sending the request to an endpoint which is the popular because this API Key by itself wouldn't do anything you actually need to tell which link you are sending that htpp request we are sending a request to this link using our API key so this uh endpoint requires an API key I'll show you how so we're going to pass popular to this and then we can do API this is not me hardcoding it this is how it goes API undor key and then you can do this using string lit we're going to pass the API key to it dot then we going to get a response from this resp my bad response and then we will store that response in result variable so response do data do results so now we're going to see if this results variable holds information that comes from this API endpoint right so what we going to do is we will call a console. log and pass the result to it of any okay what we will do is set con so that's the function why I'm getting this the is never read okay the function is okay because my bad so we're going to console do log results and then here we need use effect hook in order to perform that call when the component mounts so use effect and then we can pass it fetch [Music] data and an empty dependency so as you can see the error is going away now let's check in the console if we are getting anything from the Endo oh looks like not oh there you go so you can see we have got 20 as you can see on the previous example so you can see this array is giving me 20 movies and here's each one of the movie with their own information so if I expand this array we have first movie which is called mission impossible that recog part one second movie is The Equalizer 3 see I always said second movie not one because the array element always start on zero so we now know sort of information we need we'll see that only thing we going to need is we're going to need the title which is the movie name and we're going to need release date and we're going to need poster pad so three things we're going to fetch from this database so we can see that the title is a string poster path is also a string and where is the release date which is also a string so if you want to see fetch a number I'll fetch ID as well so as ID as a number because when we will map through it so we can do it like that so now we know what we are expecting so we are expecting we are expecting title as a string poster pad has a string ID as a number this is for typescript guys so if you were using JavaScript you wouldn't have to worry about this you will just go straight ahead and pass it you map through it and then you will print it to the D uh to to the web page and user can interact with it but now we will see how we can do how we can provide the type safety and what's the other thing date release date which will be as a string so so let's declare the interface here for the typescript so this is how you declare a interface and we will name it movies and ID we going to use it as number title is a string poster path is a string as well make sure you spell it exactly as it is over here release date is string so now we can get rid of the comment we know what we are fetching and now we need to provide this type script type safety to our uh use State function so what are we going to going to do is we going to tell it that this is movies which is an array cuz we are dealing with arrays here so that's also an array so now what's going to happen is I can do set cost movies set movies I don't know why my intelligence is not able to get it but we're going to set the result to set movies so now what happened here is I've seted the results passed it to the set movies function and now that set is to this movies so the movies access hold access to all the movies so now let's go ahead and see how we can print that information to uh to the web page so the user can interact with it all right now let's print the data we are fetching from the API to the web page so the user can see what we are actually getting in order to do that now we have information stored into the movies variable or you can say is a use State function and inside this I'm going to open movies I'm going to map through the movies since we are dealing with an array so I'm going to map through all the elements and print them out uh onto the page so movies. map I will name it movie actually I'll name it something else so I don't get confused between movies and movies items and I'm going to make a class here name it movie container for later on while I style my uh array and inside this I'm going to open H1 for the title and items dot as you can see items dot has access to whatever we are fetching here we are telling uh react that we only want these four since I have provided the types for just four things and now it has access to them so I'm going to get title and as if you go back as you can see we are getting the titles here I'm going to refresh the page so we make sure these console warnings are just there so as you can see those are going away but now we are getting a console warning which says each child in a list should have a unique key so when we are mapping we need to provide it a unique key so when we using map function we got to have a key so there are two way you can do it in this case we going to use ID as a key but in case you don't have uh a unique ID for each each of the array element you can do this you can provide it index or name whatever you want and you can go key index so if I do that you can see that warning is going away but that's not the right approach in this case in this case what we going to do is we not going to do this we going to use key items. ID so that's our unique key in this case if you refresh that warning is gone away and now we have names of the movies the next things we going to want to print is the images itself so let's go ahead this is a little bit tricky so we cannot just simply write IMG Source in and inside the source we can just go items Dot poster path so if I do that as you can see that doesn't work it doesn't work like that when we're dealing with tmdb data so what we have to do is I need to do items. poster path and and inside this I'm going to open up a image tag to the source template literal I'm going to provide it uh the link https so this is the uh the end point where we are getting the images so it's a different end point it wouldn't just get the images with the end point of popular so in this case we going to get images image. tmdb do original g/t SL p/ width so this is the width of your image so I'm going to provide it 500 for now and inside the alt what we can do is we can also pass the template literal and we can pass the movie title as alt so if the image is not available it will show that movie title of that image so items dot title poster that image poster now if we go back here and refresh this okay we didn't get so there's something wrong with my link https SL image. TM db. org. okay so this is p and if I'm not wrong it's that link is still not right https yeah that's https image. TM db. G /t/ p w okay okay okay my bad so we still need to provide it the items dot poster paath items start this should be at the end okay so now it's 100% it should get the images so if you refresh there we go now you can see we have images along with the title and now one more thing we need is the date so now we're going to print the date so for the date I'm going to come outside this and I'm going to open a p tag really easy item start release date and now we have a release date below that as you can see the width I provided is 500 so we can change that width here to 300 and you can see the image is gone smaller so you can actually change the width control the width from the end point so this is how you do it the next thing we're going to do is style our app cuz this is just all over the place so we're going to provide it some f X Box and line it properly so it look like a a really third class movies app so in order to style this I'm not going to use styled component which I told you in the beginning to install so we about that I'm just going to use plain CSS to wrap things quickly cuz I don't want this tutorial to be longer than 30 minutes so what we're going to do is we're going to come to the app. CSS and over here we have some extra code that we don't need so I'm going to open my index. HTML one side and close the terminal so now we can see we have got an CSS staring app here let's close this and now let's go ahead and try to style this I don't know why I open the HTML file it's supposed to be TSX file so we have got a class app so I'm going to which is the parent of everything so I'm going to make it display flex and I'm also going to see if it's working yes it's working you can see that so display flex and we're going to make it wrap Flex wrap so if you don't know what wrap does is basically you can see that it is going in horizontally so Flex W will actually make it come down once it cover up the whole speed uh whole width of the horizontal I mean the whole width whichever is available on the horizontal axis so it's going to be wrap so here you go you can see that it's wrapping not wrapping wrap so I'm going to close the console to have a look at how it looks like so the items are still not aligned in the middle they are still pushed to the left hand side to bring them into the center we will align items to Center and we'll check that no that didn't work so will check justify content space around so it will be this giving it even space and the Align what align item Center did is space vertically and the justify contain space uh horizontally around this so now you can see that I don't have a poster available for nowhere or maybe the title is too big but yes actually the title is too big for the first one so that's why it's doing that but we'll fix that in a minute so nowhere is here down there so it's not that so this empty space is because of this title is too long so I'll fix that as well so let's move on to the next uh one which is the title so I'm just going to call the H1 cuz it's just there and H1 will be text align Center and what else let's give it a font family Georgia so that's working and now let's do the movie container do movie movie container and the movie container is this container that holds each movie so we're going to display Flex that as well and see what happens and flex Direction column so that will back to normal okay no not yet and align item to Center okay now you can see that it's in the middle before was on to the left hand side so the next thing we going to do is call the H2 movie container inside movie container so H2 is actually my actually it's H1 so I'm calling that H1 because this H1 is targeting all the H1 inside there actually I should just give it H2 cuz it's confusing and I this let's comment out this one for now since I'm targeting it here so what I'm going to give H2 is a font family kill sense and now we are going to fix this so what we can do is white space is no WP and overflow will be hidden so it's still there still not there because we need to provide a text emphasis is this is it text actually text overflow overflow will be hidden text overflow would be ellipses and text align Center so now watch when I provide a width it will shrink that so if I give it a width of 200 pixel so there you go now everything is lined up properly and you have a dot dot dot so that means you got more title on this you can make a hover effect but I'm not going to do that here so it looking pretty much clean already yeah so let's that's done for this one and now we're going to make the image well you don't really have to make the image smaller because you can just control the image from here rather than controlling it from CSS I don't know have 200 works so it doesn't go below or it does go below 300 so you can see so there it is very simple react Plus typescript app which fetches movies from the movie database from here as you can see this one so this are these are the movies that we are fetching and we are displaying them into our page and you can see that I did not provided any of the images nothing is hardcoded here all this information you're seeing in front of you is coming from this website which is as you can see here the popular movies let's search for popular movies here yeah if you go on popular so you can see that it's exactly lined up as we are getting it here so you can see we go Mission Impossible second is equalizer third is none so there you go first one Mission Impossible equalizer none all of them are like that so that's where this data is coming from and now we have implemented that into our react app using typescript and here's the code for that look how simple it was just one page I did everything in the app. TSX but we can get rid of this so we don't I have extra codee so this is the CSS look with this minimum CSS we have got this this is how you fish the data from tmdb the next thing you can do is you can Implement a search up there search from the movie database so you can just search the movies by name there's a lot you can do with this so this is just a beginner friendly tutorial and thank you so much for watching it guys and thanks to all those 40 subscribers who have subscribed to my channel until next time

Channel: TSXpert

Views: 1,550

Keywords: javascript, typescript, react, reactjs, reactts, reacttypescript, programming, codding, studentsprogrammer, it, react projects, react typescript project, react+typescript projects, javascript programming, learn react, learn typescript with react, api, api integeration, themoviedatabse, TMDB, tmdb, react tutorials, learning react

Id: PRUTl0ihzHg

Length: 30min 0sec (1800 seconds)

Published: Wed Oct 18 2023