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.

Share this project: