Cover image for YouTube Clone Built in React JS

YouTube Clone Built in React JS

hemant profile image Hemant Joshi ๐Ÿ˜ผ ใƒปUpdated on ใƒป1 min read

Link to the React built Youtube-Clone: https://youtube-clone-hemant.herokuapp.com/

Recently I thought of diving into the ocean of ReactJS and heard about this thing, called a clone, and went through it by using youtube APIs did a small try to built React-based Youtube Clone.

  • React JS knowledge
  • Javascript
  • Material-UI
  • Youtube APIs / APIs
  • Axios (Get)

Above mentioned topics would be great if you know, to build this clone, and proudly add it to your portfolio.

About the youtube APIs

When working in this clone, you will simply need Youtube data V3 API key

Youtube APIs, have a lot of data for a single search query, for this simple clone I thought of making the default of 5 max search results.

The youtube API requires a param with your search query and a bunch of other details.

params: {
        part: "snippet",
        maxResults: 5,
        key: 'API_KEY',
        q: searchTerm,
Enter fullscreen mode Exit fullscreen mode

This is how you have to set the API to get data fro your search query.

The other steps involved are based on showing the data which we get from the API, and I did it using Material UI.


I divided the components into 4 parts, ie.

*Search Bar

  • Video List
  • Video Details
  • Video Item

Also, these components are heavily doped with Material UI.

The complete code is below in my github:

Please make sure to Star and Follow me on github,

GitHub logo bornmay / Youtube-Clone

Youtube Clone ,built using ReactJS , Material UI and the API used is Youtube V3 data API , With max search result set to 5.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you canโ€™t go back!

If you arenโ€™t satisfied with the build toolโ€ฆ

This is the first time I am sharing something on Dev Community, related to the project, and feel it hard to express.


Editor guide
attkinsonjakob profile image
Jakob Attkinson

Did you host your project somewhere?
Would like to see how it looks / feels xD

hemant profile image
Hemant Joshi ๐Ÿ˜ผ Author

Thank you for great suggestion as you mentioned i deployed it on heroku and the link is as followed:
The home page will be showing loading but you have to search your qwery.
Hope you like it
dont forget i am just 18 and if you can suggest me i would love to

manojnaidu619 profile image
Manoj Naidu

The app works flawlessโœŒ๏ธ, It would've been much better if it was a bit responsive...

hemant profile image
Hemant Joshi ๐Ÿ˜ผ Author

Yes this is great idea ๐Ÿ˜, I will surely try to learn and make it more responsive with coming time.
Love to hear more from you๐Ÿ‘

larbisahli profile image

Cloning YouTube front end with pure Sass, Javascript and React library
github: github.com/larbisahli/youtube-clon...
Demo: youtube-clone-pi.vercel.app/

hemant profile image
mavewrick profile image
Moses Benjamin

One of Stephen griders's project examples.. Did you take down the app? Its unresponsive

hemant profile image
Hemant Joshi ๐Ÿ˜ผ Author

Nope , I tried and the application is working the same

Some comments have been hidden by the post's author - find out more