Code Violation Tracking is a React/NodeJS/Express web application for submitting and processing housing code violations.
This app allows users to download our code violation form, which they can use to take note of a housing code violation. Then, users can transcribe the form to a matching web form on our app, which when submitted will process and enter the new code violation data to Google Sheets.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
You'll need to install Node (v8.9.4) and NPM (v5.6.0)
There are two embedded Node projects in this repo. The first is at the root level, and handles the server. The second's root is the client folder, and houses the React app.
First, install all dependencies in both the root
npm install
And the client
cd client
npm install
Next, you'll need to create a .env file in the root folder to set up the development environment
cd ..
touch .env
nano .env
The .env file contains the environment variables, which can be different for different developers and the deployed environment.
PORT=3000
PASSWORD='ChangeMe'
DRIVE_PHOTOFOLDERID='1SZCKBKIBuApDf-BlDQ3maeYZUvjWh1ZUpVBr6BPL9PY'
DRIVE_SPREADSHEETID='1EQ2bl80mbuFpf-1j-9NTS5AvGvN7GwBjtpECrT3FN94'
PORT is the port used by the Express server to serve the app. In a development env it can't be 3000 because that's what react uses
PASSWORD is the password used to control access to the web form. There is no user system, instead a single password can be shared between any number of volunteers
DRIVE_PHOTOFOLDERID is the id of the root folder on Drive where photos will be stored
https://drive.google.com/drive/folders/HeresWhereIDIsInURL
DRIVE_SPREADSHEETID is the id of the spreadsheet that data will be stored on.
https://docs.google.com/spreadsheets/d/HeresWhereIDIsInURL/editOnce
Next, you need to upload the Template_Spreadsheet.xlsx file in this repo to the Google Drive account you're planning on using. You'll also need to create a new folder for photos to be uploaded too. Once you have both, copy and paste their IDs into your .env file.
Next, you need to create and download Google API keys for your instance of this project. Those can be downloaded at https://console.developers.google.com
You'll need to
- Create a new project
- Navigate to "Dashboard"
- Enable the Google Drive API
- Enable the Google Sheets API
- Navigate to "Credentials"
- Select "Create Credentials"
- Select "Service Account Key"
- Select or Create a new Service account
- Give it a name and set it's role to "Account" "Owner"
- Make a note of it's service account ID
- Set it's key type to JSON
- You'll then automatically download a JSON file with your new credentials on it. Place it in your root folder, name it "master-creds.json" and add it to your .gitignore!
Last, you need to give access to the photo folder and spreadsheet to this new service account. The easiest way to do this is to place both the spreadsheet and photo folder inside of another folder, and give the service account write access to the folder and it's contents.
You can do this by right-clicking on a file or folder on Drive and using the "Share" option. Enter the service account ID (it'll look like a gmail address) in the invite section at the bottom and give the service account write access.
Finally, you're done! Return to the root folder and try running the app using npm start.
npm start
npm start runs the server using nodemon (which restarts the server automatically) and the react app using concurrently.
If both installed properly, a react app should start and open in your default browser and a server should pop up in your log
Deployment should be relatively painless, compared to setup. We're architected the repo in such a way that you should only need to
- Clone this repo onto your web server
- Ensure that the .env file has been created and matches your development one (with an updated port)
- Upload your master-creds.json file
- Install dependencies
- Run npm run build in the client folder
cd client
npm run build
Once a build is complete, and you've configured your web server to support your chosen port and the build folder, simply start node using the server.js file!
At this time we are not accepting contributors
- When a new address is used or created, if a user selects more than one code violation the system will push each into a duplicate folder on drive. We're not sure what the cause is, but it's related to the way Upload() and the data submission path work together.
- Pierce McBride - Design and Development
- Brendan Cecere - Design and Development
- Rachel Chen - Design
- Morgan Orangi - Design
This project is licensed under the MIT License - see the LICENSE.md file for details
- Digital Media Program at Georgia Institute of Technology
- Carl DiSalvo, our professor on the project and the head of the RED ATL Lab