Challenge Overview
This is the HARD 1000 points competition. Learn More and Register for this 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.
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 count cannot be less than 0.
-
Once the count value is changed, the total count should be updated accordingly.
-
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.
UI/UX requirements
You can freely design the UI/UX of the screen, it doesn’t need to be fancy but should be looking good.
Skill Builder Instruction:
- We have prepared three problems: Easy, Medium, and Hard, which are worth 250, 500, 1000 points respectively.
- The competitions may or may not be related to each other. But they are all competitions relating to the React tech stack.
- The links to the problems/competitions are provided below.
Problems
Easy: 250 Points, Challenge Link: https://www.topcoder.com/challenges/30141473
Medium: 500 Points, Challenge Link: https://www.topcoder.com/challenges/30141474
Hard: 1000 Points, Challenge Link: https://www.topcoder.com/challenges/30141477Final 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)