/covax19

deployment to netlify

Primary LanguageJavaScriptMIT LicenseMIT

Covax-19 UCI Hacks 2021

mockup

Links

Devpost Website Demo

Inspiration

Vaccine roll-outs for COVID-19 have begun but there is a lot of apprehension in the minds of people, some myths around vaccination as well as general curiosity about the best vaccine for yourself and your family. Through the rumors and false information spreading around the media, many are anxious and worried about what is being injected into their bodies, even though it may be for the best. Covax-19 makes it easier to track your own health post-vaccine.

homescreen

What it does

Users all around the world can input their symptoms and experiences with the Covid-19 vaccine. They can list their pre-existing conditions, age, and what company’s vaccine they received in order for others to read through and review for their own knowledge. Our web-app populates reviews on the interface in a user-friendly theme.

form

How we built it

Our team used Figma for wireframing, creating a user flow and brainstorming the elements the app should have. We used Figma to create the detailed prototype to make the coding stage straight-forward and efficient. From there, the branding and logo was created in Adobe Illustrator. Communicating over Discord, our team set up our Git repo and began creating our React.JS web app. We used MongoDB for the database, Bootstrap-React for the layout, and CSS for custom styling. We’ve also used qnamaker.ai to store FAQ questions and deployed the chatbot using Microsoft Azure to allow more of a fun and interactive element.

reviews

Challenges we ran into

Though an incredible hackathon weekend learning new languages and frameworks, there are usually challenges when it comes to remote working. Our hack team is from all around the world, different time zones and internet stability. Our passionate teammates have sacrificed sleep or changed their sleeping schedules to accommodate our hacking! We ran into some issues with connectivity and bugs, yet used Discord to hop in and out of different channels to support each other and make sure we are all working up to speed. Teamwork thankfully combatted all the challenges we faced.

Accomplishments that we're proud of

We had a rather diverse set of skills among us, so we figured out how to share tasks. Our team members became both mentors and mentees for each other! Our newer hackers learned how to use React.JS and Github, and others adapted to new remote platforms very easily. We are incredibly proud of submitting a finished prototype to HackUCI, one that targets a concept in everyone’s day to day life, and an app that people can use to ensure comfort and oneness with others during this pandemic.

What we learned

All our team members learned something new, whether it be design, code, or practical skills such as organization and remote communication. We brushed up on React.JS, Git command lines, as well as working efficiently with each other despite our timezone and location barriers.

What's next for Covax-19

Covax-19 has an immense future, with a long way to go! We hope to have SMS notifications to keep users updated on their symptoms and keep a continuous communication stream through their journey of receiving vaccines. We’d like to have a data visualization dashboard where locations and vaccines people have taken can be seen in real-time. A feature for filtering reviews based on parameters like age, location, previous conditions needs to be implemented too. In this new pandemic world, many people are anxious about new vaccines, their symptoms, and their overall health. By gathering factual data and analyzing their symptoms, Covax-19 can update users and reassure them that their symptoms are normal.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify