ksiman14 / stackathon

FS-App-Template

Setup

To use this as boilerplate, you'll need to take the following steps:

• Don't fork or clone this repo! Instead, create a new, empty directory on your machine and git init (or create an empty repo on Github and clone it to your local machine)

• Now you will have to add the fs-app-template as a remote and merge it into your own repository.

git remote add boilermaker https://github.com/FullstackAcademy/fs-app-template.git
git fetch boilermaker
git merge boilermaker/main
git branch -m master main

Customize

Now that you've got the code, follow these steps to get acclimated:

• Update project name and description in package.json
• npm install
• Create two postgres databases (MY_APP_NAME should match the name parameter in package.json):
• These commands will create both your development and test databases

createdb <YOUR APP NAME HERE FROM package.json>
createdb <YOUR APP NAME HERE FROM package.json>-test

• By default, running npm test will use your test database, while regular development uses development database

Start

Running npm run start:dev will make great things happen!

• start:dev will both start your server and build your client side files using webpack
• start:dev:logger is the same as start:dev, but you will see your SQL queries (can be helpful for debugging)
• start:dev:seed will start your server and also seed your database

Heroku

1. Set up the Heroku command line tools
2. heroku login
3. Add a git remote for heroku:

• If you are creating a new app...

  1. heroku create or heroku create your-app-name if you have a name in mind.
  2. heroku config:set JWT=<your secret here!> to set a secret for JWT signing

Database Setup

3. heroku addons:create heroku-postgresql:hobby-dev to add ("provision") a postgres database to your heroku dyno (This creates your production database)

4. heroku config:set SEED=true to get heroku to sync and seed your database

5. note everytime your app restarts, the database tables will be dropped and re-created. To avoid this you can config:unset SEED

• If you already have a Heroku app...

  1. heroku git:remote your-app-name You'll need to be a collaborator on the app.

Now, you should be deployed!

stackathon's Issues

As a VIEWER, I want to see a graph of most popular genres

• Victory.js chart
• Redux thunk to fetch chart data
• backend route to compile and send chart data
• Animate and link each genre slice to list of movies of that genre

As a VIEWER, I want to see at least 2 interactive charts on the single movie view

As a VIEWER, I want to have a random title recommendation shuffled every 30 seconds

• create component for random recommendation display
• link recommendation to single movie view
• create redux store for current random rec
• create backend route to serve up random movie

Deploy to Heroku

• create Heroku site for app
• seed Heroku database with data

As a VIEWER, I want to be able to use the single movie view to find where the movie is streaming

• create button in single movie view "Where Can I Watch?"
• create thunk to make axios call to external api
• render options on screen in presentable manner

Integrate THREE.js with React

• get basic THREE.js tutorial working on app
• deploy to Heroku and check it works there

As a VIEWER, I want to be able to paginate through movies on the all movies view

• implement pagination on All Movies page

Create boilerplate

• download FSA boilerplate
• create new github repo and push boilerplate

As a VIEWER, I want to see a graph of most popular movies by genre

• Victory.js chart
• Redux thunk to fetch chart data
• backend route to compile and send chart data

As an ENGINEER, I want a presentable site for my resume

• Style Navbar component
• Style Home component
• Style Random Rec component
• Style All Movies component
• Style SingleRec component

As a VIEWER, I want to see the 5 most popular movies on the home page

• backend route to fetch most popular movies
• most popular movies in redux store
• action in redux store to set most popular
• component display of most popular movies