by Jen Brissman and Sean Montgomery| brissman514@gmail.com | seandmontgomery@gmail.com

What is POW? - Demo Video

POW - otherwise known as “Paint on Walls” is a communal photo sharing platform for lovers of street art.

Table of Contents

• Tech Stack
• Testing
• Features
• Install
• Looking Ahead

Tech Stack

• Frontend: JavaScript | HTML5 | CSS | Bootstrap
• Backend: Python3 | Flask | SQLAlchemy | Jinja2
• APIs: Cloudinary | GoogleMaps
• Database: PostgreSQL

Testing

For our tests, we used Coverage.py as it allows you to see your test coverage.

1. To run coverage, run this command:

$ coverage run -m unittest discover.

2. To see the coverage report, run:

$ coverage report -m.

Features

Login | Gallery | Location | View | Search | Upload | Logout | Database

Login and Registration

Users can register and create an account which will give them access to the public street art gallery, as well as the option to upload photos of their own. We have hashed the user's credentials with sha256 to add security for the user. We built Pow with Flask - creating a service that uses a Postgres database interfaced with the SQLAlchemy ORM.

Gallery

After logging in, the user will be brought to the public street art gallery. This gallery represents the full database of photos uploaded by the POW community. Each photo is displayed on a responsive card that we have styled using Bootstrap and CSS. Hover over an image and the card flips to display information about the specific street art piece on the back. This information is being dynamically displayed using Jinja templating and includes the title and artist, as well as links to a full-size image of the piece, and its location.

Location

Clicking on the "location" button opens Google Maps to show exactly where that piece of art is located.

View Image

Clicking on the "view image" button opens a full size view of the particular piece of art.

Search

To filter through the cards, we developed a search feature by adding a JavaScript event listener that evaluates keystrokes to hide the cards that do not contain text matching the query string.

Upload Image

To upload a photo to the community library, we built a form which takes in the title, the artist, and the location using Google’s Map & Places API with their Place Autocomplete service. For the image file itself we implemented Cloudinary’s media management API, which returns the url for the image uploaded to my database.

My Pics

Clicking 'my pics' in the nav bar will apply a filter on the galley that shows on your uploads, where you can see the specific photos you have added to the Pow community.

Log Out

Data Model

Looking Ahead

Moving forward, we want to implement Amazon’s Rekognition feature so that the search function can search characteristics of the images, not just a string search of the information in the database/information displayed on the cards.

Install

Running POW

1. Clone this repository:

git clone https://github.com/jenbrissman/POW-PaintOnWalls.git

Optional: Create and activate a virtual environment:

pip3 install virtualenv
virtualenv env
source env/bin/activate

2. Install dependencies:

pip3 install -r requirements.txt

3. Create environmental variables to hold your API keys in a secrets.sh file. You'll need to create your own Cloudinary API keys:

export cloud_name="create your own cloudindary name/account"
export cloud_api_key="once you do this they will provide you a key which you will put here"
export cloud_api_secret="use your own secret of course, shhh"

Here are some relevant docs for creating and set up an account with Cloudinary: Create account | Get API Key and Secret

4. Create your database & seed sample data:

createdb pow
python3 seed.py

5. Run the app on localhost:

source secrets.sh
python3 server.py