productioncoder / youtube-react Goto Github PK

A Youtube clone built in React, Redux, Redux-saga

HTML 1.54% JavaScript 88.99% CSS 0.14% SCSS 9.33%

react react-redux redux-saga reselect jest enzyme semantic-ui-react semantic-ui create-react-app youtube

youtube-react's Introduction

1 About

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

Please help this repo with a ⭐️ if you find it useful! 😁

For updates, please follow @_jgoebel on Twitter.

2 Demo

Please watch the demo on Youtube

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.

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

Head over to the Google developers console
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.
Select your project by choosing it in the Select Dropdown directly next to the logo in the header.
Click the Enable APIs and Services button
Search for youtube data
Click on the Youtube Data API v3
Click the blue enable button
In the dashboard, click Credentials on the left sidebar
Click the Create Credential button
Which API are you using: Youtube Data API v3
Where will you be calling the API from: Web browser
What data are you accessing: Public data
Click the What credentials do I need button
Copy the API key

4.2. Providinng the API key to your application

4.2.1 Option 1 - Environment variable (recommended)

Provide your Youtube Data API key with the REACT_APP_YT_API_KEY environment variable.

Create a .env.local file (alread gitignored) with

touch .env.local

and then define the REACT_APP_YT_API_KEY environment variable which is supposed to hold your Youtube Data v3 API key in the .env.local file like so:

REACT_APP_YT_API_KEY=AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

4.2.2 Option 2 - hardcode API key

As an alternative, you could just hardcode the API key in the src/App.js file.

In general, we'd recommend going with the environment variable approach to prevent you to accidentially commiting the API key go Git.

However, if you do want to hardcode the Youtube Data API key, you can head over to the src/App.js file and paste your API key in:

const API_KEY = 'AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

4.3. Installing dependencies

To install the dependencies run

npm install

With yarn

yarn install

4.4 Running the application

4.4.1 Running locally with local env vars

You can run:

npm run dev

which will source your .env.local file and then start then run npm start.

Note that if you change the value of the .env.local file, you need to run npm run dev again so that the new env var changes are picked up.

As an alternative, you can manually source the .env.local file with

source .env.local

and then run

npm start

You can also use yarn to run the application.

yarn start

If you close the terminal, you will need to source the file again. That's why it is recommended to just run npm run dev so you don't need to think about it.

4.4.2 Running locally with hardcoded Youtube API key

If you copied and pasted the API key directly into the code, you do not need to source anything and you can just run:

npm start

If you are using yarn, you can do

yarn start

Make sure to not commit your file to Git!

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.

youtube-react's People

Contributors

Stargazers

Watchers

Forkers

dylansimowitz networkroom clchenliang halitogunc cilla123 envyserve kikojumkd rupesh13101996 svetlanakudryavtseva micsedinam tjohnson1106 aminedaouma navyblueyes wukuan405 johndpope shahzaibanwar009 ramesharr kgothatsotlaka naufaldi pratiknarola njanaskie huydeerpets anton-karlovskiy stanxii deniywn ratewar westvo jungminu chipmunk25 cloneforyou malakha solwinds richardmachado thoaihuynh2509 hakanaku1234 cornman3741512345 msahin12 tarsbase ggybbo scotch02 seoboseok sawantakash321 didindinn tbergman rcholic miladmikeal aivarasbujauskas simplymichael virtual1 varunviky7 eund3mqu3p4rric1d4l15anim1fluc7u5 pks-os ludovicose joanreyce slimbn pratik-nagdeve rindrajosia prabhakar747 mansour-j ravimadan86 4mirai herpiko saas786 suryadev12 megamcloud miguelapb35 pankajverma2378 harithzamri chengjingfeng jeanfrancoisuccelli kushnirdev98 pallavikapila d474designs ade1256 dominhsu alex-levin ritikavar koolkamalkishor delaparky pjiocnic awkward-minion krishankantray ajaypr55 claw-lang praveenksingh chronic0383 sky777666 skymach97 delta94 pthulasiram silentonecodes reisap intoxique-fuze terrorizer1980 mikesho90 andiraco marsalans jsuceir joaquin6 vaibhaw-redapple

youtube-react's Issues

Consider using Redux Starter Kit?

Hi, I'm a Redux maintainer.

I saw a link to your project today, and it looks pretty neat.

We have a new Redux Starter Kit package can simplify a lot of common Redux usage patterns, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state automatically without writing any action creators or action types by hand.

I'm hoping to add a "Usage Guide" docs page in the near future, and I've actually been looking for a moderately complex app that I can use as a basis for demonstrating the ways that Redux Starter Kit can simplify things. Youtube-React looks like the reducer logic and store setup fit that "medium complexity" level I'm looking for, although the use of sagas is not something I care about right now.

So, two thoughts:

First, wanted to let you know that I might be using some of the code as a starting point for some of the examples / tutorials I hope to write in the near future.
Second, I would love to have you convert some of Youtube-React's actual code to use Redux Starter Kit and show how to use it in your videos!

If you've got any questions or anything I can help with, please ping me @acemarke on Twitter and Reactiflux, or tag me here on Github.

.scss file doesn't get loaded

Here is my repo: https://github.com/ernestdolog/i-tube

It is alll fine except that HeaderNav.scss doesn't get loaded into HeaderNav.js. It doesn't throw any errors, just simply doesn't get loaded in the page.
What I tried until now: delete package-lock, node_modules, rebuild in any possible permutations.

Issue

The home page works fine but the videos wont load and the animation goes on forever how to solve this

Thank you

Getting Error when i build the environment for run what i do

When i setup the package i get below error "npm install"

C:\Users\Desktop\tubeclone\youtube-react-master>npm install
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: please switch to a stable version
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Users\AppData\Local\Programs\Python\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\AppData\Local\Programs\Python\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AppData\Local\npm-cache_logs\2022-03-14T14_21_55_454Z-debug-0.log

When i hit "npm start" i get below error

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module 'C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\react-scripts\bin\react-scripts.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

i use the youtube api as given in readme

Error: Can't load project demo ("TypeError [ERR_INVALID_ARG_TYPE]")

Following the instructions in the readme as-is produced an error when trying to launch the app in any browser.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.join (path.js:427:7)
    at noopServiceWorkerMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
    at launchEditorMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
    at handleWebpackInternalMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)

Bumping react-scripts from 3.3.0 to 3.4.0 solved the problem, per https://stackoverflow.com/questions/58199001/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re

How to load videos only from particular channels

Hello i am relatively new to react. After viewing the code i struggle to understand how the videos property is filled in the video grid. Could you please point me to correct direction? How can i make the api call return certain videos only from certain channels. Also can i load private videos on my channel on youtube? Thanks in advance.