vacciNATION

Inspiration

Ever since the discovery of the novel coronavirus in December 2019, we’ve all been waiting so patiently for a vaccine, but how much does the average person actually know about what goes into it?

Whether you want to be next in line to get vaccinated, or want to stay far far away, there's no denying the large amounts of misinformation that is spread about vaccines. We’ve recognized this problem, which is why we created vacciNATION, a consolidated platform to provide you with all the relevant information about the COVID-19 vaccines.

What it does

Our website serves to be a transparent COVID-19 Vaccination Hub that provides information about the state of the COVID-19 vaccines, explanations of the ingredients and other information such as common side-effects. The information about the ingredients explains why each one is used and everyday places that those ingredients can be found. We also have a page dedicated to information about regional restrictions in Canada for ease of access to all Canadians since we noticed the information can sometimes be lost amongst other news.

We have also implemented a chatbot, Covashly, that responds to frequently asked questions about COVID-19 when you’re in need of a prompt answer.

Additionally, our game, coroNO, is designed to help you relieve some stress and keep busy during quarantine. It is also meant to help children understand the dangers of COVID-19. All you have to do is defeat the COVID-19 spike proteins before they hit the Earth!

How I built it

We used Figma to design the front-end layout of the website and coded it with HTML, JavaScript and CSS. We also implemented a chatbot feature using Google Dialogflow for the back-end and Kommunicate to integrate it onto the website. In order for all teammates to work simultaneously on the code, we took advantage of the “Live Share” and “Live Server” extensions on Visual Studio Code to code together.

Note

We obtained the domain vaccination-techtogether.tech from domain.com, and created a CName record that maps to it. However, the update did not happen by the deadline (i.e. we were unable to configure the custom domain on the Azure portal).

Challenges I ran into

Although the initial website design on Figma was visually appealing, it was difficult to convert it into a functioning website. We struggled to determine the styling for each element of the site in order to match the design we had created in the beginning. After hours of trial-and-error, we ended up with a website looking identical to our original design! We also had some technical difficulties working collaboratively remotely. However, using the Live Share extension on VS Code, we managed to work on the same code (despite some glitches every now and then) at the same time together!

Accomplishments that I'm proud of

We are proud of the user-friendly and visually appealing design and that we were able to code it into a fully functioning website by the end of the weekend.

What I learned

We were able to host our website using Microsoft Azure, something that we were extremely excited about since it is the first time most of us are using it. We also learned a lot about styling using CSS. While researching, we were able to learn more about the COVID-19 vaccines as well.

What's next for vacciNATION

vacciNATION hopes to scale this website to be used internationally and allow everybody to access the most recent and most transparent information about the COVID-19 vaccines in their region.