hashmaster3k / viewing_party

A basic web app to learn API consumption

Viewing Party

This project was created as a project for the Turing School of Software & Design. The purpose is to build foundational knowledge of API consumption, implementing WebMock and VCR for API testing, utilizing the facade and service design patterns, build self-referential relationship, and deploy continuous integration for the web app. We will also strengthen knowledge of TDD, perform refactoring, and stylize the web pages.

This project was completed by Hash G and Nico R

To see a live version click here -> https://dry-tor-99046.herokuapp.com/

Summary

• Getting Started
• Setting Up API
• Testing
• Deployment

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

This project was built using ruby version 2.5.3 and rails 5.2.4.3. Ensure that you either install these versions or change the versions in the Gemfile.

Prerequisites

This project uses postgresql for database management. Please download the Postgres.app and follow the documentation to also install the CLI tools.

In addition to the standard rails gems, we used the following gems: rspec, capybara, simplecov, pry, shoulda-matchers, webmock, vcr, faraday, figaro, bcrypt, and rubocop.

• RSpec - Test Suite
• Capybara - Additional Testing Tools
• SimpleCov - Test Coverage
• Pry - Runtime Dev Console
• Shoulda Matchers - Additional Testing Tools
• WebMock - API Testing Tool
• VCR - Additional API Testing Tool
• Faraday - API Consumption
• Figaro - API Key Protection
• BCrypt - Password Protection for Authentication
• RuboCop - Linter (optional)

Please follow the documentation for each gem for proper installation and functionality. Note: Most needed files/code are already added (rails_helper, spec_helper, etc.)

Installing

If you plan on making your own changes and intend to push it back up, fork this repository then clone it into your directory of choice. In the main project directory, delete the file Gemfile.lock. Then, in your terminal, from the project directory run bundle install to install all the needed gems.

To setup the database from your terminal, run the following commands:

rails db:create

rails db:migrate

rails db:seed

This will create your database, migrate the needed resources then seed the database with starting data.

Setting up API

Visit The Movie Database API to create an account and obtain an API key. Refer to the Figaro gem documentation to create your own application.yml and place your key as follows:

TMDB_API_KEY: 'INSERT KEY HERE'

Running Tests

From your main directory in the command line, type bundle exec rspec. This will run all tests located in the /spec directory. If any errors or failures occur please create and issue.

To run specific test files, include the file path.

bundle exec rspec spec/features/shelters/index_spec.rb

Deployment

Before full cloud based deployment, check that the web app is working locally by opening a new tab in terminal and run the command rails s. This will run a local server which you can connect to. Type localhost:3000 into your web browsers address bar and hit enter. You should see the root page with a welcome message and a login field.

Cloud deployment was done with Heroku. Visit the "getting started with rails" on how to deploy the web app to Heroku.

viewing_party's Issues

Send Viewing Party Event Details via Email to Invited Friends

Explore ActionMailer for sending emails.

When a user creates a viewing party and invites friends use ActionMailer to send an email with the event details to each friend.

ActionMailer Docs

Welcome Page

When a user visits the root path they should be on the welcome page which includes:

• Welcome message
• Brief description of the application
• Button to Log in
• Link to Registration

Details: Implement basic auth in the application allowing a user to log in with an email and password. The password should be stored in the database using bcrypt.

Deploy with different service

Explore using a different service for deployment.

Services to Consider:
Goolge Cloud
AWS Elastic Beanstalk

You can also look into another option, but please talk to your instructors about which service you will be choosing.

RuboCop

You will 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 install. Simply run bundle exec rubocop from the command line to see if there are any violations. Run 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 RuboCop documentation and the RuboCop Rails 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

Implement Chat Functionality with ActionCable

Explore ActionCable and WebSockets

Implement chat functionality within your application so that 2 users can chat with one another.

ActionCable Docs

Write Front-End JavaScript

Explore front end JavaScript within your Rails application.

Currently, whenever we click "Find Top Rated Movies" or "Find Movies" the user is redirected to a new page. Implement JavaScript so that instead of redirecting to a new page the results will be displayed on the current page without refreshing.

Movie Details Page

As an authenticated user,
When I visit the movie's detail page,
I should see

• Button to create a viewing party

Details This button should take the authenticated user to the new event page

And I should see the following information about the movie:

• Movie Title
• Vote Average of the movie
• Runtime in hours & minutes
• Genere(s) associated to movie
• Summary description
• List the first 10 cast members (characters&actress/actors)
• Count of total reviews
• Each review's author and information

Details: This information should come from 3 different endpoints from The Movie DB API

Add Test for Sign In

Add CSS for parties on dashboard

Add styling for parties on dashboard to better match wireframe

Dashboard: Viewing Parties

As an authenticated user,
I should see the viewing parties I have been invited to with the following details:

• Movie Title
• Date and Time of Event
• Status of Invited

I should also see the viewing parties that I have created with the following details:

• Movie Title
• Date and Time of Event
• Status of Host

Add test for facades, services and poros

Dashboard: Discover Movies

As a authenticated user,
When I click on the "Discover Movies" button,
I am redirected to a discover page.

Continuous Integration with Travis CI

Go to https://travis-ci.org/ and set up your account.

Add the project to your repositories. You can do this from the main dashboard page by clicking the plus button next to My Repositories

Configure your API keys that are environment variables for the travis environment. You can find configuration for environment variables by selecting your repository from the Travis dashboard and clicking More Options -> Settings.

Configure deployment to Heroku by filling in the api_key and app variables in the .travis.yml file.

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

Dashboard: Friends

As an authenticated user,
I see a section for friends,
In this section, there should be a text field to enter a friend's email and a button to "Add Friend"

Scenarios:

1. If I have not added any friends there should be a message. "You currently have no friends".

2. If I have added friends, I should see a list of all my friends.

Details: Users should be able to add a friend by their email address, as long as, the friend is a user of our application and exists in our database.

Example:
Bugs Bunny and Lola Bunny are users of our application, but Daffy Duck is not.

1. When Bugs Bunny enters [email protected] to add friend it will be successful and Lola should show up as Bugs Bunny's friend.
2. When Bugs Bunny enters [email protected] to add friend it should give an error message that the user does not exist.

Tips: You'll want to research self-referential has_many through. Here is a good starting point to understand the concept. You will probably need to do more googling but that's part of the fun ;)

• Write a happy path test
• Write a sad path test

Deploy to Heroku

In addition to the normal deployment, you will also need to set up any API keys manually for your Heroku production environment.

Consume additional API endpoints

Explore additional endpoints that could be consumed from The MovieDB API. Choose 2 additional endpoints to consume and display within the application.

Registration Page

When a user visits the '/registration' path they should see a form to register.
The form should include:

• Email
• Password
• Password Confirmation
• Register Button

Once the user registers they should be logged in and redirected to the dashboard page

Refactor Routes & Pathways

Find areas where routes are used manually and update with pathway

New Viewing Party Page

As an authenticated user,
When I visit the new viewing party page,
I should see a form with the following:

• Movie Title (that is un-editable)
• Duration of Party with a default value of movie runtime in minutes
• When: field to select date
• Start Time: field to select time
• Checkboxes next to each friend (if user has friends)
• Button to create a party

Details When the party is created, the authenticated user should be redirected back to the dashboard where the new event is shown. The event should also be seen by any friends that were invited when they log in.

Discover Page

As an authenticated user,
When I visit the '/discover' path
I should see

• Button to Discover top 40 movies

Details When the user clicks on the top 40 button they should be taken to the movies page.

• A text field to enter keyword(s) to search by movie title
• A Button to Search by Movie Title

Details When the user clicks on the Search button they should be taken to the movies page

The movies will be retrieved by consuming The MovieDB API

Dashboard

As an authenticated user,
When I visit '/dashboard'
I should see:

• 'Welcome <username>!' at the top of page
• #9 A button to Discover Movies
• #10 A friends section
• #11 A viewing parties section

Movies Page

As an authenticated user,
When I visit the movies page,
I should see the 40 results from my search,
I should also see the "Find Top Rated Movies" button and the Find Movies form at the top of the page.

Details: The results from the search should appear on this page, and there should only be a maximum of 40 results. The following details should be listed for each movie.

• Title (As a Link to the Movie Details page)
• Vote Average of the movie