Our Goal Our project was inspired by safety concerns traveling around campus (especially at night). We couldn't find a resource that consolidated safety info around campus... so we made one ourselves! Our mission was to make a site that helps the user better understand where they can travel, in an emergency, to get timely help. As well, we wanted to make a website that loads very quickly, in case anyone used the website in an actual emergency.

What it does

Our website shows the location of Emergency Blue Light Telephones across the UC Berkeley Campus, as well as Emergency phones and Police Stations in the surrounding area. As an additional feature, we added a button for easy access to call the UC Berkeley Campus Police.

How we built it

We collaborated on our design in Figma, building out a vision of the website's skeleton and aesthetics. We also used Figma to create some of the image assets (the icons that show up on the map, and the logo). We created this website using the Google Maps API and associated TypeScript to tailor the map features to only what's relevant. Challenges Our team came into this project with limited time and energy, arriving to the event late due to midterms. As such, we missed the opening ceremony and many of the useful info sessions; we had to talk to staff, other teams, and do research to figure out what the guidelines were for the event. There were many learning hurdles involved in approaching this project: Going into the project, most team members had very limited familiarity with TypeScript, API usage, and front-end development Our team had limited experience using Github, especially collaboratively Github pages, which we use to host the website, proved confusing when attempting to host a live site while hiding the API key Github pages, which we use to host the website, proved confusing when attempting to host a live site while hiding the API key As a result of this final point, we were surprised to see the live website not working as we expected, due to limited back-end knowledge on how to hide API keys from public eyes.

Accomplishments we're proud of

For most of our team, this was our first Hackathon! We're happy to have made it to the end despite how tired we all were. This was our first time working as a group in a project of this scale, tackling something outside all of our technical abilities.

What we learned

By the end of the project, we've become exceptionally more comfortable with all of the aforementioned difficulties. We were able to figure out how to get set up with an API, integrate it into our project, and customize it to suit our needs. We became comfortable with using version control as a collaborative tool, and with picking up new technologies during the development process.

What's next

The website would function well as an app, which we're interested in creating! There are a number of other features that we were interested in implementing (but didn't have the time) including live user-submitted incident reports, a tool to fake a received telephone call, and a way to highlight the nearest Emergency Blue Light Phone. (First thing's first though— getting the live website working over the summer!)