Essential Hours

Inspiration

This recent pandemic has changed everyone's way of life. From school/work to shopping, a lot of things had to be altered to keep people safe. Essential businesses are still open, and there are hours set aside for senior citizens. We gained inspiration from this situation and decided to create a website that would both help as well as educate people in the best way we can - virtually!

What it does

Our website helps find stores with special hours set aside for seniors, healthcare workers, and other groups of people affected by the pandemic. The map is centered in NYC, but can locate places all over the world. Based on the user's location, they can find their local stores. Along with the map feature, we also have basic information regarding COVID-19 and tips to stay safe.

How we built it

We built our website using Glitch. We used HTML and CSS. Glitch allowed us to collaborate and see what each team member was working on, so it was easier to virtually work together. Since Glitch couldn't support the map feature we wanted to add, we eventually combined everything on GitHub. The map feature was built using Google Maps API (Places, Detail, Autocomplete), whereas the data was held in Firebase Database. The map in itself was wrapped up in Javascript and jQuery.

Challenges we ran into

There were a couple challenges we ran into. When working with Glitch, we had trouble with the favicon and getting the map feature to work. We eventually were able to get the favicon to work through trial-and-error, but we had to shift everything to GitHub so the map could work. We added more instructions on the map page so it wouldn't be too confusing for users.

Accomplishments that we're proud of

We're proud of getting the map feature to work. As it took a lot of time and was one of the main aspects of our website, we're glad it worked the way we intended for it to.

What we learned

From creating this project, we gained a better understanding of HTML and CSS. Through the challenges we faced, we were able to figure out what went wrong and how to prevent it from happening again. Since it was our first time working with Javascript and API's in general, it was challenging to get started. It took a large combination of documentation and googling to incorporate everything that we wanted to in the timeframe we had.

What's next for Essential Hours

Hopefully, Essential Hours can prove to be a meaningful website that can be used by people who need it. Improved features for the future would include improved UI design and a mobile-prioritized website.

Built With

Submitted to

hths.hacks() 2020

Created by

I worked primarily on the Map feature, which included working with both the Front-End (HTML/CSS) as well as the Back-End (Google Maps API, Firebase Database, Javascript). It was my first time working on anything Back-End at all, so it was definitely a challenge, but an awesome one at that.

Yuxi Qin
I worked on the website logo as well as the front-end part of the website. It was my first time using Glitch, but it proved to be a convenient tool to use as we could all collaborate while working from different parts of the country.

Khushi Darji
i worked on the front end and learned many new things about HTML/CSS. This was my first hackathon ever and my first time using glitch. It was awesome being able to collaborate with Yuxi, Maya, and Khushi.

Private user
I worked on parts of the front end of the project, and helped with the layout of the webpages as well as the flavicon! This was my first project on glitch but I learned so much and excited for more projects in the future!

Maya Tomarchio