Corona Cases Report Enhancement: [Hard - 1000 Points] React Native Skill Builder Competition - W4

This is the 1000 points Hard level problem of Topcoder Skill Builder Challenge: React Native. For more challenge context info Register for the Host Competition before submitting a solution to this problem.

Before competing for this competition, you need to finish the MEDIUM 500 points competition first, because you need to build the app based upon the outcome of the MEDIUM 500 points competition.

Prizes

We will offer $75 for five random successful submissions in the Hard problem! Join and submit!

Problem Statement: Corona Cases Report Enhancement

The case report app was great, but the Supreme Headquarters needs more features to visualize the data. It is time for you to add pie charts, line charts and a map to the app for the data visualization.

Technology Stack

• You can use either React Native CLI or Expo CLI.
• The language must be Typescript
• Use Nodejs LTS (12.x)
• The suffix of the components should be .tsx

What do you need to do?

The case report app was great, but the Supreme Headquarters needs more features to visualize the data. It is time for you to add pie charts, line charts and a map to the app for the data visualization.

You need to develop a React native app to show the current COVID-19 cases with the following requirements:

The data source of COVID should be from https://covid19api.com/, you can see the API details here in the Postman

Main screen

You need to update the screen as below

• Add a new tab COVID Map at the bottom.
• Add a pie chart to show the percentage of the Current infected cases, the Recovered cases, the Deaths.

Region screen

You need to update the screen as below

• In the bottom sheet, add a pie chart to show the percentage of the Current infected cases, the Recovered cases, the Deaths of each selected country.
• Add a button "Show trending" in the bottom sheet, clicking on the button, the app will navigate to a new Trending Screen

Trending screen

In the trending screen, there should be two date pickers, which you can pick the start and end dates.

And there will be a line chart shows the following items of each day

• Total confirmed cases
• Current infected cases
• Recovered cases
• Deaths

Each item should be a line, and in the line chart, each item should have a legend.

There should be checkboxes that we can show/hide the line of each item.

By default the end date would be today, the start date would be 7 days before.

Once we select the start/end date, the data should be re-fetched from the API and the chart will be re-rendered.

You need to implement the cache system so that we don’t need to fetch data of the same data range twice.

COVID map screen

This screen shows a google map with markers, each marker represents a country/region, by clicking on the marker, it pops up the same bottom sheet of Region Stats screen to show the details of the country/region.

Important things to note

• You should use Redux to manage the state.
• The screen should be responsive to match different screen sizes of devices.
• The app should be able to run on both iOS and Android.
• There should be loading animation while loading data from the API.

You can freely design the UI/UX of the screen, it doesn’t need to be fancy but should be looking good.

Instructions:

• We have prepared three problems: Easy, Medium, and Hard, which are worth 250, 500, 1000 points respectively. Points are based on the difficulty of the problem.
• The competitions may or may not be related to each other.
• The links to the problems/competitions are provided below.
• Each problem has one single requirement to achieve. We will judge your submission based on the requirement being fulfilled in each problem, so as long as the requirements are met with minimal code quality, you would be rewarded with points for that particular problem.
• Here is the leaderboard with individual problem score and total score across weeks is available.

Problems

1. Easy: 250 Points :: Body temperature report
2. Medium: 500 Points :: Corona Cases Report
3. Hard: 1000 Points :: Corona Cases Report Enhancement

Final Submission Guidelines

• The source code of your React Native app.
• Deployment guide and validation document. You do need to provide a deployment guide with steps on how to build and deploy your mobile app locally.
• A demo video to verify that your submission meets all the requirements (Required)