Background: We want to be able to enter a user's Github handle and send them an email invite to our app. You'll use the Github API to retrieve the email address of the invitee.

As a registered user
When I visit /dashboard
And I click "Send an Invite"
Then I should be on /invite

And when I fill in "Github Handle" with <A VALID GITHUB HANDLE>
And I click on "Send Invite"
Then I should be on /dashboard
And I should see a message that says "Successfully sent invite!" (if the user has an email address associated with their github account)
Or I should see a message that says "The Github user you selected doesn't have an email address associated with their account."

The email should read as follows

Hello <INVITEE_NAME_AS_IT_APPEARS_ON_GITHUB>,

<INVITER_NAME_AS_IT_APPEARS_ON_GITHUB> has invited you to join <YOUR_APP_NAME>. You can create an account <here (should be a link to /signup)>.

Currently tutorials can be created by manually entering information and then manually entering videos one by one.

The playlist importer should take a playlist_id which relates to a youtube playlist and import all of the videos and associate them with a tutorial.

As an admin
When I visit '/admin/tutorials/new'
Then I should see a link for 'Import YouTube Playlist'
When I click 'Import YouTube Playlist'
Then I should see a form

And when I fill in 'Playlist ID' with a valid ID
Then I should be on '/admin/dashboard'
And I should see a flash message that says 'Successfully created tutorial. View it here.'
And 'View it here' should be a link to '/tutorials/:id'
And when I click on 'View it here'
Then I should be on '/tutorials/:id'
And I should see all videos from the YouTube playlist
And the order should be the same as it was on YouTube

• Retain the original sequence from YouTube
• Creates a video record for each video in the playlist and stores the youtube id.
• Associates each video stored in the DB is associated with a tutorial. (validate presence of tutorial id)
• Can import a playlist with more than 50 videos

Details: A user exists in the database. They have a Github token stored. Generate a token here for testing and development: https://github.com/settings/tokens

A future story will implement generating these tokens dynamically but that isn't necessary here.

As a logged in user
When I visit /dashboard
Then I should see a section for "Github"
And under that section I should see a list of 5 repositories with the name of each Repo linking to the repo on Github

• API call uses: https://developer.github.com/v3/repos/#list-your-repositories
• API call DOES NOT use: https://developer.github.com/v3/repos/#list-user-repositories
• No hashes in the view.
• Uses objects in the view to represent the Repos.
• Edge case: Make sure this shows the proper repositories when there are more than one user in the database with different tokens.
• Don't display the "Github" section if the user is missing a Github token

Details: We want to create friendships between users with accounts in our database. Long term we want to make video recommendations based on what friends are bookmarking. This card should not include the recommendation logic. That's coming in a different user story.

Background: A user (Josh) exists in the system with a Github token. The user has two followers on Github. One follower (Dione) also has an account within our database. The other follower (Mike) does not have an account in our system. If a follower or following has an account in our system we want to include a link next to their name to allow us to add as a friend.

In this case Dione would have an Add as Friend link next to her name. Mike would not have the link next to his name.

Tips: No need to work on edge cases during your spike. You'll want to research self referential has_many through. Here's a good starting point to understand the concept: http://blog.hasmanythrough.com/2007/10/30/self-referential-has-many-through. You'll probably need to do more googling but that's part of the fun ;)

• Links show up next to followers that have accounts in our system.
• Links show up next to followings that have accounts in our database.
• Links do not show up next to followers or followings if they are not in our database.
• There's a section on the dashboard that shows all of the users that I have friended
• Edge Case: Make sure this fails gracefully. If you open up a POST route to create a friendship, be sure to catch the scenario where someone sends an invalid user id. Send a flash message alerting them of the error.

Deploy your application to Heroku.

In addition to the normal deployment, you will also need to setup your Youtube api key manually for your Heroku production environment.

Set up continuous integration using Travis CI

1. Go to https://travis-ci.org/ and set up your account
2. Add this project to your repositories. You can do this from the main dashboard page by clicking the plus button next to My Repositories
3. Configure your YOUTUBE_API_KEY environment variable for your travis environment. You can find configuration for environment variables by selecting your repository from the travis dashboard and clicking More Options -> Settings.
4. Configure deployment to Heroku by filling in the api_key and app variables in the .travis.yml file. Use this guide as a reference.

You can test that your travis set up is working by pushing a commit to your repository. You should see a build triggered from the Travis dashboard. When the build is complete, you should see the change automatically deployed to Heroku.

🚔 👮‍♀️ 👮‍♀️ 👮‍♀️
DO NOT START THIS STORY UNLESS THE STORY REFERENCED BELOW HAS BEEN COMPLETED BY BOTH IN YOUR PAIR.

You should pair on story "User Dashboard: Github Repositories" and deploy it prior to working on this one.

Continue this process for all stories labeled spike first. You will learn more this way and produce better code.

🚓 💨 👮 👮 👮

Details: A user exists in the database. They have a Github token stored. Generate a token here for testing and development: https://github.com/settings/tokens

A future story will implement generating these tokens dynamically but that isn't necessary here.

No need to hit the endpoint for followings. A future story will address this.

As a logged in user
When I visit /dashboard
Then I should see a section for "Github"
And under that section I should see another section titled "Followers"
And I should see list of all followers with their handles linking to their Github profile

API endpoint documentation
https://developer.github.com/v3/users/followers/

• API call uses authenticated call: /user/followers instead of /users/:username/followers
• No hashes in the view.
• Uses objects in the view to represent the followers.

👇 👇 👇 👇
REMINDER: Don't start this story until you and your partner pair on and deploy the previous user story.
☝️ ☝️ ☝️ ☝️

Details: A user exists in the database. They have a Github token stored. Generate a token here for testing and development: https://github.com/settings/tokens

A future story will implement generating these tokens dynamically but that isn't necessary here.

As a logged in user
When I visit /dashboard
Then I should see a section for "Github"
And under that section I should see another section titled "Following"
And I should see list of users I follow with their handles linking to their Github profile

API endpoint documentation
https://developer.github.com/v3/users/followers/#list-users-followed-by-another-user

• API call uses authenticated call
• No hashes in the view.
• Uses objects in the view to represent the Github users.

Currently all tutorials are visible to anyone. We want to make tutorials marked as "classroom content" viewable only if the user is logged in.

The tutorials table has a boolean column for classroom that should be used for this story.

When I visit '/admin/tutorials/new'
And I fill in 'title' with a meaningful name
And I fill in 'description' with a some content
And I fill in 'thumbnail' with a valid YouTube thumbnail
And I click on 'Save'
Then I should be on '/tutorials/{NEW_TUTORIAL_ID}'
And I should see a flash message that says "Successfully created tutorial."

• Sad path accounted for

You will use use RuboCop to enforce style guidelines. The evaluation rubric at the end project will use it to measure code quality.

RuboCop will be installed when you bundle. Simply run bundle exec rubocop from the command line. You should have about 10 violations as you start the project. Fix these violations first. Make sure that you continue to use RuboCop throughout the project to pick up on style violations as you go. DO NOT wait until the end to fix a giant pile of RuboCop errors.

As you work through the project, you may find some of the RuboCop complaints difficult to decipher. Reference the Cops documentation and the Rails Cops documentation for more information.

Please reach out to your instructors if you find any style violations that you believe should not be enforced. Ask your instructors before editing .rubocop.yml

Background: When a user bookmarks a video the page reloads which means if they were watching a video, the video starts over making for a frustrating user experience. We can use JavaScript to make a POST request to /api/v1/bookmarks.

This story should make a fetch call to an internal API.

The app currently uses Stimulus JS and there are already examples of how to make a fetch call to an internal API. Review that code and use it as a template.

Background: Currently deleting a Tutorial will leave all of the videos in the database, meaning they will be referencing a tutorial that doesn't exist.

Use ActiveRecords dependent destroy functionality to fix this.

Background: Ability to bookmark is already built out. This story should display things that are already bookmarked. Bookmarking occurs in UserVideosController#create if you want to explore the model relationships.

As a logged in user
When I visit '/dashboard'
Then I should see a list of all bookmarked segments under the Bookmarked Segments section
And they should be organized by which tutorial they are a part of
And the videos should be ordered by their position

• Only makes one query to the database (no n+1 queries)
• Avoids loading all videos into memory

Details: We want a user to have the option to connect their Github account and retrieve a user specific token automatically.

As a user
When I visit /dashboard
Then I should see a link that is styled like a button that says "Connect to Github"
And when I click on "Connect to Github"
Then I should go through the OAuth process
And I should be redirected to /dashboard
And I should see all of the content from the previous Github stories (repos, followers, and following)

Tips: Testing this is tricky. Don't worry about testing during the spike. In fact, TDD'ing this is really tricky if you've never done it before. Get a working implementation first even when you are pairing and backfill a test. You should not try to fill out the form and click buttons on Github in your tests. Omniauth gives us a special way to test this. Use these docs as a starting point: https://github.com/omniauth/omniauth/wiki/Integration-Testing

• Uses Omniauth Github (does not hand roll the OAuth handshake)
• Tests the handshake using Omniauth Mock Auth (see above tips section).

GET /tutorials/:id

Currently the Bookmark link will redirect to the login page and stop the video from playing which leads to a rather jarring experience.

Let's display a message that says "User must login to bookmark videos." A tooltip or flash notice could be good options?