Challenge Overview
This is the MEDIUM 500 points competition. Learn More and Register for this competition before submitting a solution to this problems
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?
Now that your body temperature report app is ready, it is time to show the current COVID-19 cases to the Allied Force. That is the first-hand report, which is very important for the decision of the Supreme Headquarters.
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
When the app is launched it shows the main screen that contains:
-
Two tabs at the bottom: Total Stats, Region Stats;
-
Total Stats screen opened by default (showing its title and content).
-
All the two screens share the same navigation bar, the navigation bar should show the name of the current active screen.
-
The navigation bar should also have a "Share" button which will allow the user to share the current screen's screenshot.
When the user taps on any of the bottom tabs, the corresponding screen should be opened, the title should be changed correspondingly and the button should be highlighted to reflect the opened screen.
Total Stats screen
This screen shows the general stats of the COVID around the world, it should include four cards as below to show
-
Total confirmed cases
-
Current infected cases
-
Recovered cases
-
Deaths
Here is a sample layout for your reference, you don’t have to strictly follow the same.
It should also include a pie chart in the screen to show the percentage of the Current infected cases, the Recovered cases, the Deaths.
Region Stats screen
This screen lists the regional stats of the COVID of each country/region, it should have a scroll view that includes the cards for every country/region. The cards should be ordered by the total confirmed cases descendly.
By clicking on each card, pop up a bottom sheet to show the details of the country/region. The bottom sheet should include
-
Total confirmed cases
-
Current infected cases
-
Recovered cases
-
Deaths
Here is a sample layout for your reference, you don’t have to strictly follow the same.
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/30142491
- Medium: 500 Points, Challenge Link: https://www.topcoder.com/challenges/30142489
- Hard: 1000 Points, Challenge Link: https://www.topcoder.com/challenges/30142490
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)