How to build a YouTube Clone Application from Scratch using React

WAJEEHA MUSHTAQ
3 min readMar 30, 2020

--

YouTube icon for this Project

As we know that the future of the React is Fabric so today you can build an awesome project using YouTube API to enhance your coding skill as well as you’ll know how API can be work on your website. This project covers a lot of concepts such as project structure, destructing, state management, passing props from parent to child components, and API calls.

Website Link:

https://youtubecloneapp.netlify.com/

GitHub link (feel free to give it a star ⭐) –

https://github.com/wajeehamushtaq/Youtube-App

API Key — https://console.developers.google.com.

First, we need to install dependencies, so we install dependencies Axois by using this command in the terminal.

npm -i –save axios @material-ui/core

We’ll also use Material-UI in this project. It is a design system that has to react to components for easier web development. It has pre-styled components that you can use in your react project. https://material-ui.com/

In the src folder, create an index.js file and type

index.js

In App.js Folder:

App.js File

Create another folder in src folder which named is API inside there create a youtube.js file where we will import Axios

youtube.js in API folder

Create component folder so that we can add components such as search bar, video details, video items and video list in this folder

Search Bar component
Video Details component
Video Items
Video List component

--

--

WAJEEHA MUSHTAQ

I am growing in to the best version of me. | Computer Scientist | UETian | Web Developer | Graphic Designer.