Skip to content
A Youtube clone built in React, Redux, Redux-saga
Branch: master
Clone or download
Jan Goebel
Latest commit f988617 Feb 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea update dependencies to latest versions Feb 28, 2019
images
public update favicon Jan 22, 2019
src
.gitignore
README.md
package.json update dependencies to latest versions Feb 28, 2019
yarn.lock

README.md

1 About

This repository is the source code for the epic length Build Youtube in React tutorial series provided by productioncoder.com.

2 Demo

Please watch the demo on Youtube

Build Youtube in React demo video

3 Screenshots

UI-wise this application looks almost exactly like the original Youtube application

It uses real data by leveraging the Youtube Data API v3. Youtube in React Home feed

Youtube in React Watch-1

Youtube in React Watch-2

4 How to run this application

This application loads information using the Youtube Data API v3.

To use it, you need to set up a Youtube Data v3 API key and run the project with npm or yarn.

Below, you'll find a step by step explanation

4.1. Getting a Youtube Data API key

  1. Head over to the Google developers console
  2. Create a new project by clicking on Select project drop down right next to the logo. Click the New Project button an give it a speaking name.
  3. Select your project by choosing it in the Select Dropdown directly next to the logo in the header.
  4. Click the Enable APIs and Services button
  5. Search for youtube data
  6. Click on the Youtube Data API v3
  7. Click the blue enable button
  8. In the dashboard, click Credentials on the left sidebar
  9. Click the Create Credential button
  10. Which API are you using: Youtube Data API v3
  11. Where will you be calling the API from: Web browser
  12. What data are you accessing: Public data
  13. Click the What credentials do I need button
  14. Copy the API key, and paste it into src/App.js
const API_KEY = 'AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

4.2. Install the dependencies

Install the dependencies by running

npm install

If you are using yarn, please run

yarn install

4.3. Running the application

To run the application, execute

npm start

or with yarn

yarn start

5 Tests

This project contains an extensive suite of tests and makes use of Jest and Enzyme.

Run all tests by executing.

npm test

You can also use yarn to run the tests.

yarn test

6 Features

This application includes the major features of Youtube such as

  • home feed with infinite scroll
  • trending videos
  • searching for videos
  • watching videos
  • displaying comments and video details

7 Used technologies

8 Disclaimer

This project is solely intended for educational purposes and is created under fair use.

It is not intended to create any kind of Youtube competitor, but to teach advanced concepts in frontend development.

Just see it a nice educational project that will help you to improve your coding skills.

You can’t perform that action at this time.