Started mocking up a web project similar to this prior to being hired..
This summer I was given to opportunity to intern at Applique International, a local company based in Tinton Falls. I was given the task to create a web application to help automate their business. The result ended up in a full-stack application which I see could greatly benefit their business model.
Before I get into describing the actual building and the purpose of the application, it's important for me to list all the technologies that were used in the making of this.
This whole project was written in Coffeescript, CSS, and HTML.
Days I have been working most!
The purpose of PotholePatrol was to create a user base that would result in their product being sold more often. How do we do this? The initial business model of the company was direct calling municipalities in the area to sell their asphalt products. While this is effective, and has been working for them, my job was to put their model on a more scalable scene.
The entire application is based off Google Maps. Using the Google Maps API I was able to craft a model that would allow users to "submit" new potholes in the area.. being marked with a latitude and longitude on the map.
Having data about marked potholes on the map is great! This gives us as "admin" users at Applique the ability to assign a "driver" to go fix the pothole! Beating the municipality right to the job!
Another key feature I thought was necessary was the ability to recognize Municipalities in the area on the map. As an "admin" user at Applique, you will be able to add Municipalities in the area for easier recognition and contact information. All of this data was provided by your friends at Google. The Google Places API allows us to find "places" on the map. All registered municipalities in the area are recognized by google, and all the contact information is displayed for the "admin" user to get in direct contact with said municipality. Great!
A snapshot of the maps route!
Pothole Patrol does what it does best... patrol for potholes!
Using the Google Maps API we have added the ability for a user to take a picture and add a pothole's location to our database. This appears on the global application for everyone to see, not just you guys as "admin" users.
So great, we have marked potholes, but what does this tell us?
Taking a look at this picture, we see the Pothole Details.
Each pothole has a status property which the "admin" users at Applique can take a good look at. Knowing if a pothole is WIP (work in progress) means that there has been a "driver" assigned to the pothole. You can see I (Jack Killilea) am a registered "admin" user.
"Contractor assigned by: Jack Killilea"
As "admins" at Applique, you will be able to change the status of the potholes that are out and registered, and send people accordingly to do something about the potholes.
For Pothole Patrol, I stuck to the secure practice of using OAuth2.0 authentication.
I did not feel it necessary for users to have to sign up and give their email. Most applications today just require you to click a button to login with a popular social media source.
For Pothole Patrol, I tried to keep it as simple as possible and give only three authentication options.
Google, Facebook, and Linked In.
These appeared to me as the most professional options being that they are the most popular social media outlets today.
Sticking with the approach to make the application as mobile friendly as possible, I decided to keep the menu concise to make sure it was simple.
At the top of the profile, it'll take your picture from your said social media and display your email. Basic user profile stuff.
More importantly, we are going to want to take a look at actually uploading a pothole.
Going to the pothole upload route, the user will be prompted his/her file system to upload a picture. A mobile device will active the camera directly (ie. iPhone or Tablet)
A user being prompted!
The browser will ask for the users location, which obviously will act as our latitude and longitude for the map!
Once the upload is complete, you will be redirected back to the map where the pothole is!
Everyone who uses the application will be able to see the new pothole!
Once this is all said and done, the "admin" user at Applique can handle the status of the pothole!
Let's check out the Pothole Patrol Admin panel, and how it works!
The Administrator Panel will serve the workers at Applique the best. Normal users of the application will obviously not have access to the functions that an Admin will.
An Admin user at Applique will have the ability to reject potholes that are submitted, send drivers to the potholes, and add municipalities onto the map for easier contact access.
The Admin Panel!
This is the greeting page for the admin panel. From here, you have access to Potholes and Municipalities.
For editing and assigning drivers, let's check out the Pothole page!
Showing uploaded potholes from newest to oldest down the list.
This page simply shows all of the potholes. I am planning on adding functionality to sort the potholes by region and such once the application gains a larger user base. For now, a picture, a small description which includes the unique id of the pothole, and a small static map which shows the location is all I have.
Clicking on an individual pothole will allow you to edit the state of it.
Editing a Pothole!
Possibly one of the most important pages of the application itself... this allows the Admins at Applique to handle the flow of potholes.
My initial thought was to have 6 different statuses for potholes.
A Submitted pothole simply means it was sent, and is now stored in our database.
A Rejected pothole is a pothole that has been submitted, but wasn't okay-ed by an admin. This will prevent people from sending in pictures that could be inappropriate.
A Verified pothole is one that has been approved as legitimate.
A WIP pothole is one that is simply being worked on currently. This means that a "driver" or "contractor" has been sent out to deal with the mess!
A Cancelled pothole is one that has simply been denied as legitimate. These will be removed from the queue in a short amount of time.
A Completed pothole is one that has been just that... completed! These will be marked as green markers and will be removed from the queue shortly after!
Having statuses on potholes allows the admins at Applique to make decisions easier.
A snapshot of the Muni route!
The Admins at Applique will be able to add Municipalities to the map for easier contacting. This simply means that the Admin employees at Applique will be able to quickly find a municipality that is close by and have all the contact information via the Google Maps API.
Google essentially does all the hard work for us by providing the nice details about the municipality, including, phone number and directions to the place itself.
In the end, I feel that I have held up my end of the bargin. This is a fully scalable web application that proves to automate the business model of Applique International. Like all good products, it will never be finished, as there are already plenty of extra things I want to add. I only had so much time working part-time during this summer.
In total, I have clocked about 105 hours of programming part-time, resulting in about 9,774 lines of code, which almost double when fulled compiled into Javascript. This summer was a great opportunity to test my programming skills and prove to myself that I am capable of providing at the real level of work. All in all, I feel the project was a huge success that can be built upon even more in the future.
--- Jack