CPSC 349: Front-End Web Engineering – Fall 2021
COVID-19 Project, due: 17 Dec 2021 at 2359
Given the cu
ent state of events, many websites have been created to summarize the statistics,
trends, and predictions of the COVID-19 virus, showing data at the country, state, and county levels,
using a combination of maps, tables, graphs (linear and logarithmic scatter plots, bar charts
and tree graphs) comparing the spread from region to region.
Your team’s task is to use client-side JavaScript, forms, ReactJS, React frameworks, or other
technologies such as Material UI to build a COVID-19 website. You may use any additional
third-party Web Service APIs, li
aries, or modules, provided you comply with the terms of
their licenses.
Students will work in teams of 3-4 members, with one member serving as the Team Leader. The
choice of Covid-19 website to create is up to the individual team; it will not be assigned. It will,
however, require approval from the instructor.
To help you decide on a design, the most popular COVID-19 sites are shown in this document.
All of these sites pull their data from a relatively small number of International, national, and state
sites. The top data sources are: BNO, 1point3acres, worldometers.info, the Covid tracking
project, CDC. ECDC. WHO. Detailed links for these sites are shown at the end of this document.
Top 5 React UI Frameworks are:
Material-UI https:
material-ui.com
React Bootstrap https:
eact-bootstrap.github.io
Semantic-UI https:
semantic-ui.com
React Toolbox http:
eact-toolbox.io/#
Ant Design https:
ant.design
React Foundation https:
www.npmjs.com/package
eact-foundation
All of these sites heavily use tables and graphs. The top 6 React CHART FRAMEWORKS
all have a wide variety of examples on their sites, with code.
nivo rocks: https:
nivo.rocks/#/ (wide variety of data visualization components, built on React)
React-Vis: https:
uber.github.io
eact-vis/ (Uber’s large, composable charting li
ary)
Victory: https:
formidable.com/open-source/victory/ (range of modular charting components)
Recharts: https:
echarts.org/en-US (super simple, well-built, React composable charting li
ary)
ChartJS: https:
www.chartjs.org/ (simple, flexible, JS charting li
ary for developers)
epackaged as React-chartjs-2: https:
github.com/jerai
est
eact-chartjs-2
canvasJS: https:
canvasjs.com
eact-charts
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
nivo.rocks/#
https:
canvasjs.com
eact-charts
https:
www.npmjs.com/package
eact-foundation
https:
ant.design
http:
eact-toolbox.io/#
https:
semantic-ui.com
https:
eact-bootstrap.github.io
https:
material-ui.com
https:
github.com/jerai
est
eact-chartjs-2
https:
www.chartjs.org
https:
echarts.org/en-US
https:
formidable.com/open-source/victory
https:
uber.github.io
eact-vis
Data inks on this site drill down
Bing COVID-19 tracker: Tracks local and global coronavirus cases. https:
www.bing.com/covid
Includes drill-down by country, state, and county (US examples)
More examples from https:
www.bing.com/covid
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
www.bing.com/covid
https:
www.bing.com/covid
Tracking Covid-19 cases in the US: https:
www.cnn.com/interactive/2020/health/coronavirus-us-
maps-and-cases/ State by state, and county by county. (First graph is a tree graph.)
https:
coronavirus.thebaselab.com
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
coronavirus.thebaselab.com
https:
www.cnn.com/interactive/2020/health/coronavirus-us-maps-and-cases
https:
www.cnn.com/interactive/2020/health/coronavirus-us-maps-and-cases
Note the startling speed of spread: https:
www.nbcnewyork.com/news/national-international/map-
watch-the-coronavirus-cases-spread-across-the-world/2303276
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
www.nbcnewyork.com/news/national-international/map-watch-the-coronavirus-cases-spread-across-the-world/2303276
https:
www.nbcnewyork.com/news/national-international/map-watch-the-coronavirus-cases-spread-across-the-world/2303276
From johnhopkins (most websites get their data from here, which in turn gets its data from the Centers
for Disease Control (CDC), and the World Health Organization (WHO).
https:
coronavirus.jhu.edu/us-map
Total confirmed cases by county Adjusted by population
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
coronavirus.jhu.edu/us-map
From the Institute for Health Metrics and Evaluation (Univ. of Washington site supported by
Microsoft XXXXXXXXXXhttps:
covid19.healthdata.org/united-states-of-america
From a high school student’s site in the state of Washington.
Sources: https:
nonews.com/index.php/2020/01/tracking-coronavirus-u-s-data
https:
www.cdc.gov/coronavirus/2019-ncov/cases-updates/cases-in-us.html
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
www.cdc.gov/coronavirus/2019-ncov/cases-updates/cases-in-us.html
https:
nonews.com/index.php/2020/01/tracking-coronavirus-u-s-data
https:
covid19.healthdata.org/united-states-of-america
Examples from the Top 5 React Graphing Frameworks
nivo rocks: https:
nivo.rocks/#
React-Vis: https:
uber.github.io
eact-vis
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
uber.github.io
eact-vis
https:
nivo.rocks/#
Victory
Recharts: https:
echarts.org
ChartJS: https:
www.chartjs.org/
canvasJS: https:
canvasjs.com
eact-charts
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
www.chartjs.org
DATA SOURCES used by the most popular Covid-19 sites.
BNO: https:
nonews.com/index.php/2020/01/tracking-coronavirus-u-s-data
1point3acres: https:
coronavirus.1point3acres.com
worldometers.info: https:
www.worldometers.info/coronavirus
the COVID tracking project: https:
covidtracking.com/data
CDC: https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.cdc.gov_coronavirus_2019-
2Dncov_index.html&d=DwMFaQ&c=n6-
cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHce
LgA3njBSxpFaSkY&s=h6IhY9XL94FOKx6QJnNFE7oopNAn8i_x1i6glDHWTd0&e=
ECDC: https:
www.ecdc.europa.eu/en/geographical-distribution-2019-ncov-cases
WHO: https:
urldefense.proofpoint.com/v2/url?u=https-
3A__www.who.int_emergencies_diseases_novel-2Dcoronavirus-2D2019_situation-
2Dreports&d=DwMFaQ&c=n6-
cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3
njBSxpFaSkY&s=Kqo9h3kYNxWfxMkTXGNLn2mEPiaPYMNXyv6MBhwWxrQ&e=
Functionality: Projects must...
Use ReactJS and one or more ReactJS frameworks
Connect to at least one datasource for showing your statistics
Create a COVID-19 website that shows
• Cumulative confirmed, active, recovered, and died cases
• Cu
ent state of the spread of the virus in a table, ranked in descending orde
◦ By country, and/o
◦ By states or provinces within a country, and/o
◦ By counties, and/o
◦ By zip codes (mail codes)
• Cu
ent state in a graph which updates as the user selects a geographic region
• Recent changes from the previous day, and/or a history of changes in a graph
• Prediction
ate of change (e.g., doubling every 2 days, or halving every 4 days)
• Predicted actual cases (not just confirmed – e.g., a possible number is between confirmed * 10
to deaths * XXXXXXXXXXFor example, 40,000 confirmed / 900 deaths -> 400,000 to 900,000 actual
• Provide updates of your statistics throughout the day (at least once/day)
For debugging, allow your data to be downloaded and compared against the sources
Teams (max four members per team)
You Teams typically divide up into different functionalities: API communication, UI design such as
page layout using HTML, CSS, and ReactJS frameworks for Bootstrap, Graphing, ReactJS custom
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.who.int_emergencies_diseases_novel-2Dcoronavirus-2D2019_situation-2Dreports&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=Kqo9h3kYNxWfxMkTXGNLn2mEPiaPYMNXyv6MBhwWxrQ&e
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.who.int_emergencies_diseases_novel-2Dcoronavirus-2D2019_situation-2Dreports&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=Kqo9h3kYNxWfxMkTXGNLn2mEPiaPYMNXyv6MBhwWxrQ&e
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.who.int_emergencies_diseases_novel-2Dcoronavirus-2D2019_situation-2Dreports&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=Kqo9h3kYNxWfxMkTXGNLn2mEPiaPYMNXyv6MBhwWxrQ&e
https:
www.ecdc.europa.eu/en/geographical-distribution-2019-ncov-cases
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.cdc.gov_coronavirus_2019-2Dncov_index.html&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=h6IhY9XL94FOKx6QJnNFE7oopNAn8i_x1i6glDHWTd0&e
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.cdc.gov_coronavirus_2019-2Dncov_index.html&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=h6IhY9XL94FOKx6QJnNFE7oopNAn8i_x1i6glDHWTd0&e
https:
urldefense.proofpoint.com/v2/url?u=https-3A__www.cdc.gov_coronavirus_2019-2Dncov_index.html&d=DwMFaQ&c=n6-cguzQvX_tUIrZOS_4Og&r=ZNGvwmzlj8kMBY6JiOVCuA&m=I4tRzMk97krELxTlEBHo8DfBIHceLgA3njBSxpFaSkY&s=h6IhY9XL94FOKx6QJnNFE7oopNAn8i_x1i6glDHWTd0&e
https:
covidtracking.com/data
https:
www.worldometers.info/coronavirus
https:
coronavirus.1point3acres.com
https:
nonews.com/index.php/2020/01/tracking-coronavirus-u-s-data
components, and so on. You may discuss your project and the technologies you are using with other
teams, but each team must build its own application and submit its own work.
Working with members of your team
Each student on the team will receive the same grade. If you run into issues with your teammates, it is
your responsibility to attempt to resolve them. Failing that (if you cannot contact them),
ing the
problem to my attention as soon as possible -- do not wait until the due date.
Presentations Since we cannot meet in person, each group will produce a 10-15 minute video of
their work. Each of the other groups will meet virtually to watch the other groups, and to grade them
using the below categories. It is recommended that each member of your group participate in your
group presentation. It should first go through the functionality of the main parts of the website,
followed by the data sources and frameworks used, and finally by details of implementation you want
other groups to see.
Grading Your project will be judged according to the ru
ic on the next page, and by
other teams, with up to 3 points each for each of the following categories, for a total of
up to 30%.
Scoring will be submitted online, through a poll
1) Quality of the presentation / teamwork
2) Quality of documentation describing your data sources and update speed
3) ReactJS charts and graphs functionality (how is data displayed – tree graph?)
4) ReactJS table functionality (display of statistics in tables, sortable ?)
5) Project regional data functionality (country, state, county, zip code)
6) Project data update (how often is the data updated)
7) Code quality
8) Innovation
9) Overall web design
Submission
Upload the code and documentation for this project to a new public GitHub repository.
To complete your submission, print the next two sheets, fill out the spaces on the first sheet, and
submit both sheets to the professor in class by presentation day. Failure to follow the instructions
exactly will incur a 10% penalty on the grade for this assignment.
cpsc-349: Front-end web development XXXXXXXXXXCovid-19 Website page 1 of 11
CPSC-349 COVID-19 Project Submission,
due: 17 Dec 2021 at 2359
Team Name: XXXXXXXXXXTeam Members:
Repository _____________________________________________________________________.github.io
Verify each of the following items and place a checkmark in the co
ect column. Each item inco
ectly marked
will incur a 5% penalty on the grade for this assignment
Completed Not Completed COVID-19 website
□ □ Created a COVID-19 website that shows the spread of the virus in regional, geographic information (*must* use a map)
□ □ Showed regional information by at least two of the following: by country, and/o
y state, and/or by county, and/or by zip code
Has map showing cu
ent confirmed, active, recovered, and fatal cases by at least
two of the following: by country, by state, by county, and/or by zip code
□ □ Has tables showing cu
ent confirmed, active, recovered, and fatal cases by region, including changes from the previous data
□ □ Has tables showing cumulative stats by region
□ □ Has graphs showing cu
ent confirmed, cumulative, and daily stats by region
□ □
Has graphs showing projected actual statistics per region (e.g., 10x confirmed
cases, or 1000x confirmed deaths). For example, if it reports 52,000 confirmed
cases and 930 deaths, actual statistics are between 520,000 and 930,000 cases.
□ □ Shows cu
ent state in a graph which updates as