Welcome to BossShots!

This site is your community for sharing images of your epic boss battles from all your favorite video games. Check out the bosses others are currently fighting in your main feed, save the best ones to albums, and categorize them all by tags. Hit the live link below to get started!

Live Link

https://bossshots.herokuapp.com/

Wiki

Boss-Shots Wiki

Built With

Features

Photos

• Users can view photos and post photos on Boss-Shots.
• Users that have posted a photo can edit and delete their own photo.

Albums

• Users can view and create albums, which can add photos to that album.
• Users that created the album can edit and delete.

Comments

• Users can view the comments of a photos and post a comment.
• Users can only delete their own comment.

**

Tags

** * Users can view the tags for each photo corresponding to it. * Users can create a tag and add it to any photo. * Users can only delete tags they added a photo to.

Flask React Project

This is the starter for the Flask React project.

Getting started

1. Clone this repository (only this branch)

   git clone https://github.com/appacademy-starters/python-project-starter.git

2. Install dependencies

   pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

3. Create a .env file based on the example with proper settings for your development environment

4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

5. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

6. To run the React App in development, checkout the README inside the react-app directory.

---

IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.

---

Dev Containers (Option for M1 Users)

1. Make sure you have the Microsoft Remote - Containers extension installed.

2. Make sure you have Docker installed on your computer.

3. Clone the repository (only this branch)

   git clone https://github.com/appacademy-starters/python-project-starter.git

4. Open the repo in VS Code.

5. Click "Open in Container" when VS Code prompts to open container in the bottom right hand corner.

6. Be Patient! The initial install will take a LONG time, it's building a container that has postgres preconfigured and even installing all your project dependencies. (For both flask and react!)

   Note: This will take much less time on future starts because everything will be cached.

7. Once everything is up, be sure to make a .env file based on .env.example in both the root directory and the react-app directory before running your app.

8. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

9. To run the React App in development, checkout the README inside the react-app directory.

Deploy to Heroku

This repo comes configured with Github Actions. When you push to your main branch, Github will automatically pull your code, package and push it to Heroku, and then release the new image and run db migrations.

1. Before you deploy, don't forget to run the following command in order to ensure that your production environment has all of your up-to-date dependencies. You only have to run this command when you have installed new Python packages since your last deployment, but if you aren't sure, it won't hurt to run it again.

   pipenv lock -r > requirements.txt

2. Write your Dockerfile. In order for the Github action to work effectively, it must have a configured Dockerfile. Follow the comments found in this Dockerfile to write your own!

3. Create a new project on Heroku.

4. Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres".

5. Configure production environment variables. In your Heroku app settings -> config variables you should have two environment variables set:

   Key	Value
   DATABASE_URL	Autogenerated when adding postgres to Heroku app
   SECRET_KEY	Random string full of entropy

6. Generate a Heroku OAuth token for your Github Action. To do so, log in to Heroku via your command line with heroku login. Once you are logged in, run heroku authorizations:create. Copy the GUID value for the Token key.

7. In your Github Actions Secrets you should have two environment variables set. You can set these variables via your Github repository settings -> secrets -> actions. Click "New respository secret" to create each of the following variables:

   Key	Value
   HEROKU_API_KEY	Heroku Oauth Token (from step 6)
   HEROKU_APP_NAME	Heroku app name

8. Push to your main branch!

Helpful commands

Command	Purpose
pipenv shell	Open your terminal in the virtual environment and be able to run flask commands without a prefix
pipenv run	Run a command from the context of the virtual environment without actually entering into it. You can use this as a prefix for flask commands
flask db upgrade	Check in with the database and run any needed migrations
flask db downgrade	Check in with the database and revert any needed migrations
flask seed all	Just a helpful syntax to run queries against the db to seed data. See the app/seeds folder for reference and more details
heroku login -i	Authenticate your heroku-cli using the command line. Drop the -i to authenticate via the browser
heroku authorizations:create	Once authenticated, use this to generate an Oauth token
heroku run -a <app name>	Run a command from within the deployed container on Heroku