Inspiration

We struggled with an idea at first, but after talking with one of the sponsors, we decided to go with the idea of an app that allows citizens to report illegal parking, geared towards those who park illegally in handicap spots. It logically makes sense as in the Urbana-Champaign area, there are many parking infractions and also many people who need the handicap parking spots. One of our members can also personally relate to this as well because my brother requires handicap parking, and we often find those spots taken illegally.

What it does

It allows the user to report illegal parking by having them take a picture that is then sent to a database the police have access to. The picture will be sent alongside geolocation information and an optional short description of the infraction.

How we built it

The code is structured into four parts: the app, the forwarding server, the database, and the display website.

The App

We tried making the app in Android Studio, but it didn't work, so we moved on to Adobe PhoneGap with Atom as our editor. We wrote the app in HTML, Javascript, and CSS. The main function is the camera API, which we gained access. We're currently working on integrating the geolocation automatically into the picture submission, as well as sending the picture to the server (currently, the pictures are too large to send due to our free server size limit).

The Forwarding Server

Receives WebSocket connections and forwards messages to a Mongo database. It is hosted on Heroku, and the source code can be found here: https://github.com/uiuc-rockstars/narc-server

The Database

The database is a Mongo database hosted on Atlas with the free plan.

The Display Website

The display website pulls database data and displays it at http://narc-website.herokuapp.com. It is written in Javascript, HTML, and EJS, using node, mongoose, and express. The source code can be found here: https://github.com/uiuc-rockstars/narc-website

Challenges we ran into

Three of our members didn't know HTML before we started developing, so they took time to learn it and implement it in our app. We also learned how to use WebSocket, SocketIO, MongoDB, and EJS. On the front end side, we also had issues integrating the camera API into the application, but we managed to get it to work.

Hassan and Rafi ran into troubles running the server-client communication with SocketIO. SocketIO is a utility with the Same Origin Policy, which means that the client-server setup only works if the client and the server are on the same network. However, the client would seem to connect to the server from the server side, which lead us to work on using SocketIO for 6-8 hours before migrating to WebSocket.

Accomplishments that we're proud of

The three of us that learned HTML as well as how to use PhoneGap gained quite a bit of knowledge from that. Our two backend developers were able to learn much about avoiding security flaws in the backend and using SocketIO versus WebSocket.

What we learned

Three of our members learned how to write HTML and CSS, while our more experienced group members learned how to use SocketIO, MongoDB, WebSocket, npm, Express, Mongoose, and how to set up Heroku servers.

What's next for narc

We want to finish the mobile app, expand bandwidth to allow for the sending of images,

Share this project:
×

Updates