Ngo Quang Trung
DEV Showcase
Tracking Realtime Covid-19 Situation Around the world.
Quang Trung
Role
Front-end Developer
Timeline
Jan 2022
Categories
Web-based App
Stackholder
CSE Department
Share
Pandemic in general and COVID-19 in particular has affected every aspect of our lives, from our health to our economy.
As the pandemic continues to evolve, there is a growing need for accurate, up-to-date information on the spread of the virus and its impact on different regions and populations. So Visuaization is a valuable tool for anyone who wants to understand the impact of the pandemic with a comprehensive overview of the current national or worldwide situation in an easy-to-understand format.
2019 - 2022
Google Trends
Vietnamese Deaths
Global Deaths
2023 - now
BF7 (China) , XBB (Vietnam),..
Till not an endemic disease
Daily Global Deaths
Missing Information: Having to follow through the press and media is a big drawback.
Raw Data Issue: hard to handle & waste time to view the current situation. epidemic.
Situation Prediction: Pandemic makes us hesitant to make any (travel) decisions.
Virus Strains: The epidemic develops abnormally with many mutated viruses capable of vaccine resistance.
The Shortcomings: Current applications do not have diverse and well-integrated features.
Competitors Audit
Disease.sh API
1. Reliable Mutil-Source: Crawl ing from official national sites 2. Constantly Updated: always getting the newest data as the original sources updated.
Playing with charts
Make a change for a better view, this system allow users to change the chart’s criteria ( date range, disease types,…) or even download it as pdf..
Search & Sort
allows you to select other countries to view with a list of countries organized to your liking.
National covid-19 prediction
make informed decisions about travel, health, and safety through the help of ML algorithm to predict future covid cases or deaths at any countries that you want..
Recommendation
Grouping countries with similar epidemic situation to the country that users are viewing for detecting the impacts of new variants.
Vaccines efficiency
Epidemic status of the country after vaccine coverage for the entire population.
Continental comparison
They can identify areas that need extra support, track the effectiveness of their policies and interventions, and communicate important information to their citizens.
IP Detection
Detect user IP browser for the first loading country dashboard.
Wordwide situation
world map and more on epidemic status overview.
Deployment Github x Netlify
Ready to use as Web version for engaging many users..
File Structure
Get all countries: getAllCountries() to get a list of countries got covid-19 pandemic.
Detect User's Country: getUserCountry() to get user country CODE (ex: VN, US,..) for the first loading in Country Dashboard.
Process & Render for a Specific Country: countryClick(CountryCode) specifies CODE to get unprocessed data for a country getForCountry(countryCode, countryContinent) from APIs. Then the data will be processed handleGetForCountry(hisC, vacC, contiC) to fit different chart types & features. Finally, it is rendered in View. If the user clicks to view a different country, Step (3) will be repeated by specifying that new CODE to Re-render again.
Get all countries: getAllCountries(), getTotalWorld(), getHistoricalWorld(), getTotalContinents() from disease.sh.
Process & Render for worldwide situation: Handle total global highlights, Daily statistics, Continents statistics. Then, render in view
Front-end Framework
State Management
JS environment
Charting Library
Component Framework
Fetching method
CSS framework
JavaScript utility library
Number Formatter
Date Formatter
ML Method for prediction
ML Method for Clustering
The overall achievement
Member
Months
Features
SWOT Analysis
Applied Machine Learning algorithms: Regression , K-means for solving real-life problems.
Knowledge about types of chart for data Visualization.
Work with JS Asynchronous & Lifecycle Hooks, when dealing with APIs.
Implement Data processing for different features with Vue Framework, JavaScript.
A useful preparation tool for any upcoming pandemics due to modularization and File organization.
Basically solved the shortcomings of the the current applications, but still need to iterate for a better version.
Increase user reach for commercialization of advertising purposes.
UI/UX casestudy
PREV
NEXT
