2021

COVID Conqueror

An educational web app for kids about the COVID-19 pandemic made for my senior thesis project (in collaboration with two peers), where our goal was to share what was going on with young children so that they didn't feel like they were in the dark

Overview

COVID Conqueror is a MERN stack educational web application that uses data from the Johns Hopkins COVID-19 dataset to power interactive visualizations and lessons designed for younger audiences.

The goal of the application was to present complex public health concepts in a way that is accessible and engaging for younger audiences while demonstrating how full-stack web technologies can support interactive learning experiences.

Role – Full-stack developer, responsible for designing and implementing the frontend, backend, and database querying

Technologies Used

Frontend

  • React
  • react-globe.gl – interactive globe visualization
  • Recharts – data visualization for COVID-related statistics
  • Axios – handling HTTP requests to backend APIs

Backend

  • Node.js
  • Express

Database

  • MongoDB Atlas

Demo of the Web App

The video below demonstrates the main features of COVID Conqueror, including lesson navigation, educational videos, and interactive quizzes designed to reinforce key concepts.

Data Source & Preprocessing

We used data collected and maintained by Johns Hopkins University to source our data and ensure that we had reliable and up-to-date data.

Until the pandemic had ended, the dataset provided regularly updated information on confirmed cases, recoveries, and deaths across countries and regions. Relevant portions of this data were integrated into the application to support visualizations about how the virus spread globally.

The data is stored and structured within MongoDB Atlas. This supports the interactive visualizations built with Recharts and react-globe.gl, allowing users to explore COVID-19 trends and geographic distribution through charts and a 3D globe interface.

System Architecture

COVID Conqueror uses a MERN stack architecture in the following way –

  1. Frontend – React renders the educational modules, navigation, educational modules, and interactive modules
  2. Backend – Express and Node.js provide REST API endpoints for content retrieval
  3. Database – The educational content and quiz data are stored in MongoDB Atlas
  4. Communication – The React frontend retrieves lesson data through API calls to the Express backend

Key Engineering Decisions

Why Use the MERN Stack?

The MERN stack was chosen beause React enables dynamic UI components for quizzes and lessons, while Node.js and Express provide a lightweight backend for serving educational content through REST APIs.

Using MongoDB Atlas

MongoDB Atlas allowed us to simplify cloud database deployment, especially since it was regularly updated by Johns Hopkins University. It allowed us to ensure we weren't unnecessarily storing redundant / duplicate data.

React Component-Based Design

Educational modules such as lessons, videos, and quizzes were implemented as reusable React components, allowing the interface to dynamically render different engineering modules.

Challenges

Designing Educational Content for Children

Since medical information about COVID-19 can be complex and we were all learning more about it during the pandemic together, one challenge was simplifying explanations while still keeping them accurate.

Structuring Content

Lessons needed to be stored in a way that allowed the frontend to dynamically retrieve and display different learning modules. We also noticed that there were rare occasions at night when the data wasn't being populated, and we had to balance the tradeoff between occasional interruptions to our data source and wanting the data to be dynamically updated in real time.

Backend API Designing

Structuring the backend API required defining endpoints that allowed the frontend to request lesson content and quiz data dynamically with the greatest possible uptime. It makes sharing this with children across time zones more feasible.

State Management in React

Implementing the quiz functionality required managing component state to track the current question, user selections, and quiz progress throughout the child's learning journey.

Future Work

Our analogies were tailored towars children in the United States. Internationally, some analogies might not be understood by children in other cultures, so we'd like to have more universally recognized analogies.

US data was excluding recovery cases, so we'd like to be able to update the data to include US recovery cases.

While elementary school students (grades 3 through 5) tended to understand and learn a lot from COVID Conqueror, we recognize that it's still challenging for children who are even younger, so we'd like to reformat content to make it more accessible for children of all ages.

Especially when it comes to making the content more universally understood, we'd implement a content management system that allows educators to add and update lessons without modifying the application code.

Future versions of the application could also incorporate machine learning models to analyze COVID-19 trends and predict potential case growth patterns based on historical data from the Johns Hopkins dataset.

Personalized learning features could also recommend lessons or quizzes based on a user's previous interactions and quiz performance.