The COVID-19 pandemic has mercilessly taken the lives of more than 2 million people worldwide, and the number of people getting infected is surging rapidly. Rolling out the COVID-19 vaccines and having vulnerable groups of people vaccinated in a timely manner becomes an urgent challenge for the United States, especially for California where the number of confirmed cases is approaching 3 million.

With the start COVID-19 vaccination campaign in the United States, there is a need for a simple, user-friendly interface to assist people with the information they need in order to register for vaccine appointments.

What it does

The Vaccinate California website displays vaccination sites in California. With a geolocation feature, users are able to view vaccination sites around them. When a user hovers over a vaccination site marker on the map with their cursor, relevant information about the site is displayed on the left side of the screen. This includes site name, address, contact information, eligibility, and whether or not registration is still accepted. Users can enter their vaccine appointment information to receive an SMS message reminder on their phone on the day of the appointment. Users can also visit the FAQ section to view a list of FAQs regarding the COVID-19 vaccine.

How we built it

With the intention of designing a clean user interface, we brainstormed with multiple sketches of our website to select the design with the greatest usability. Then, we built the front-end using HTML, CSS, and JavaScript. We utilized the Google Maps API to display a base map for vaccination sites. We built the back-end with Node.js and Express, which serves as the endpoints for the Twilio services to send SMS reminders. Finally, we deployed our web app using Heroku.

Challenges we ran into

Data collection is one of the cumbersome challenges because many vaccination sites have yet to be established, and for existing sites, many do not provide information on who is eligible to receive a shot nor how to register for an appointment. Moreover, as new developers to the web stack, accessing and working with APIs were challenging. Nevertheless, we successfully managed to incorporate Google Maps and Twilio APIs. Although we attempted Firebase API and failed, we learned a great deal and truly enjoyed the exploration.

Accomplishments that we're proud of

We were proud of our web app as we utilized tools to help us design an intricate yet easy-to-use interface for our users. We emphasized a simple and informative user interface as we hope to accommodate users with varying knowledge of technology. We also used various tools to simulate what our website would look like to individuals with color blindness. As our first virtual hackathon, we encountered many technical challenges but we were able to efficiently communicate them within the team and overcome most of them with the help from mentors.

What we learned

After collecting information on the COVID-19 vaccine rollout in California, we learned that the process is to get vaccinated is complicated and chaotic, emphasizing the need for a centralized hub of information for individuals seeking to receive a vaccine shot. Through building our web app, we gained a better understanding of the web development lifecycle, including how to integrate various APIs and deploy the application.

What's next for Vaccinate California

Going forward, we will build a customized profile for each user to better improve the user experience. It will filter vaccination sites by eligibility so each user can selectively view sites that are most relevant to them. The profile will also include a user's immunization record so they can receive an SMS reminder when it is time to get their next vaccine shots. Lastly, we want to generalize this tool to support vaccination locations outside of California when more data is available to the public.

Domain registered on

Share this project: