Body temperature report: [Easy - 250 Points] React Native Skill Builder Competition - W5

This is the 250 points Easy 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.

Problem Statement: Body temperature report

As we all know, the standard body temperature of a human is about 37 degrees Celsius. However, the corona evils might increase our body temperature to make us feel sick. So we need you to build a body temperature report app to record the temperatures of people.

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?

As we all know, the standard body temperature of a human is about 37 degrees Celsius. However, the corona evils might increase our body temperature to make us feel sick. So we need you to build a body temperature report app to record the temperatures of people.

The app only contains a single screen, which contains

• A header bar, the title should be "Topcoder Body Temperature Report".
• A form that includes the following input controls.
  • A text field for inputting the name.
  • A text field for inputting the body temperature, it can be in either Celsius or Fahrenheit. You can only input numbers in this text field, the number can only have two decimals at maximum.
  • A submit button for reporting the temperature record.
• Once the submit button is clicked, in the below there will be a table with three columns.
  • Name
  • Body temperature
  • Reported time
• Each record is in a row.
• There should also be a floating button to switch between Celsius and Fahrenheit. All the temperatures (including the values in the table and input text field) should be converted to the corresponding temperature unit.
• If the temperature format in the table should be like 37 °C or 100 °F

Important things to note

• You should use Redux to manage the state.
• The temperature cannot be less than 30 °C or higher than 50 °C, for Fahrenheit degree, the temperature cannot be less than 86 °F or higher than 122 °F. If the user input temperature is beyond the range, show an error popup with meaningful message text.
• The default temperature unit is Celsius.
• All the state just needs to be stored in memory, so it is expected that the records are gone if we kill the app and reopen it.
• The screen should be responsive to match different screen sizes of devices.
• The app should be able to run on both iOS and Android.

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 (Optional).