When we considered the theme of "building a better Ann Arbor," we quickly agreed that getting around the city was something that everyone struggles with and that we could find innovative solutions for improving. Most onerous among the many challenges to getting around in Ann Arbor is that of parking. We wanted to make parking easier by providing comprehensive information about parking garages, street parking, and even enable the monetization of unused driveways and front yards by matching people who need a space with those that have it! From here we aimed to bundle in as much useful information to maximize people's enjoyment our wonderful city once their parking problems are a thing of the past!

What it does

XplrA2 uses crowdsourced data to provide comprehensive insight into parking availability and options in Ann Arbor. We cover everything from parking garages and lots to street parking, including cost, availability, and more - we even report parking attendant location - and mood! Additionally, we incorporate non-traditional parking opportunities via our ParkShare functionality, which allows users to advertise their available driveways or front yards (for example during Michigan games or Art Fair!) and to match their availability with eager parkers. We provide up-to-the-minute construction information for drivers, bicyclists, and pedestrians, and we even send you SMS reminders about your parking spot!

How we built it

We started out by brainstorming any and all features that we thought could be of use to those exploring the Ann Arbor area, and then thinned those results to the most valuable, most achievable subset. We drafted the architecture, database schema, and front end functionality on a whiteboard, and then began identifying technologies that would facilitate our goals. Adobe XD and Zeplin helped us digitize our whiteboard scribblings into usable assets. We selected Vue.js and Bulma to help us assemble an attractive, well-structured web UI. We simplified our back end by using Firebase, and got around iOS's lack of support for web-based Push Notifications by instead implementing SMS via Twilio. Since Twilio doesn't support client-side JavaScript, we used Node.js via Firebase's (serverless) Cloud Functions. With our UI fleshed out and our frameworks in place and working, it was simply a case of wiring everything up. And wire we did, for many many hours, eventually realizing all of our interfaces in Vue/Bulma bound to data from Firebase!

Challenges we ran into

One of the biggest challenges we ran into was getting Google Maps to play nicely with the reset of our UI. We spent an obscene amount of time just trying to get our Bulma cards to be visible at all over the map, and then struggled further to re-achieve the formatting we had prior to incorporating Maps. Another pain point was Twilio's lack of client-side JavaScript SMS capability (limitations intentionally enforced by security). We discovered Firebase Cloud Functions, which would allow us to deploy a Node.js script as part of our larger Firebase project - but realized far to late that the documentation we'd been using was based not only on an old version of Cloud Functions (the current version of course having many breaking changes) and the legacy Realtime Database data store instead of the current Cloud Firestore that we'd built the rest of our app on. We got it working eventually, but the Cloud Functions development cycle was quite cumbersome and slow, robbing us of valuable hacking time.

Accomplishments that we're proud of

We're particularly proud of our UI. Typically, a handful of developers with only 24H to build an entire product from scratch might not be expected to create something as professional-looking and enjoyable to use as we managed. Additionally, our app "really works" - it would have been easy to hard-code or simulate data or functionality, but our app loads all of its data dynamically from Firebase and sends real texts via Twilio. Integrating Twilio into a web app itself was also quite an accomplishment, since Twilio intentionally makes it impossible! Lastly, we're really proud of our ParkShare concept - allowing people to monetize their driveways and front lawns my matching their availability with the needs of drivers. This could be an app/startup in itself!!

What we learned

We learn a lot about Google Maps and geolocation, since our entire app centers around these concepts! Some of the team were using Vue and Bulma for the first time, so one of the things we did early on was a crash-course in these frameworks so the whole team could contribute to the product. As mentioned earlier, we also learned just enough about Firebase Cloud Functions to trigger an SMS via Twilio on database changes.

What's next for XplrA2

One of the hardest parts of building this product was discarding the ideas that we didn't realistically have time for. We had originally envisioned an all-encompassing exploration app, catering to all transportation methods, including bikes, scooters, and pedestrians/hikers. We would like to extend the crowdfunding functionality that we build for parking data to events, restaurants, and points of interest (location-based local history and fun facts), - allowing people to find things to do once they've arrived - from the smallest enthusiast group gathering to the highest-profile concerts and sporting events. We'd also like to incorporate upvoting and downvoting to help moderate all of the user-submitted content. We would like to add more geolocation-based functionality, including the ability to get directions to a parking spot and prompt you to input your meter details upon arrival. As you return to your car, we would prompt you to update your parking status. We even hope to gamify/incentivize submission of transportation, event, restaurant, and point of interest data in order to build up a healthy corpus of goings-on for our users to enjoy. Finally, we would like to enable social features so that drivers can get in touch to complement each other on their vehicles or let them know about an accidental bumper tap!

Built With

  • vue-bulma-firebase-twilio
Share this project: