Overview

WorkSafe is a web application that crowdsources user comments about workplace locations, and allows other users to scout out establishments to see if they are a welcoming environment.

WorkSafe was developed as part of PenApps2017, in the Social and Civic Hacking Route.

WorkSafe was developed with Firebase, Bootstrap, and jQuery.

Inspiration

We actually were inspired to do this project from attending a Civic/Social Hacking Workshop. Before the workshop, our project was a smart closet, an ATM Wrestlemania game, less sketchy webMD, bikeshare route optimizer, and an auto-tour guide app. We were cycling through ideas like there was no tomorrow. At the workshop, we were challenged to narrow down ideas from big, broad concepts: no more "solve racism" or "make students better at handling money", but rather "focus on specific ethnic community integration" or "incentivize day-to-day recycling". One of the big concepts we were thinking of was dealing with gender inequality, but that is one of those big up-there concepts that's hard to pin down. In the workshop, we inadvertently realised that one narrow, but manageable issue is the idea of workplace harassment. Workplace harassment isn't just gender inequality though: it can be almost anything that makes employees uncomfortable, feel discriminated against, or feel directly attacked by.

To attempt to "solve" the idea of workplace harassment, we initially tried to figure out what problems caused workplace harassment. Obviously, there's huge ideas like societal bias, but dealing with that in a hackathon is very hard. But there's also another aspect of workplace harassment: information asymmetry. Basically, people who experience workplace harassment might not be familiar with what constitutes workplace harassment, or how to deal with it. They might not know that other people, all over the world, are facing the same problems that they are. Employers might not know that what they're doing is wrong, or that their employees are experiencing harassment. So, we aimed to make an application to remove that information asymmetry, and bridge that information gap.

Challenges

We ran into a lot of challenges during development; here are a few:

  • Figuring out an idea: we ran through more than 10 different ideas before settling on WorkSafe
  • Learning web design: 2/4 of our group members were relatively new to web design, including general principles and using frameworks. But, they were able to learn on the fly!
  • Learning and Using Firebase: only one group member knew Javascript, and they didn't know Firebase. After some extensive documentation (and a failed attempt to use Polymer), we were able to correctly use Firebase in our app!
  • Differentiation: originally, our app was very similar to software such as Yelp; but, we added and brainstormed different features to make our app unique
  • Co-operation: using version-control software, and working on different pages on the same time, was a big pain as a group of 4. There were many merge conflicts.

Learning

Our team, unlike most of the teams at PenApps, was very new to both hackathons and programming! 3/4 of our team members had PenApps as their first hackathon, which is awesome, and at the start of the hackathon they were completely unfamiliar with Javascript and weren't experienced with HTML and CSS.

Through developing this app, our team members learned more about HTML and CSS, and how concepts such as block-level vs. inline elements or inheritance work, which is super awesome! In addition, they learned about how websites work, using Git and GitHub, and how to use terminal to install things (mostly through npm).

In addition, the fourth member had PenApps as their 2nd hackathon ever, and while they were a somewhat experienced web developer, they had never used Firebase. During the creation of this project, they spent many sleepless hours learning how Firebase works, and learning how to use it!

Setup

First, we need to install firebase. You'll need node for this (we used v7.4.0).

npm install -g firebase-tools

Then, let's clone our repo.

git clone https://github.com/malsf21/penapps2017.git

Finally, get into our directory, and serve our app with firebase!

cd penapps2017
firebase serve

Congrats, you've successfully built our site! Visit whatever address is outputted in your terminal to take a swing with our app.

Conclusion

We'd like to thank PenApps for holding an awesome hackathon! For our team members, this was an amazing learning experience, and a great way to meet other cool hackers. We learned a lot from developing WorkSafe, and we hope you enjoy using it!

Share this project:
×

Updates