Or Go to the live site and try it for yourself here
if the app does not load anything or the search function doesn't work, it is very likely the daily YouTube API quota has exceeded. There are only 5000 daily quotas for free usage, and each search costs 100 quotas. If the app doesn't work, I hope the animated GIF here can give you an idea of how it works.
- It is a clone of YouTube HomePage and SearchPage.
- HomePage displays the most popular videos of the selected country by querying data from the YouTube API.
- HomePage utilizes infinite-scroll feature, so new videos thumbnails will load when the user keeps scrolling down the page.
- Typing a word and clicking on search does a real search on YouTube API, 25 results are displayed on the SearchPage.
- This is mainly a material-ui and styled-components learning project. I aimed at making the website look as close to the original YouTube as possible.
- This project ends up turning into a state and complexity management exercise too because as the project progressed, I realized it is much bigger than I thought.
- react.js (create-react-app)
- react-router
- axios
- styled-components
- Material-UI v4
- jotai
-
Click on different countries in
ChipsBarwill display the most popular videos from that country, by querying the YouTube API. (click here to view theChipscomponent) -
Header (Navbar) has different elements in different viewport size:
- HamburgerMenuIconis hidden in mobile view. (click here forLeftContainercomponent for details) -SearchBoxis hidden in mobile view, a drawer will appear when clicked on the search icon. And (Click here to view relevant code) -SearchPagehas a different YouTube logo in mobile view. There is also a filter button next to the search box (albeit not functional). -
HamburgerMenuIconhas different roles:
- In larger screen toggles between mini and full-width sidebar; - in smaller screen opens a drawer. - Click here for HamburgerMenuIconcomponent - Content of Sidebar is different depends on the screen size. Click here to show the code that decide what Sidebar to show -
A popup menu will appear if clicked on
MoreButtonin eachVideoCard. Click here to viewMoreButtoncomponent -
A search result can be a video or a channel, they have different content and are displayed differently in the SearchPage. Click here to view the relevant code
- ChipsBar has no left and right button, and no blur out effect, unlike the original YouTube.
- From 1952px, 5 columns of video thumbnails are displayed in the original YouTube. But since material-ui has a 12-column grid layout, there's no way I can have 5 columns since 12/5 is not a whole number.
- clicking on a row in any one of the popup menus will merely close the popup menu instead of routing to the another page.
- clicking on most of the buttons won't do anything.
-
Why ChipsBar lists different countries instead of keywords?
- If using different keywords, clicking on a single chip will perform a search based on that keyword.
- A search action costs 100 quotas on YouTube API, the daily quota is limited to 5000 for a free account.
- Querying popular videos from different countries only costs 1 quota.
- So ChipsBar is designed in this way because of the YouTube API quota.
-
Why use localStorage to save query results from YouTube?
- In the process of development I needed to load the SearchPage again and again, as each search action costs 100 quotas, daily limit quickly runs out.
- Quota was running out once and I had to pause the development process. To avoid such interruption I opted to use localStorage.
- Below picture shows my API quota was quickly used up without using localStorage.
From your command line, first clone this repo:
# Clone this repository
$ https://github.com/1codingguy/react-youtube-clone.git
# Go into the repository
$ cd react-youtube-clone
# Remove current origin repository
$ git remote remove origin
Then you can install the dependencies using NPM:
# Install dependencies
$ npm install
# Start development server
$ npm start
Happy coding!
coding-guy