Feather is a minimal Youtube where it updates as you type in the search bar. It was built using ReactJS.
Before we do anything, we must first obtain a Youtube API key.
- Go to the developers page of Google: Google APIs
- In the search bar type: "Youtube Data API v3"
- Click on the "Enable API" button
- Create a new "Credential" with a new "Browser key" (Name it whatever you want)
Once you obtain your Youtube API key, we must configure one file called index.js inside the src folder. Copy your new key and paste it inside the constant called YTAPI_KEY between quotes.
Install NodeJS on your computer. Choose either 64bit or 32bit.
Download all the dependencies listed inside package.json with the following command:
npm install
This will make a folder called node_modules with all the necessary folders and files.
Feather uses webpack and babel to transpile the ES6 code into ES5 so the browser will know how to read it (currently, no browser supports ES6). Open up a terminal or command prompt and type the following to transpile:
npm start
This command uses the start script inside package.json to run the webpack-dev-server. Leave this running and open up your browser of choice and type the following URL:
localhost:8080
You should now see the main page of Feather. It should look like the animation above. Note: Port can be changed in ./node_modules/webpack-dev-server/bin/webpack-dev-server.js.