With the second wave of COVID-19 surging globally, there's a shortage of applications that combines the anonymous simplicity of a quick questionnaire with a powerful diagnosis. CovidScreen does exactly that.

What it does

CovidScreen asks a series of questions and symptom lists to check off. In just 6 series of in-depth selections, the application gives the user an ensured decision regarding their next steps in handling their potential case of COVID-19. The appealing User Interface makes it easy for anyone around the world to take a quick and effective diagnosis that can be completed in one minute. It first prompts the user to "Start Screening" with a button in the middle of the page. Once it is clicked, the next component will appear. It asks the user to select their age -- whether they are 18 years old or younger, 18-64 years old, or 65+ years old. If they are 18 or younger, it displays that the tool is only designed for people that are older, and directs them to learn more at Then, it asks the user for present symptoms, past conditions, exposure, and travel to present their screening result at the end.

How I built it

I built CovidScreen using ReactJS, HTML, CSS, and other packages for simplistic user experience. With a series of React Hooks to monitor the user's clicks and selections, I was able to create an interactive environment flowed with the patient's progress on the webpage. The forms, radio buttons, and checklists were used throughout CovidScreen to keep track of their choices after they click "submit." At the end of the questionnaire, they are given a diagnosis out of a pool of multiple results, based on their number of symptoms, exposure to other COVID-19 stricken people, whether they traveled internationally, and more. With a variety of conditional operators, the case is made confidently.

Challenges I ran into

I found it a bit tough to keep track of all the React Hooks that monitored the user's progress on the webpage. I had 10 Hooks that kept track of the user's checks, clicks, and submissions. However, I learned to effectively organize the components in order to give the patient a direct answer from the states of the buttons and checklists. Alt Text

Accomplishments that I'm proud of

I'm proud of configuring my first web application with React. Although I struggled initially with setting up the environment and IDE, I was able to design a user-oriented product that can be implemented virtually anywhere.

What I learned

I learned how to make a full-stack application and utilize React. I also learned to organize my code effectively so that I can see where any potential errors may lie.

What's next for CovidScreen

In the future, I plan for CovidScreen to be fitted with a Google Maps API that can read in the user's current location to show where they should go and avoid in the near future. Whether that be in the Hospital, Emergency Room, or at home, the results screen should provide the quickest route to the location that fits their diagnosis the best.

Alt Text

Built With

Share this project: