Challenge Overview
Problem Statement: Corona Cases Report
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.
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
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
- Easy: 250 Points :: Body temperature report
- Medium: 500 Points :: Corona Cases Report
- 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)