Simple YouTube player on React

Tools Used

• react-js [Ref]
• YouTube Data V3 API [Ref]
• Semantics UI (for CSS) [Ref]

Running the project

In the project directory, you can run:

npm ci

Installs the required packages in node_modules directory from the package-lock.json file.

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.

React Components

main file: index.js

• App
  • SearchBar
    • Spinner
  • VideoDetail
  • VideoList
    • VideoItem
  • youtube - Scaffolding for easily calling YouTube API using Axion

Usage

1. Type any keyword in the input field
2. Click on 'Search' button or press 'Enter'
3. 5 videos loaded from YouTube and 1st one selected by default
4. Click play or select a different video to play

Credits

Stephen Grider Modern React with Redux [2020 Update]