Inspiration

SolSafe was designed as a powerful platform to make our neighborhoods safer. This interactive blog-esque website embodies the collaboration of community members to warn each other of any signs of suspicious activities, accidents, and other dangers. With SolSafe, we can be more prepared and aware of the dangers around us and avoid places that are unsafe. We envision a world of protection for our community!

What it does

SolSafe! So Safe! SolSafe strives for a safe environment through community collaboration. Community members can publicly post alarming events occurring around them, ranging from life threatening emergencies to minor inconveniences. These posts help and inform the community of possible dangers and enable them to be more prepared for dangerous situations. To make a post, click the button 'Alert The Community' on the left and report where and what the incident is when prompted. Possible uses include staying on safe when walking alone at night or avoiding areas where a wild animal may be on the loose.

How we built it

  • HTML & CSS we made the colors very similar to AthenaHacks!
  • Microsoft Azure to deploy our website
  • JavaScript & Google Maps Platforms APIs the geo location api was used to load the map at the user's current location if the user gave us access, otherwise, the map loaded near UC Irvine (that's our school!); the places api was used to find the latitude and longitude of a location the user entered and place a marker at that spot with the appropriate description on the map

Challenges & Knowledge Gained

Our team came to AthenaHacks to challenge ourselves and learn, and that definitely happened! There were many firsts over this weekend for our team.

  • For 3/4 of us, it was our first times working with HTML, CSS, and JavaScript
  • We're all freshman with basic knowledge but ready to learn!
  • At first, being beginners in web dev, we had one large HTML file with all our CSS and JS embedded, making it really hard to debug and quickly identify what each part of the code was doing. Our teammate, who joined us later, explained we could actually separate the three for cleaner code.
  • Getting our page to display how we wanted was actually pretty tough: centering, sizing, spacing
  • All of our first times working with the Google Maps Platforms APIs
  • We spent many hours figuring out how to display markers on the map on the location the user specified.
  • How do we get input from the user for location and the incident report?
  • How do we get the longitude and latitude that Markers require to display once we get the location?
  • How are we supposed to deploy???

Overall, we all polished our frontend skills and experience with interacting with APIs.

Bugs & Improvements

We were able to deploy our website to a custom domain, however aligning the map to the user's current location sometimes does not work at 'solsafe.net' domain. Additionally, the site may need to be refreshed once before the map appears. We aren't sure what causes the problems. Regardless, we still had fun and learned while hacking this site!

Built With

Share this project:

Updates