Civicly

Duration: Two Week Sprint

Summary

Communication between citizens and local governments is important but can be cumbersome. Reciprocal communication is even non-existent at times, which leads to a breakdown of the relationship between citizens and their local government.

Civicly is a reporting app where citizens can report non-emergency issues they find in their municipality. Things like potholes, graffiti, loose animals, and many others can be more easily reported by citizens and handled by their city. Citizens can report a geo-tagged location, violation/issue, attach a photo, and include comments to inform the municipality. An admin/city worker can look at the reports and dispatch appropriate resources and communicate back to citizens who requested help. A huge win for everyone!

This workable prototype is mobile first for citizens, desktop for admins.

This project was a team effort - built in its entirety over the course of two weeks as a part of Prime Digital Academy.

Approach:

With this project being a much larger workload than previous projects in our experience, and the added layer of client involvement-- planning was integral to results. Before starting development, we spent a week scoping the project to connect with our client to clarify their needs and establish a timeline.

Wireframe / User Flow Prototype:

Through the sprint, our team met with the Client to provide updates and clarify questions. In order to remain on schedule, our group utilized a Trello board to visualize tasks that were in-progress, waiting to be reviewed, or completed. This helped clarify which pieces of the puzzle still needed to be done and streamlined the team's workflow.

As a representation of the planning spent on this project - we have included the scope document. This process involved spending time considering user flow, component structure, and design potential for the application. This experience also involved setting a timeline for certain features and was an interesting venture into estimating development time for a small team of developers.

Scope Document with Wireframes

If you would like to see a draft of the database structure created during scoping - we have included the relevant ERD. This shows how the tables interact with one another and gives context to functions within the program.

Entity-Relationship Diagram

Getting Started:

Prerequisites

• React.js (built on version 17.0.2)

• Key for Google Map API's Google-Maps-Javascript-Api-Key

• DotEnv file

• Node.js

• Axios

• Redux

• Redux-Saga

• Material.UI

• Express

• Body-Parser

• 'PG'

• Database Manager (we utilized Postico 2)

Installation

Using your package manager - install the dependencies

$ ~ npm install

In your database manager - create a database named civicly use the provided database.sql file to create the necessary tables for this project. (We have included optional dummy data for testing purposes)

Populate dotEnv file with:

SERVER_SESSION_SECRET= 'string' REACT_APP_GOOGLE_MAPS_API_KEY= 'string'

With your database set up - start the server.

$ ~ npm run server

With the server running - open another terminal window and start your client.

Navigate to http://localhost:3000 if the run client script doesn't automatically open the application.

$ ~ npm run client

Deployment

We are currently running our application on Heroku-- directions for deployment below are based on using this tool and assume it has been installed prior to following the steps below.

Create a Heroku project

From your terminal, navigate into your project directory. Note that your project must be setup as a git repository for these commands to work.

Run the following commands from within your project folder.

1. heroku create
2. Login in if prompted -- it might ask to open a browser
3. Type git remote -v to ensure it added successfully. You should see a remote called heroku

Make sure your PORT is configured correctly as:

const PORT = process.env.PORT || 5000;

This will allow heroku to tell your app which port to listen on.

Next, commit your changes and push them to Heroku:

git add .
git commit -m "MESSAGE"
git push heroku main

Lastly, open terminal and type heroku open as a shortcut to open your website in a browser.

Heroku Deployment Resources

More detailed instructions can be found here:

• https://devcenter.heroku.com/articles/git

Built With:

• React.js
• Node.js
• Material-UI - Components and Styling
• SweetAlert 2 - Visual Feedback for Admin Users
• Passport - Secure Login & Account Management

For a full list of dependencies - see the Package.json

Screen Shots

• Landing Page

• Home Page

• Report Map Page

• Add New Report

Screen.Recording.2023-02-15.at.5.10.16.AM.mov

• Top Citizens Page

• User Profile Page

• Admin Dashboard

• Admin- Report Details

Usage

This application is meant to serve as a proof of concept for Civicly's development.

Desktop (Admin)

1. Log In
2. Dashboard
3. Report Detail

Admin Usage

1. Enter your username and password on the admin login page, and user will be navigated to the Admin Dashboard.
2. The Admin Dashboard will display a data grid with all submitted tickets from all users. The admin will have the option to sort this data by Status, Category, SubCategory or Date.
3. Clicking anywhere in a report row will open a report details window displaying all relevant details for the report, as well as a field for the admin to add notes to a report. These notes will only be visible to admins looking at the report.
4. By clicking the 'Update Status' button in the report details view, a pop-up window will show with a dropdown menu. The menu will include options to update the status of a report to 'Accepted', 'Dispatched', or 'Closed'. Selecting one of these options and clicking the 'Send Status Update' button will update the report status and send a notification to the user, keeping them up to date on the statuses of their report as the municipality addresses the issue.
5. Choosing the status 'Closed', will signify to the citizen that this report has been addressed, dispatched and corrected. This action will eliminate the report from the citizen map view as well.

Mobile (Citizen)

1. Landing Page
2. Log In/Register
3. Report Map View
4. Add New Report
5. Top Citizens
6. Citizen Profile

Citizen Usage

1. Landing Page - This is an initial splash page which shows options to log in or register as a new user.

2. Log In/Register - Users can log in on a mobile device to access the mobile features. Users can also register as a new user by clicking the register link, and entering a username password, and zip code in the registration form.

3. Report Map View - By clicking on the map pin icon in the bottom nav bar, users can see all citizen reports in a google map view that centers on user geo-location. In this view, the users can zoom in and out via the map, and click on any of the color-coded report pins to view a details card of the report that will pop up on top of the map. Users can up-vote a report as well. Up-voting lets other users and admins know that the community agrees an issue is important.

4. Add New Report - By clicking on the large '+' icon in the bottom nav bar, users can submit a new report.

• Step One (Create New Report): Users can click and drag in the map view to set the precise location of the issue. Clicking the "Confirm Issue Location" button will navigate users to step two.
• Step Two (Choose Category): Users can now choose from an icon list, the category the issue falls under. Clicking on the icon will reveal the category in text underneath it. Once the correct category is chosen, users can click on the "Next" button which will take them to step three.
• Step Three (Submit Report Form): Users can now choose a specific issue based on the category selected in step two by clicking the "Choose Issue" drop down and selecting an option. Users can then add an optional description of the issue to give admins more details about the problem at hand. Users have the option to submit a report anonymously, as well as attach a photo of the issue. Clicking the "submit" button send the report to Civicly admins, and navigates users to a success page, where they can view the status of their reports.

5. Top Citizens - Users can potentially see their status as "top citizen" by the amount of reports submitted and upvotes received. Top filter buttons are meant to sort and display by week, year, and overall scoreboard for game-ification and community involvement purposes.

6. Citizen Profile - Users may view their total upvotes and tickets submitted. User's can upload a profile picture. From here users can also navigate to view all your reports submitted which contains ticket information. These individual tickets can also navigate the user to the Report Map where it was placed.

Developer Notes

Mapping

-React Google Maps API powers the map for Admin Detail, Report Map, and New Report Location.  

Report Map pins are color coded by category. Markers within map boundries can be viewed in a carousel at the bottom of the Reports Map page. Info Window is used for marker detail view. Geolocation centers the map over user exact latitude and longitude, map boundries then recenters over selected markers.

Google-Maps-Javascript-Api-Key Required.

Authors & Acknowledgement

This app was built by: Dylan Roets, Vanessa Wharton, Andrew Carey, Jared Lindquist,
and Paul Norling.

Thanks to Firebase and Google Maps whose APIs supplied image upload and mapping capabilities for multiple parts of this application.

Special thanks to Prime Digital Academy who equipped and helped us make this application a reality.