The assignment is in detail in the .pdf. It has to be coded and i need to know if you can do the code?
CPSC 349: Front-End Web Engineering – Fall 2021 COVID-19 Project, due: 17 Dec 2021 at 2359 Given the current 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, libraries, 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://react-bootstrap.github.io Semantic-UI https://semantic-ui.com React Toolbox http://react-toolbox.io/#/ Ant Design https://ant.design React Foundation https://www.npmjs.com/package/react-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/react-vis/ (Uber’s large, composable charting library) Victory: https://formidable.com/open-source/victory/ (range of modular charting components) Recharts: https://recharts.org/en-US (super simple, well-built, React composable charting library) ChartJS: https://www.chartjs.org/ (simple, flexible, JS charting library for developers) repackaged as React-chartjs-2: https://github.com/jerairrest/react-chartjs-2 canvasJS: https://canvasjs.com/react-charts/ cpsc-349: Front-end web development Covid-19 Website page 1 of 11 https://nivo.rocks/#/ https://canvasjs.com/react-charts/ https://www.npmjs.com/package/react-foundation https://ant.design/ http://react-toolbox.io/#/ https://semantic-ui.com/ https://react-bootstrap.github.io/ https://material-ui.com/ https://github.com/jerairrest/react-chartjs-2 https://www.chartjs.org/ https://recharts.org/en-US https://formidable.com/open-source/victory/ https://uber.github.io/react-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 Covid-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 Covid-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 Covid-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 Covid-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). https://covid19.healthdata.org/united-states-of-america From a high school student’s site in the state of Washington. Sources: https://bnonews.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 Covid-19 Website page 1 of 11 https://www.cdc.gov/coronavirus/2019-ncov/cases-updates/cases-in-us.html https://bnonews.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/react-vis/ cpsc-349: Front-end web development Covid-19 Website page 1 of 11 https://uber.github.io/react-vis/ https://nivo.rocks/#/ Victory Recharts: https://recharts.org/ ChartJS: https://www.chartjs.org/ canvasJS: https://canvasjs.com/react-charts/ cpsc-349: Front-end web development Covid-19 Website page 1 of 11 https://www.chartjs.org/ DATA SOURCES used by the most popular Covid-19 sites. BNO: https://bnonews.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 • Current state of the spread of the virus in a table, ranked in descending order ◦ By country, and/or ◦ By states or provinces within a country, and/or ◦ By counties, and/or ◦ By zip codes (mail codes) • Current 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/rate 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 * 1000). For 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 Covid-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://bnonews.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), bring 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 rubric 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 Covid-19 Website page 1 of 11 CPSC-349 COVID-19 Project Submission, due: 17 Dec 2021 at 2359 Team Name: Team Members: Repository _____________________________________________________________________.github.io Verify each of the following items and place a checkmark in the correct column. Each item incorrectly 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/orby state, and/or by county, and/or by zip code Has map showing current 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 current confirmed, active, recovered, and fatal cases by region, including changes from the previous data □ □ Has tables showing cumulative stats by region □ □ Has graphs showing current 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 current state in a graph which updates as