Labs 10 CineView
Brought to you by:
Christina Kopecky | Ari Mercado | Michelle Paredes | Dil Sombayeva |
---|---|---|---|
Deployment
Client: CineView
Server: Labs-10-movie-reviews
Table of Contents
- Tech Stack
- Analysis of Choosing Tech Stack
- Testing
- Installation Instructions
- Database in Development and Production
- Stripe
- Payment Structure
- The Movie Database
- Authentication
- Design
Tech Stack
Frontend Built Using:
-
React.js
-
Dependencies:
-
Netlify
Backend Built Using:
-
PostgreSQL (in production)
-
sqlite3 (in development)
-
Knex
-
Express
-
Node.js
-
Passport
-
Heroku
Analysis of Choosing Tech Stack
React
- 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.
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.
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.
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 thepackage.json
file). -
Add environmental variables for both the frontend and the backend.
-
Open terminal and
cd
into the server folder and runyarn install
to install the necessary node_modules on the backend. -
cd
into the client folder and runyarn install
to install the necessary node_modules on the frontend. -
Run
yarn start
on the client folder to run the frontend onlocalhost:3000
-
Run
yarn start
on the server folder to run the backend onlocalhost:5000
-
Your application is now running and can be tested locally.
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' } },
- Development database setup:
-
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' } };
- Production database setup:
-
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 });
-
-
-
Stripe
-
A Stripe Dashboard account will need to be created. Here are the instructions:
-
Click on the icon in the upper right to either SignUp/SignIn for Stripe
-
Complete the Stripe SignUp form to create your Stripe Account
-
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 onGet Your API Keys
. These keys will need to be integrated into the project environmental variables. -
There are two keys that will be needed for the project:
-
Publishable Test Key
tk-1234
example -
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 theReveal Config Vars
section under settings.- NOTE: Make sure that you are using the
Test
keys and not theLive
keys. The difference between the two is that theTest
does not create an actual charge whereas theLive
key does.
- NOTE: Make sure that you are using the
-
-
Once you have your
Test
Publishable API Key, you want to:cd front-end
cd src
cd components
cd premium
-
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
-
-
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:
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