Labs 10 CineView

Brought to you by:

Christina Kopecky	Ari Mercado	Michelle Paredes	Dil Sombayeva

Github	Github	Github	Github
LinkedIn	LinkedIn	LinkedIn	LinkedIn

Deployment

Client: CineView

Server: Labs-10-movie-reviews

React is a mature, robust, and industry tested Javascript library with access to loads of npm packages than can work seamlessly inside React. React will allow us to be flexible with what we want to use in our application. React’s composition patterns will allow us to fluidly separate individual tasks to individual teammates.

Netlify

Netlify has a great GUI for deployment versus the other options (Now, Firebase, surge, Heroku, etc.). Netlify also integrates with GitHub, providing an option for continuous deployment.

PostgreSQL/sqlite3

Lightweight, safe - supports concurrency.

Express-Node

Reliable documentation, good performance, compatible with React, using JS throughout this project

Heroku

The reasoning behind using Heroku is similar to the reasoning for the use of Netlify.

CSS

We decided to utilize Reactstrap and Bootstrap to take advantage of the ease of responsiveness on those components. In addition to our own custom CSS, along with the ability to customize the frameworks to our liking, it gave us the opportunity to create a design to our liking.

Back To Top

Testing

Testing of this application was completed through every stage of development using terminal logging, Chrome DevTools, and Postman.

Testing was incorporated into this application by each contributor before submitting a pull request to the master branch and after each merge ensure all elements were working together properly.

In addition, all pull requests were reviewed by one or more team members, and merges were supervised by our project manager.

The application for the most part was set up to continuously deploy to Netlify and Heroku. In order to satisfy the requirements of continuous deployment, our master branch was automatically checked upon every pull request to mae sure the new code would not break the build.

Back To Top

Installation Instructions

Environmental Variables:

##### Frontend Variables:
- REACT_APP_API= please see [TMDB](https://www.themoviedb.org/documentation/api) to get an API Key
- REACT_APP_DEV_SERVER_URI= your localhost for server side
- REACT_APP_PROD_SERVER_URI= your deployed server site
- REACT_APP_THE_MOVIE_DB_URL= TMDB Base URL
- REACT_APP_TMDB_URL= TMDB Base URL for images

##### Backend Variables:
- DEBUGGING= boolean
- REDIRECT_URI_PROD= deployed client site
- REDIRECT_URI_DEV= your localhost for client site
- PROD_CLIENT_URI= deployed client site
- DEV_CLIENT_URI= your localhost for client site
- DATABASE_URL= given variable by Heroku when using their PostgreSQL database plugin
- NODE_ENV= tells us to use production or development

Please see Google Strategy for requirements on that variable.

Back To Top

Using the Application

Requirements:

Node
Package Manager (such as Yarn or npm)
- Yarn was used to build this project.

Have Node? Have Yarn or npm? Follow these steps:

Fork and clone repo
Add an .env file to both client and server sides at the root of the folder (same level as the package.json file).
Add environmental variables for both the frontend and the backend.
Open terminal and cd into the server folder and run yarn install to install the necessary node_modules on the backend.
cd into the client folder and run yarn install to install the necessary node_modules on the frontend.
Run yarn start on the client folder to run the frontend on localhost:3000
Run yarn start on the server folder to run the backend on localhost:5000
Your application is now running and can be tested locally.

Back To Top

Database

Database in Development and Production

Development

Development database setup:


development: {
    client: 'sqlite3',
    connection: {
    filename: './data/moviereviews.sqlite3'
    },
    useNullAsDefault: true,
    migrations: { directory: './data/migrations/development' },
    seeds: { directory: './data/seeds/development' }
},

Production

Production database setup:


production: {
    client: 'pg', 
    connection: process.env.DATABASE_URL,
    useNullAsDefault: true,
        pool: {
            min: 2,
            max: 10
        },
    migrations: {
    tableName: 'knex_migrations',
    directory: './data/migrations/development'
    },
    seeds: { directory: './data/seeds/production' }
};

Back To Top

Data Models

Users Table

The ‘users’ table stores the profile for a user. A user’s row is initially created once the ‘Log In’ prompt from Google is completed.

return knex.schema.createTable('users', users => {
    users.increments('id'); // primary key called id
    users.string('googleId', 50).unique(); //official googleId of google user
    users.string('stripeId', 50).unique(); //official stripeId of stripe user
    users.string('username', 20).unique(); // username field
    users.string('name', 100); // name field
    users.string('email', 254).unique(); // email field
    users.boolean('premium_user').defaultTo(false);
    users.string('photo', 200);
    users.text('reviewOrder'); // review order field
    users.timestamp('created_at').defaultTo(knex.fn.now()); // user creation date
    users.timestamp('updated_at').defaultTo(knex.fn.now()); // last updated
});

Reviews Table

The reviews table contains the information for our reviews after a user has completed a Review Form on a movie they have seen.

return knex.schema.createTable('movieReviews', movieReviews => {
        movieReviews
        .increments('id'); // primary key called id
        movieReviews
        .integer('movieId') // movieId must be a    non-negative number
        .notNullable(); // movieId field is required
        movieReviews
        .integer('userId')
        .unsigned() // userId must be a non-negative number
        .notNullable() // userId field is required
        .references('id') // reference primary key 'id' from users table
        .inTable('users') // reference users table
        .onUpdate('cascade')
        .onDelete('cascade') // when you delete a row on the parent table, the related "children" rows on the other one are deleted.
        .index(); // adds an index to a table over the given columns
        movieReviews
        .string('reviewer')
        .notNullable() // name field is required
        // .foreign('reviewer') // adds a foreign key constraint to movieReviews table for reviewer column
        .references('email') // reference 'name' from users table
        .inTable('users') // reference users table
        .onUpdate('cascade')
        .onDelete('cascade') // when you delete a row on the parent table, the related "children" rows on the other one are deleted.
        .index(); // adds an index to a table over the given columns
        movieReviews.text('textBody', 5000).notNullable(); // textBody field limited to 500 chars
        movieReviews.integer('rating'); // rating field
        movieReviews.timestamp('created_at').defaultTo(knex.fn.now()); // review creation date
        movieReviews.timestamp('updated_at').defaultTo(knex.fn.now()); // review last updated
    });

Back To Top

Stripe
- A Stripe Dashboard account will need to be created. Here are the instructions:
  1. Click on the icon in the upper right to either SignUp/SignIn for Stripe
  2. Complete the Stripe SignUp form to create your Stripe Account
  3. Once you have your account created, please proceed in going into the dashboard and click on the Home section on the left side and click on Get Your API Keys. These keys will need to be integrated into the project environmental variables.
  4. There are two keys that will be needed for the project:
    1. Publishable Test Key tk-1234 example
    2. Secret Test Key (need to click on and authenticate to review, if authentication successful, key will be revealed) sk-1234 need to be added to the Heroku Database in the Reveal Config Vars section under settings.
      - NOTE: Make sure that you are using the Test keys and not the Live keys. The difference between the two is that the Test does not create an actual charge whereas the Live key does.
  5. Once you have your Test Publishable API Key, you want to:
    1. cd front-end
    2. cd src
    3. cd components
    4. cd premium
  6. Click on PayButton.js add your test publishable key to
```
    this.state = {
        publishableKey: (insert publishable key here),
}
```

See below example of PayButton.js file:

class PayButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            publishableKey: 'insert publishable key here',
            id: null,
            name: '',
            email: '',
            username: '',
            stripeId: ''
        };
    }

You can view your payment transactions from the Stripe Dashboard once you have configured the API keys into the project.
- Payment Structure
  
  A person who is searching for a movie or reads reviews does not need to make any payments for our service
- Users who wish to post a movie review have the following options:
  - Year long subscription for $9.99 per year
  - Month-long subscription for $0.99 per month

Back To Top

The Movie Database

The Movie Database (TMDB) is our third party API that handles the management of all film data. All film-related metadata used in CineView, including synopses, release dates, trailers and poster art is supplied by TMDb. CineView uses the TMDb API but is not endorsed or certified by TMDb.

To use The Movie Database as a developer, you need to enroll in an Account and receive an API_KEY. Instructions to apply for an API_KEY are provided here. When API_Key is obtained, place it in the frontend .env file you have created.
Authentication
- This application uses Passport-JS to handle OAuth. One strategy was used in this implementation:
  - Passport Google Strategy
  To utilize a strategy in our application, we had to have certain variables in place in our backend .env file:
```
    GOOGLE_CLIENT_ID=enroll for a Google Developer Account to Obtain an ID.
    GOOGLE_CLIENT_SECRET=enroll for a Google Developer Account to Obtain a Secret. 
    REDIRECT_URI=your redirect after login *Google Strategy only*
```
  If using an .env file, ensure that there are no spaces or quotes within the file. Simply Replace the name of each value with the value received from your Strategy's developer account.
Design

Back To Top

Name		Name	Last commit message	Last commit date
Latest commit History 1,146 Commits
client		client
server		server
.DS_Store		.DS_Store
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
Procfile		Procfile
README.md		README.md
netlify.toml		netlify.toml
package.json		package.json
pull_request_template.md		pull_request_template.md
thumbnail.png		thumbnail.png
yarn.lock		yarn.lock

License

BloomTech-Labs/labs10-movie-reviews

Folders and files

Latest commit

History

Repository files navigation

Labs 10 CineView

Brought to you by:

Deployment

Table of Contents

Tech Stack

Frontend Built Using:

Backend Built Using:

Analysis of Choosing Tech Stack

React

Netlify

PostgreSQL/sqlite3

Express-Node

Heroku

CSS

Testing

Installation Instructions

Environmental Variables:

Using the Application

Database

Database in Development and Production

Development

Production

Data Models

Users Table

Reviews Table

Stripe

You can view your payment transactions from the Stripe Dashboard once you have configured the API keys into the project.

Payment Structure

Users who wish to post a movie review have the following options:

The Movie Database

Authentication

Design

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 9

Languages

Packages