- Need Node v14 to run the code.
In the project directory, run:
$ npm i
$ npm i node-sass@4.14.1
$ npm run start
Then, open http://localhost:3000 to view it in the browser.
CYPRESS (City of Toronto Problem Reporting and Solution System) is designed to allow citizens to report problems that concern them about their city. Problems that can be reported to CYPRESS are any real events that involves property damage to the City of Toronto such as utility failures, tree collapse, flooded streets, property vandalism, mould and spore growth, eroded streets and garbage/ road obstructions. CYPRESS' mission is to make the City of Toronto a better and safer environment.
The home page is the landing page of the website. In the home page, the user can log in/sign in to CYPRESS, access the FAQ section, and/or take part of a survey. If a user is unsure about a specific matter, the FAQ section answers the most common questions regarding CYPRESS. The survey is to allow feedback to continously improve CYPRESS according to the users needs. After completion, the answers to the survey are stored into the database.
To access the features of CYPRESS, a user must register for an account by filling out a registration form. If successful, the user can log in using valid credentials and is directed to the dashboard. The user can also access their account details on the My Account page where they can choose to edit their account information, reset their password, or delete their CYPRESS account.
We used the Mapbox GL JS API to provide a user friendly map that allows the user to pinpoint the exact location of the problem that they are reporting, hence making it easier for the city workers to fix the problem as soon as possible. Reports are shown in the map using markers (Red, Blue, Green) as well as a side bar that displays recent reports along with the report type, location, and date/time it was reported. When the user clicks on a location on the map and the "Click to Add a Report!" button , they are prompted to confirm their location then directed to a page where they can select the type of problem, enter more information, as well as choose if they want to receive updates on the report.
This page displays a list of all the problems that the user has reported. The user is able to do the following:
- View Report: displays the full report details as well as a status bar that notifies the user regarding any steps the City has taken to solve the problem.
- Edit Report: edit the details of a reported problem.
- Delete Report: after the system prompts the user for confirmation, they can delete a report.
In the vote page, users can upvote and downvote based on the urgency, importance, or relevance of the problem. Additionally, users can also view the full report details, as well as share the report via link. The user can also sort the posting by most recent and most relevant (highest votes).
The contact page displays a table of Toronto's City Council along with their contact information (e-mail and telephone number), easily accessible for users who wish to speak to them directly. Users can also use the search feature and sort the table by Ward or Councillor Name.
Wish to spread the word about CYPRESS? Users can send an email to a friend regarding CYPRESS and have the option to add a personal message with their email. When a user does not add a personal message, a default message is sent instead.
When the user arrives, at website the default language is set to English; however, the users have the option of changing language at any time using the language selection feature located at the footer of the website.
This project was assigned by Dr. Mišić and created for CPS406 Introduction to Software Engineering W2021.
CYPRESS is built by: