Voluntary

The map page of nearby volunteering opportunities.
The feed of your friends' volunteering activities. You might see a couple familiar names!

Inspiration

Looking back to his high school experience, Teddy recounted the countless obstacles that came with volunteer work in his community, San Gabriel Valley. Although there were countless people in need of help and attention, the lack of awareness of the opportunities to support communities in need led to unintentional disregard towards those in need of help, regardless of the degree of severity. If only there was an app that could provide a convenient and simple mode of access to community events! Thus came the birth of Voluntary! Just like the word suggests, the app presents the opportunity to become a more involved citizen who can give back to the community they love.

What it does

Voluntary allows organizations in need of volunteers to list their events on a map. A point system is used to motivate users of the app to participate in these events, with points being distributed for physically attending said events. When a user has the app open and is within the vicinity of a listed event (confirmed by the device's GPS), they will be marked as a participant. After spending some time at the event location, they will be marked as having participated and points will be added to their account.

Along with this, the app has a social system, where you can see where and when your friends go to volunteer, and cheer them on! If you have a more competitive spirit(like us), there is also a leaderboard system so you can feel motivated to earn more coins to beat your friends. Also, the more people are at a volunteering event, the more coins you get, so grab as many friends as you can before you head out to do some good deeds!

How we built it

To build our app, we primarily used React Native to design each of the front-end components. Since we were new to React Native and there were a lot of screens to make, this took up a huge chunk of our time. We also implemented the map system with the Google maps API.

Now for the interesting part: the back-end. Since we weren't actually partnered with any organizations, to get some placeholder data for organization-hosted events, we developed a simple scraper that scraped organization information off the VolunteerMatch site. This data was then dumped into a MongoDB database. User registration data was also stored in the same database to allow for authentication and point-tracking systems. Passwords were stored as Argon2 hashes to enhance security.

To tie everything together, we used a simple Flask service as an API server to do some simple processing on our data and serve sanitized information from our database, as well as keep track of user authentication status. The app made simple HTTP API calls to the server, and the server responded back with any relevant information, which was then processed and displayed in a somewhat user-friendly fashion.

Challenges we ran into

There were tons of minor difficulties, such as finding easily accessible data for placeholder events and organizations was also somewhat difficult, with few sites containing sizable amounts of organization information localized around the Twin Cities area. Also, we ran into many roadblocks with financial or time constraints not letting us go in a particular direction we wanted to.
The biggest challenge by far was tackling React Native. Our group had very little experience with mobile development and even less experience with React Native itself, so using it to build our app was truly a learning experience. We experienced firsthand the panic and frustration when things don't go our way(our project has fallen apart as I'm typing this), especially in a framework with a tough learning curve. However, we wouldn't have it any other way! We learned more Javascript than we ever thought we would learn, and we bonded over our shared sufferings, and that's all that really matters in the end.
Right as we were about to be finished with our app, the project suddenly imploded and threw our team into chaos. Fortunately, we were able to quickly showcase most of the aspects of the app we wanted to, but that definitely left a bitter taste in our mouths. Apologies for the rushed demo.

Accomplishments

We built a fairly large project with a completely new language!
We had a lot of fun integrating the Google Maps API, which we also hadn't used before.
The people who were more comfortable with front-end were forced to take on back-end responsibilities at many points, and vice versa. They took on their tasks valiantly and had major contributions on both ends!

What we learned

So much Javascript. So much. It hurts.
Libraries make our lives so much easier! One of the greatest strengths of React Native.
Git merges are scary. Make sure you know what you're doing before you decide to push it.
Working with a completely new framework is actually a lot of fun! It's extremely satisfying to figure out something that has been bugging you forever.

What's next

With more time, we could definitely gain experience with React Native and polish up the literal rough edges of our app UI. Additional methods of authentication, using something like external OAuth providers, may also make users' lives more convenient.

On the less-visible side, to prevent GPS spoofing and other potentially malicious attack vectors, more layers of security would probably be necessary, especially if earned points are able to be redeemed for real-life rewards. In addition to a device's GPS module, other factors such as time zones or network-based geolocation could be employed for consideration when verifying a user's physical presence at an event. Improvements to client-server communication stability and more graceful error handling could be other potential future patches.

Also, since some of our data might be considered potentially sensitive information (names, emails, location history, etc.), some more complicated security practices such as encryption-at-rest might be a good idea.