Photo by on Rachit Tank Unsplash So What’s the plan? 🤔 So, in this story, I am going to walk you through the whole journey of how to make your own Youtube Player. It is very easy and I promise you will be ready with your own player within an hour. That’s amazing isn't it? Our end result will look like . If you have gone through the link you might have observed a few things. The videos will be fetched directly from the youtube database through the API they have provided. And some of you might have seen the error message like Daily Limit Exceeded. Oops, it means Google has given limited access to this API. So, while creating the project make sure you don’t play too much with the API, otherwise you will have to wait for the next day 😃 for your quota to be recharged. Enough talking. Let’s make a step by step plan. Here is the for GitHub repository, in case you want to see the code while following along. this link Step by Step planning of the project First, we will get the API keys from . google developers console We will start our project using by facebook. create-react-app We will install the npm package ‘ ’. youtube-api-search For UI, we will use the famous React UI library by Alibaba. Ant Design For responsive iframe, we will use a bit of bootstrap. Finally, we will code the youtube player. In the end, we will host our project using . An awesome tool for static web publishing for frontend web developers. surge Let’s begin some real action 💯 1. Getting the API keys 🔑 First, let us get the API key. Visit and reach out to your Google developer's dashboard and search for Enable the API and move to the credentials section, You can see your API key here. You can use it anytime in your project. So we are ready with it. this Youtube Data API V3. 2. Start Project using create-react-app 😑 npx create-react-app myappcd myappyarn start That’s it. We have some starter code for our project. As soon as we hit in the terminal. A development server started and our project got hosted on yarn start localhost:3000/ 3. Let’s install youtube-api-search in our project $ yarn add youtube-api-search 4. Add antd React UI library in the project $ yarn add antd Now add at the top of antd/dist/antd.css src/App.css @import ‘~antd/dist/antd.css’; .App {text-align: center;} Now we are ready to use ant design in our create-react-app. 5. Add bootstrap CDN in ( <head></head> public/index.html ) <head><link "stylesheet" "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" /></head> rel= href= Cool, Now we are ready to start writing some react code. 6. Let us finally code the Youtube Player 😃 Now let us first add the in the file. Normally we do that using the package from npm. But you might be wondering, I haven’t told you to install the dotenv package yet. Actually, this package comes pre-installed with create-react-app. Now there is a special way of adding an environment variable in create-react-app. You have to prefix your environment variable with . Otherwise, it won’t work. Also while working on localhost you need file and for production build file will do the work. API key .env dotenv REACT_APP_ .env.development .env So, let us make these two files in the root directory of our project. And add variables like ='your_api_key_jdfe39u3cmijsd' REACT_APP_API_KEY Planning the Components for our App With App as the root component, we will need 4 more components , , , and . So make a directory name in the directory of your project. SearchBar VideoDetail VideoList VideoListItem Components src └── src └── Components Let’s Fill in these components with some life ❤ ️. App.js ( Our root Component ) There are a few things to notice in this component. First, the . It is used for a to the user. I have used the for that. Second**, handleChange() method** applied to the onChange property of . As soon as we start typing something in SearchBar the handleChange() method triggers. That’s what a is. And from inside of that handleChange() method we are calling the Now here comes the use of ‘youtube-api-search’ package. This package returns a function which we can use to make a request to the youtube API. This function accepts an object as the first argument having a key named key, there you need to provide your API key as a value. And, another key named term, which takes up the search term as value.The second argument is a callback. As soon as the request is completed this API returns the data as an array of 5 objects having the details of the video fetched. And in case of daily limit exceeded it returns a different kind of object which I have handled in try/catch block. Here I am maintaining two state variables one being videos containing the array of 5 videos, which will be displayed in VideoList component and another one being selectedVideo which will be played. Also, we have used one more state variable search which is of boolean type. In handleChange() method I have used a couple of setTimeouts to control the number of requests made to our API. It could have been done through also. But it is fine as well. That’s all with our root component. welcome() method welcome notification notification component of antd SearchBar component controlled component videoSearch() method. react-debounce SearchBar.js Here, I have used the component from antd. And, I am filling this autocomplete component with 5 videos which are coming from API on the basis of the search term. Cool, we are ready with a search bar with autocompletion feature. AutoComplete VideoList.js Here, there are two states of our video list, one when the List is empty and other when the list is filled with video suggestions. You can see in the code above, how I handled it. VideoListItem.js VideoDetail.js Here, we have simply used an iframe for playing the youtube video. And used a couple of classes from bootstrap to make it responsive. And that’s it we are ready with our Youtube player. Now Hosting with the surge If you haven’t used the surge before, let me tell you it is the easiest way to deploy your front end applications. Check this to get started with the surge. out Now how to host create-react-app using surge. First, you will have to create a production build. $ myapp/ yarn build This will make an optimized build for you. A build directory will come into the root of your project. Now you can use surge to host your App. $ myapp/ cd build$ myapp/build/ surge Hurray 🎉 🎉 🎉 🎉. You have deployed your own youtube player. If you really liked this story, please clap a few times ( maximum 50 times 😃 ). And for more stories like this follow me.
