demo it here (sadly production build cant load 3d models for some reason ;n;)

Background

While COVID-19 daily cases have finally begun to see a descent, likely largely due to the COVID-19 vaccine, the vaccine is still limited by quantity; as a result, it's important to ensure the efficient distribution of the vaccine - especially considering the possibility of external circumstances further delaying the vaccination of the population, such as that of the winter storm delaying vaccine shipments to San Diego just this past week.
Additionally, many people are unaware of how many vaccination sites are available, resulting in "hotspots" where vaccine quantities are run out; anecdotally, my grandmother had struggled for days to get an appointment at one hospital due to the number of people trying to sign up, but the day she learned of another site, which happened to be less visited, she was able to get vaccinated within the day, the site being mostly empty.

What it does

vacc.me is a web app for identifying vaccination sites in San Diego fulfilling to individuals' criteria, allowing for a more even spread of vaccine distribution while also helping individuals find sites whose schedule and/or format is most conducive to them.

How it was built

View the design doc here (also linked below)

ui/ux

No prototypes were created for this app :(
Regardless, the app was designed to have a simple, clean, minimalistic user interface.
The splash screen graphic was created using Figma.

frontend

The frontend is built on React and Scss and deployed to Netlify, and uses Ant Design as its component library. Complex state management is handled with Redux. It is not responsive :(

The core of the app is built upon Mapbox, which renders the map as well as providing methods for "jumping" to different sites. three.js was used to load the 3d models, introducing a level of depth and interactivity to the map. The models were taken originally from the walk-thru and drive-thru icons at the San Diego County website; these icons were then upscaled with waifu2x, converted to svgs with Inkscape, and extruded and converted into a gltf model using Blender.

backend

The backend server uses a simple Firebase REST API hosted on Heroku to store vaccination data.

tech stack

Challenges ran into

Due to lack of experience, even the actual setting up and populating of the database proved to be quite difficult - a significant portion of time was lost not to writing routes or creating user interfaces, but rather just getting started with the database and adding data.

Additionally, as a solo hacker working on a complex full stack project, it was also a significant challenge to get everything done; indeed, some more difficult or less important filters were dropped in the interest of time, quality-of-life features were backlogged into the void, and styling became but an afterthought (can I call it "minimalist design"?).

One of the most frustrating issues was differences between development and production build, and even production build and server build (hosted on Netlify). While most errors were resolved, the app hosted on Netlify can't render the 3d models, even though it works locally for both dev mode and production build.

What was learned

I learned a lot about working on a full stack application and communicating between the front end and back end while doing this project.
This was also the first time I applied Redux to a full project. Admittedly, this probably wasn't the best use case for it, but it was still a helpful experience.
Mapbox and three.js were new technologies as well, and it was quite satisfying to watch the application come to life through them.

What's next for vacc.me

One of the most useful features to add would be to include geolocation to filter based on geographical distance - after all, San Diego County is rather large, and the distance between two sites may be over a thirty minute drive.
If possible, knowing how many appointments are available at any given vaccination site and when would significantly improve the quality of information provided. Knowing this would not only provide more information to the user, but would also allow smarter recommendations.

On the current state of the backend, the database in its current form consists of hardcoded values; creating a scraper to regularly obtain the latest information from the County would make the application much more relevant.

Acknowledgements

This project is basically a scuffed use of the tech stack used by Stanley Lee and Emily Nguyen in some of their recent hackathons; much of the workings of the map and 3d models layered on top were drawn from their projects. Stanley also helped me with getting started with setting up Firebase, in addition to debugging a production build bug.
Thanks also to Matei Gardus for helping me with populating the database and Ronak Shah for demonstrating how to host the database on Heroku.

Share this project:

Updates