waidhoferj / csc-308-309-project

GeoArt

A web app for public art creators and admirers.

Features include:

• An evolving city map filled with artistic hot-spots
• A scavenger hunt experience that brings people into town to explore art in its native context
• A community to discuss art, make connections and build shared portfolios

View the Design Mockup

Getting Started

1. Clone this repo: git clone https://github.com/Waidhoferj/CSC-308-309-Project.git
2. Follow setup instructions for frontend and backend
3. With both the frontend and backend development servers running, open http://localhost:3000 to view the app in the browser.

Resources

• Frontend
• Backend

Style Guides

Python Files

Usage:

• Run "pipenv install" then "pipenv shell" in backend folder
• "pycodestyle file.py" with no errors for each file added to git before commiting

Javascript Files

Usage:

• Installation Guide

Continuous Integration

When a PR is added to the repo, the following checks are run:

• Netlify site config and build checks
• GraphQL test suite located in testing.py

Upon merge:

• The frontend folder containing the React app is deployed on Netlify
• The backend folder containing the GraphQL API is deployed to Heroku.

Acceptance Tests

Acceptance tests are important for defining user flows in a way that all stakeholders can understand. We used the Gherkin Language to describe the user flows and Cypress to create automated tests around the spec.

• Acceptance test documents exist in an online document
• Automated tests can be found in the integration folder

To run Cypress tests:

1. Navigate to the frontend folder
2. Run npm run cypress
3. When Cypress boots up, select the test you want to run.

Unit/Integration Tests

Unit and integration tests are crutial in confirming the functionality of our program. We maintain a testing file on the backend that contains all of our unit tests for our GraphQL api.

• See our wiki for details about unit testing coverage for the backend: https://github.com/Waidhoferj/CSC-308-309-Project/wiki/Unit-Integration-Test-Coverage

csc-308-309-project's Issues

Connect Art Submission Page to the Server

Allow users to upload new artwork to the server. Data uploaded should include:

• Images: array of base64 string images
• Title: string
• Description: string
• Rating: float

Result should be a new artwork object that can be fetched from the server

Discovered Art Display Page

A page to show artwork that has been discovered by the community. It is what the user sees when they follow the compass and arrive at the artwork.

• Display photo up top
• Art description
• Metrics
• Rating component (should already be in project)
• Links out to rating, discussion and report page

Create Group Page

display group info:

• Metrics
• Bio
• Activity
• Artworks at top
  See the framer document for layout

Refine User Stories

Write more relevant and detailed user stories now that we have a more clear direction of the project.

Art Map - Clicking on artworks while tracking directions causes artwork to disappear from map

Steps to reproduce:

• Go to map page.
• Click on artwork marker
• Click "Lets Go" to start navigating
• Click on other artwork markers while in navigation phase

I think we can filter out all other artworks when we're navigating to a specific one.

Modify User Metrics

Condense works_found and works_created into just works_found on both the frontend and backend.

Create Ratings mutation

Create a mutation for the ratings.

Create common hooks for users and photos

Create a common method for developers to access user info and taken photos from any component

Discussion Section on Art Page

Create the front end view of the comments of an artwork. This includes the submission box and viewing of other comments. This requires the frontend view and the backend saving and getting of comments if not already implemented.

Add GraphQL docstrings

Add docstrings to our api_types.py objects. The docstring will show up in the documentation side bar of the graphQL interface and make it easy for everyone to understand what each object does in plain english.

For each object, do something like this:

class UserType(MongoengineObjectType):
"""
GeoArt user profile...
"""
...

And ensure this shows up in the GraphQL documentation sidebar.

Create Compass Page

Create the compass page from the Design Mockup. Should have:

• User distance from destination
• Direction of destination from perspective of the user (You can do this with a dot on a circle, the 3D arrow is hard to do)

Resources:

• Simple Compass in JS
• JS Geolocation API

Create New Account Page

Add a form page that allows users to sign up for the app and hook it to the backend. After signing up, the user should be navigated into the app and signed in automatically.

Art Submission Page

Create the page detailed in the wireframe. Minimum spec:

• Page title
• Input Artwork Name
• Input Rating
• Input Description
• Submission button

Connect Art display page to server

Pull down artwork from server when the user navigates to the Art Display page. You can identify the artwork via the url: artwork/:id. With this id, reach out to the server and fetch the correct artwork. Use data to populate fields on the page

Add in app navigation

Create a menu bar so that users can navigate between different screens without using the URL.

Upload art functionality

Define art submission form questions
Be able to submit a mock art location form to the database to be saved

expected time: 3 hours

Map Screen: Fetch actual art data

Be able to get art locations from the database and display at least the title, description, and location on the frontend

Additional attributes of the location like pictures and comments can be saved for another issue

Upload Photos to Database

• Be able to accept a jpg from graphql api and store it in the database
• Retrieve image
• Delete image

Profile page

Create a profile page where users can:

• View art that they have discovered
• View metrics (total number of discoveries, percent of art discovered in city)
• Settings (delete profile, edit info)
• Bio
• Followed artists?

Research GraphQL and Graphene

Look into GraphQL and Graphene and come back to the team with:

• A toy example with code.
• An explanation of the GraphQL language features
• Why we should/should not use this
• Other options
• General idea of how we would go about our implementation

Manage users in database

Have the ability to

• Create Users
• Update Users
• Delete User

through graphene and database

expected time: 5 hours

Create in-depth user stories

Take some time to brainstorm about use cases for our application and write them as user stories.

Put the stories in the comments.

Implement Mongo Database

1. Get familiar with mongoengine
2. Take the datatypes defined in the design document and build it into a mongoengine schema. This has been mostly done already here.
3. Create a mongodb instance and connect it to mongoengine.
4. Make sure you can create, update and delete objects in the database using mongoengine

Resources:

• mongoengine getting started

Update Map Page for Specific Locations

• Display artworks as individual points
• Differentiate between prediscovered art and new art
• Add user location with heading
• Add card that displays artwork name and rating when undiscovered art is clicked
• Send user to artwork page when discovered artwork is clicked.

Art Display Page

We are expecting to be able to only have the user be able to see a piece of art when they are within a certain radius of it. This means that we need to define a separate page from the "compass" one when given certain conditions. If these conditions aren't met then this page will no longer be shown.

Note: It is possible that the user could be within two pieces of art at a time. Decisions should be made on how to handle this.

Add gateway from Art Map to Artwork page

When within a certain distance of an artwork, allow users to transition to the Artwork page

Create Update Individual Metrics Mutations

Create the mutations that increment all the metrics by one. Possibly with enums and two functions for Users and Artworks. Or with individual functions for each metric.

Additionally: Refactor artwork so that frontend can see number of reviews

Create Ratings Mutation

Create the backend mutation for when a user is adding a comment, rating, or tag to an already created (and discovered for current user) artwork

Screen Layout

Map out screen layout and UX flow. The screens don't have to have a clear design, but they should have a description of what happens on each screen and how they connect to each other.

Research Mongo GeoDatabase

• How do we store and retrieve coordinates?
• Does this have any restrictions on our schema?

Build GraphQL Schema in Graphene

Make functions for CRUD operations of every item in data design doc

Create Login Page

• Create a form page that allows users to log into the app

Research local art scavenger hunt functionality

Create a basic feature example that allows users to follow a compass to a given location. Should include:

• some indicator of direction
• some indicator of distance

Present the key findings to the group.

Report Content Page

Create a page that allows users to report an artwork as inappropriate.
Should have:

• Description
• A dropdown category: duplicate, inappropriate, not art.
• Submit button

useLocation hook

• When user moves, the hook will return an updated heading and position
• handle user denying location access

Add support for local development server

We have a mongo mock server in the Research folder. It would be nice to be able to use the mock server in development and cloud server for production. We could use a conditional flag when the backend starts up to determine which server to use. For example python app.py -d to user the development server.

• Add mongo mock to the backend project
• Parse -d arg from the command line
• Conditionally choose server based on presence of -d
• Ensure both server types work with new setup

Simple Map Screen

• Show that we can load a map of the world
• Position of user in world
• Draw locations of key areas from [longitude, latitude] pairs

Highly recommend using react-mapbox-gl

Camera Page

Create camera page:

• Take photos
• Upload Photos
• View photos

Need a way for users to save images to database

Users that are able to reach the street art in their area should be able to post an image of the art and have them be given credit for "hunting" the piece down.

Submit new review on art page

Create a page that allows for submitting reviews for already discovered art.

Descriptive design mockup (define expected data and data relations)

In order to know how to structure and organize our data, we need to get a reasonable idea of what we want to keep track of. We also want to be able to estimate how the front end and logic to interact with the data.

Add OAuth to application

Research and add authorization protocol to application to remember users' credentials. Allow queries to backend.

Create Sign In Query

Create a query that checks username email and password to check if a user exists. Returns either a user object or id, whatever is necessary.

Create Groups List Page

Create Card component to display a user's groups.

Consolidate MongoDB ObjectIDs with graphQL encoded IDs.

GraphQL seems to encode the mongoDB Ids in a specific way, making it so the frontend has to worry about using two different IDs for one object in two different scenarios. We should consolidate the two IDs to reduce confusion.

Create Sign Up Mutation

Add user to database.

Create Profile Page

Add a page that shows user info:

• Name
• Profile Image
• bio
• metrics

Setup GraphQL frontend library

We need a library to make GraphQL querying easier on the React frontend. Keep in mind that we are using a Graphene implementation in the backend, so the library cannot be opinionated about backend libraries.

Deliverables:

• Get the library working with an example query
• Show group members how to use it

Create Portfolio Page

Create page that shows artworks user has visited.

• Fetch user portfolio and display artwork names along with first image
• On artwork click, go to artwork display page

Create Login Page

Design Login Page on frontend.