loading...
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.

Prerequirements
  • 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,
      }

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.

Components

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 8bithemant / 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.

Posted on Jun 4 by:

Discussion

markdown guide
 

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

 

Thank you for great suggestion as you mentioned i deployed it on heroku and the link is as followed:
youtube-clone-hemant.herokuapp.com/
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

 

The app works flawless✌️, It would've been much better if it was a bit responsive...

 

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👍

 
 

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

 

Nope , I tried and the application is working the same