In this task, you will build a simple Weather App using React and JavaScript. You will integrate with a public API to fetch weather data, render the data and ensure a user-friendly experience.
- Use the OpenWeatherMap API (or a similar public API) to fetch weather data for Singapore (Lat, Long provided)
- Display the current weather conditions (temperature, humidity, wind speed, etc.)
- Display a 5-day weather forecas
- Handle errors and edge cases (e.g., API errors, no data found)
- Style the app using CSS
- Demonstration interface layout for inspiration:
![Screenshot 2024-06-25 at 1 24 22 PM](https://private-user-images.githubusercontent.com/1856418/342591692-351fb728-a373-46c3-8338-a5d920ea9ad1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjkyOTEsIm5iZiI6MTcyNDEyODk5MSwicGF0aCI6Ii8xODU2NDE4LzM0MjU5MTY5Mi0zNTFmYjcyOC1hMzczLTQ2YzMtODMzOC1hNWQ5MjBlYTlhZDEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjBUMDQ0MzExWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODlkMDQxY2Q2NWZjZWVlYzMzMzJhY2EwMjBmODkwZjFjMTc5YTA4ODViNWJkN2RjOWE3OGQxMTQ3ZmY4Mjk4NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.5XGNUOcQ25GvytSr8PJjOCqz4ZD9SwphbILFvIjfPQ8)
- You will have 60 minutes to complete the task
- You will be pair programming with the interviewer
- You can use any React and TypeScript resources ( documentation, online tutorials, etc.) but no external libraries or frameworks
- You will be evaluated on your problem-solving skills, coding skills, and communication skills
- Take a moment to understand the requirements and ask clarifying questions if needed
- Start by fetching and parsing the API data
- Use React components to render the data in a user-friendly format
- Handle errors and edge cases gracefully
- Write clean, readable, and modular code
- Communicate your thought process and code decisions with the interviewer
OpenWeatherMap API documentation: 5 day weather forecast https://openweathermap.org/forecast5
Key values from response:
{
"cod": "200",
"message": 0,
"cnt": 40,
"list": [
{
"dt": 1647345600, // Timestamp
"main": {
"temp": 287.39,
"feels_like": 286.38,
"temp_min": 286.69,
"temp_max": 287.39,
"pressure": 1021,
"sea_level": 1021,
"grnd_level": 1018,
"humidity": 58,
"temp_kf": 0.7
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"wind": {
"speed": 3.08,
"deg": 128,
"gust": 4.3
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "d"
},
"dt_txt": "2022-03-15 12:00:00" // DateTime
}
]
}
Good Luck!