browserDock

www.browserdock.com

Psssst this is in the que to get rebuilt in react

This was a great final project to end my first ever JS boot-camp.
I’m writing this README.md years after finishing the project and it’s great looking back at
how far I’ve came and what I’ve accomplished.

My motivation?

To practice, practice, practice!

My goal was to learn client side API’s and how to work with JSON data.
I knew once I was able to access the data, the sky was the limit with what I could build.

Developer.google.com provides great documentation on how to get started with YouTubes API.
This was a great starting place for everything I needed to get started and over any hurdles.

Why I built this project?

I wanted to build an app that I could use everyday. Something that could be of good use and would keep me interested.
Not just an app to test out a new coding pattern and then it’s discarded.

But rather an app that was built around something I was already interested in.

What problem does it solve?

This app provides the user with more screen real estate when using one monitor and having 2 windows open with one being YouTube.

It also allows for a full screen uninterrupted viewing, meaning no black constraining bars on the left, right, top or bottom. This makes for a 100% screen to screen viewing experience from mobile to as large as your browser window allows.

• Provides you with a list of your subscribed channels in full, where you can easily scroll to view them all at once
• After you have selected your desired channel, a list of the channels videos are populated that you can horizontally scroll through
• Making it easy to watch one video after another without having to click out of the window

Side by side windows example - with - standard YoutTube App

Side by side windows example - with - BrowserDock

You are able to scroll horizontally through not only your subscriptions but your loaded videos.
This makes for easy browsing when multi-tasking.

How it works

In order for the app to access a user’s subscribed channels, google has a series of steps to authorize the app.

• It creates the redirect URL for Google’s authorization server and provides a method to direct the user to that URL.
• It handles the redirect from that server back to your application.
• It validates the access token returned by the authorization server.
• It stores the access token that the authorization server sends to your application and retrieves it when your app subsequently makes authorized API calls.

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();
      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

After the app is authorized and data is loaded

An example of the JSON and what can be accessed after the data is loaded.

Returned object of YouTube channel

That same channel and the returned object of info and Vidoes