How to build a weather forecast app in Bubble

Sign up at openweathermap.org and get a free API key. In Bubble, go to Plugins → API Connector → Add API named 'Weather.' Add a GET call 'Current Weather' with URL: https://api.openweathermap.org/data/2.5/weather?q=[city]&appid=[api_key]&units=metric. Mark api_key as Private. Set Use as Data. Initialize with a test city.

1GET https://api.openweathermap.org/data/2.5/weather?q=[city]&appid=[api_key]&units=metric
2
3Response:
4{
5  "main": { "temp": 22.5, "humidity": 65 },
6  "weather": [{ "description": "clear sky", "icon": "01d" }],
7  "wind": { "speed": 5.2 },
8  "name": "London"
9}

Add a Search Input for city name and a Search button. On click: Set state 'current_city' = Input value. Below, add a Group with data source: Get data from external API → Weather - Current Weather (city = current_city). Display: city name, temperature with °C, weather description, humidity percentage, wind speed, and the weather icon (URL: https://openweathermap.org/img/wn/[icon_code]@2x.png).

Add a second API call 'Forecast' with URL: https://api.openweathermap.org/data/2.5/forecast?q=[city]&appid=[api_key]&units=metric. Initialize it. This returns 5-day/3-hour forecasts. Display in a horizontal Repeating Group, filtering to one entry per day (noon reading). Show day name, icon, high/low temperatures.

Use the 'Current Geographic Position' data source (available on any element). On Page is loaded: use the user's latitude/longitude with a location-based API call. Add a second API call variant using lat/lon parameters instead of city name. Show a 'Use My Location' button that fetches weather for the detected coordinates.

Add weather-appropriate background colors or gradients based on conditions (blue for clear, gray for cloudy, dark for rain). Use conditional formatting: When weather description contains 'rain' → background = gray gradient. Add a temperature unit toggle (°C/°F) that switches the API parameter between metric and imperial.