Sunshine

Difficulty: Hard

Build a simple weather app that allows users to view the current weather at their location and search for places to check their weather conditions. The app will use Open-Meteo's free Geocoding API for location search and Forecast API for fetching weather data. This challenge tests API integration, state management, UI responsiveness, and handling concurrency when making multiple API requests.

App Structure

1. Search Bar – Allows users to type in a prefix for place names and fetch matching places.
2. Current Location Weather – Displays the current weather at the user's detected location. If location access is denied, this section is hidden.
3. Favorite Places Weather – Displays weather for places users have added as favorites.

Requirements

Fetch Current Location Weather

• On app launch, request location access permission. If granted, retrieve the user’s latitude and longitude.
• Use the Forecast API to fetch the weather data, and display:
  • Label: "Your Location"
  • Current Temperature
  • Weather Condition Summary (derived from weather code - see API docs below for more info)

Search for Places

• Implement a search bar to allow users to search for places dynamically. Use the Geocoding API to fetch matching places.
• Display results in a list with:
  • Place Name
  • Region Name: The first available and non-empty value from the following fields: admin1, admin2, admin3, country.
  • "Add" Button to add the place to favorites.
• Debounce the search input to limit API requests, adding a 300ms delay after the user stops typing. Additionally, consider waiting until at least 3 characters are entered before making a request to improve search accuracy and reduce unnecessary calls.

Fetch and Display Favorite Places Weather

• When a place is added to favorites, use its latitude and longitude to fetch the current weather using the Forecast API.
• Display each favorite place’s weather in a section under Favorite Places, showing:
  • Place Name
  • Current Temperature
  • Weather Condition Summary (derived from weather code - see API docs below for more info)
  • (Optional) A weather emoji representing the current condition to enhance glanceability.
• If there are multiple favorite places, make concurrent API calls and update the UI dynamically.

Persist Favorite Places

Store the favorite places' name, latitude, and longitude locally. On next app launch, restore the stored places and fetch their weather data immediately.

API Doc

Place Search

GET https://geocoding-api.open-meteo.com/v1/search accepts a search term and returns a list of matching locations. URL parameters are listed below:

Sample Request & Response

https://geocoding-api.open-meteo.com/v1/search?name=seat&count=2

{
  "results": [
    {
      "id": 5809844,
      "name": "Seattle",
      "latitude": 47.60621,
      "longitude": -122.33207,
      "country": "United States",
      "admin1": "Washington",
      "admin2": "King",
      "admin3": "City of Seattle"
    },
    {
      "id": 2638277,
      "name": "Seaton",
      "latitude": 52.57489,
      "longitude": -0.66759,
      "country": "United Kingdom",
      "admin1": "England",
      "admin3": "Seaton"
    }
  ],
}

Refer to Geocoding API Docs for more details.

Current Weather

GET https://api.open-meteo.com/v1/forecast accepts a geographical coordinate, a list of weather variables. URL parameters are listed below:

If weather variables are included in the current array, the response will return the corresponding information:

Sample Request & Response: https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current=temperature_2m,weather_code&temperature_unit=fahrenheit

{
  "latitude": 52.52,
  "longitude": 13.419998,
  "current_units": {
    "temperature_2m": "°F",
  },
  "current": {
    "temperature_2m": 35.7,
    "weather_code": 0,
  }
}

Weather Codes

Refer to Forecast API Docs for full details.