Intro

During Spring Break my Junior Year, some friends from KTP and I attended the University of Cincinatti's hackathon RevolutionUC. Originally we created the beginnings of a react-native mobile application for our fraternity. However, we wanted this project to become something bigger, as well as be a learning resource for others in the fraternity. Something that people could easily pick up and work on for a short period of time. The initial steps to start developing/testing with react-native proved to be too much, so we decided to refactor it into a mobile-first progressive web app built using VueJS.

What it Does

We wanted this application to serve somewhat as a closed social network for members of KTP. Also we hoped that it would help us manage and market to new members during the rush process each semester. The app serves as a one stop shop to view all information about the fraternity, whether that be seeing / checking into upcoming events. Managing your points and meetings, or finding information on the other brothers.

How it's built

A lot of the decisions we made in the implementation of this application we're based around ease of enabling new and inexperienced members to be able to contribute as quickly as possible. Due to VueJS's easy set up process and clear and precise documentation we decided this was the best framework to build the app with. For styling we are using custom classes on top of the CSS framework Bulma. For the backend due we chose to use firebase due to it's interactive console as well as comprehensive free tier. For hosting we use Netlify for many of the same reasons as firebase. Netlify's github integration is also perfect for highly distributed teams such as ourselves since it allows any member to quickly preview what the status of other branches being worked on are.

Conclusion

I have learned an incredible amount about what it means to design and implement an application by being the lead of this team throughout this process. Not only have my software development skills benefitted, but I have better learned what it's like to manage and lead a tech team.

Inspiration

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 Twiliodoesn'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!

Disclaimer

Since this was built during a hackathon we unfortunately can no longer support keeping the application running. However, you can still view the github below and the screenshots at the top of this section!

About

Although this project is incredibly less expansive than my other two projects, it was still really fun to work on a team to design it as well as learn more about how to write marketing copy.
In order to correctly demonstrate and convey the value that KTP gives to its members, I established the 5 Pillars of KTP which are demonstrated on our home page: Professional Development, Academic Support, Social Growth, Technical Advancement, and Alumni Connections, or PASTA for short. This drastically helped our marketing efforts as each brother was able to give a more consolidated message on why KTP has helped them, while also allowing enough leeway to put their own personal spin on it and the message staying fresh.