Challenge Overview
This is the EASY 250 points competition. Learn More and Register for this competition before submitting a solution to this problem.
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 navigation 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.
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 (Optional).