{"id":15714543,"url":"https://github.com/jangbl/youtube-react","last_synced_at":"2025-04-04T14:06:50.555Z","repository":{"id":35447890,"uuid":"146862159","full_name":"jangbl/youtube-react","owner":"jangbl","description":"A Youtube clone built in React, Redux, Redux-saga","archived":false,"fork":false,"pushed_at":"2023-05-13T10:58:23.000Z","size":7099,"stargazers_count":568,"open_issues_count":30,"forks_count":171,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-28T13:07:14.963Z","etag":null,"topics":["create-react-app","enzyme","javasc","jest","react","react-redux","redux-saga","reselect","semantic-ui","semantic-ui-react","tutorial","youtube","youtube-data","youtube-data-api","youtube-data-api-v3","youtube-data-v3"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jangbl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-31T08:11:12.000Z","updated_at":"2025-02-25T18:28:40.000Z","dependencies_parsed_at":"2024-10-03T21:48:01.399Z","dependency_job_id":null,"html_url":"https://github.com/jangbl/youtube-react","commit_stats":null,"previous_names":["jangbl/youtube-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyoutube-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyoutube-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyoutube-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyoutube-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jangbl","download_url":"https://codeload.github.com/jangbl/youtube-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190231,"owners_count":20898700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","enzyme","javasc","jest","react","react-redux","redux-saga","reselect","semantic-ui","semantic-ui-react","tutorial","youtube","youtube-data","youtube-data-api","youtube-data-api-v3","youtube-data-v3"],"created_at":"2024-10-03T21:38:10.213Z","updated_at":"2025-04-04T14:06:50.532Z","avatar_url":"https://github.com/jangbl.png","language":"JavaScript","readme":"# 1 About\n\nThis repository is the source code for the epic length [Build Youtube in React](https://productioncoder.com/build-youtube-in-react-part-1/) tutorial series provided by [productioncoder.com](https://productioncoder.com).\n\n\u003ch3 align=\"center\"\u003ePlease help this repo with a ⭐️ if you find it useful! 😁\u003c/h3\u003e\n\nFor updates, please follow [@_jgoebel](https://twitter.com/_jgoebel) on Twitter.\n\n# 2 Demo\n\n**[Please watch the demo on Youtube](https://www.youtube.com/watch?v=E7wJTI-1dvQ)**\n\n[![Build Youtube in React demo video](http://img.youtube.com/vi/E7wJTI-1dvQ/0.jpg)](http://www.youtube.com/watch?v=E7wJTI-1dvQ)\n\n# 3 Screenshots\n\nUI-wise this application looks **almost exactly like the original Youtube application**\n\nIt uses real data by leveraging the [Youtube Data API v3](https://developers.google.com/youtube/v3/docs/).\n![Youtube in React Home feed](images/youtube-react-home-feed.png)\n\n![Youtube in React Watch-1](images/youtube-react-watch-1.png)\n\n![Youtube in React Watch-2](images/youtube-react-watch-2.png)\n\n# 4 How to run this application\n\nThis application loads information using the [Youtube Data API v3](https://developers.google.com/youtube/v3/docs/).\n\nTo use it, you need to set up a [Youtube Data v3 API key](https://productioncoder.com/build-youtube-in-react-part-19/) and run the project with `npm` or `yarn`.\n\n**Below, you'll find a step by step explanation**\n\n## 4.1. Getting a Youtube Data API key\n\n1. Head over to the [Google developers console](https://console.developers.google.com)\n2. 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.\n3. Select your project by choosing it in the `Select Dropdown` directly next to the logo in the header.\n4. Click the `Enable APIs and Services` button\n5. Search for `youtube data`\n6. Click on the `Youtube Data API v3`\n7. Click the blue enable button\n8. In the dashboard, click `Credentials` on the left sidebar\n9. Click the `Create Credential` button\n10. Which API are you using: `Youtube Data API v3`\n11. Where will you be calling the API from: `Web browser`\n12. What data are you accessing: `Public data`\n13. Click the `What credentials do I need button`\n14. Copy the API key\n\n## 4.2. Providinng the API key to your application\n\n### 4.2.1 Option 1 - Environment variable (recommended)\n\nProvide your Youtube Data API key with the `REACT_APP_YT_API_KEY` environment variable.\n\nCreate a `.env.local` file (alread gitignored) with\n\n```\ntouch .env.local\n```\n\nand 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:\n\n```\nREACT_APP_YT_API_KEY=AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\n```\n\n### 4.2.2 Option 2 - hardcode API key\n\nAs an alternative, you could just hardcode the API key in the `src/App.js` file.\n\nIn general, we'd recommend going with the environment variable approach to **prevent you to accidentially commiting the API key go Git**.\n\nHowever, 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:\n\n```\nconst API_KEY = 'AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n```\n\n## 4.3. Installing dependencies\n\nTo install the dependencies run\n\n```\nnpm install\n```\n\nWith [yarn](https://yarnpkg.com/lang/en/)\n\n```\nyarn install\n```\n\n## 4.4 Running the application\n\n### 4.4.1 Running locally with local env vars\n\nYou can run:\n```\nnpm run dev\n```\n\nwhich will source your `.env.local` file and then start then run `npm start`.\n\nNote 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.\n\nAs an alternative, you can manually source the `.env.local` file with\n\n```\nsource .env.local\n```\n\nand then run\n\n```\nnpm start\n```\n\nYou can also use [yarn](https://yarnpkg.com/lang/en/) to run the application.\n\n```\nyarn start\n```\n\n**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**.\n\n### 4.4.2 Running locally with hardcoded Youtube API key\n\nIf you copied and pasted the API key directly into the code, you do not need to source anything and you can just run:\n\n```\nnpm start\n```\n\nIf you are using [yarn](https://yarnpkg.com/lang/en/), you can do\n\n```\nyarn start\n```\n\n**Make sure to not commit your file to Git!**\n\n# 5 Tests\n\nThis project contains an extensive suite of tests and makes use of [Jest](https://jestjs.io/) and [Enzyme](https://github.com/airbnb/enzyme).\n\nRun all tests by executing.\n\n```\nnpm test\n```\n\nYou can also use [yarn](https://yarnpkg.com/lang/en/) to run the tests.\n\n```\nyarn test\n```\n\n# 6 Features\n\nThis application includes the major features of Youtube such as\n\n- home feed with infinite scroll\n- trending videos\n- searching for videos\n- watching videos\n- displaying comments and video details\n\n# 7 Used technologies\n\n- [React / create-react-app](https://github.com/facebook/create-react-app)\n- [Redux](https://redux.js.org/)\n- [Redux-saga](https://redux-saga.js.org/)\n- [Redux-reselect](https://github.com/reduxjs/reselect)\n- [Jest](https://jestjs.io/)\n- [Enzyme](https://airbnb.io/enzyme/)\n- [Semantic UI](https://react.semantic-ui.com/)\n- CSS Grid / Flexbox\n\n# 8 Disclaimer\n\nThis project is **solely intended for educational purposes** and is created under **fair use**.\n\nIt is **not intended to create any kind of Youtube competitor**, but to teach advanced concepts in frontend development.\n\nJust see it a nice educational project that will help you to improve your coding skills.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjangbl%2Fyoutube-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjangbl%2Fyoutube-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjangbl%2Fyoutube-react/lists"}