# How to build a weather forecast app in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a weather forecast app in Bubble by connecting to the OpenWeatherMap API through the API Connector, displaying current conditions and multi-day forecasts, and using geolocation to detect the user's location automatically. This tutorial covers API setup, data parsing, and building a clean weather dashboard.

## Overview: Weather Forecast App in Bubble

A weather app fetches and displays weather data from an external API. This tutorial connects Bubble to OpenWeatherMap's free API, shows current conditions with icons, and displays a multi-day forecast — all without writing code.

## Before you start

- A Bubble account with an app
- A free API key from openweathermap.org
- Basic understanding of the API Connector plugin

## Step-by-step guide

### 1. Set up the OpenWeatherMap API

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.

```
GET https://api.openweathermap.org/data/2.5/weather?q=[city]&appid=[api_key]&units=metric

Response:
{
  "main": { "temp": 22.5, "humidity": 65 },
  "weather": [{ "description": "clear sky", "icon": "01d" }],
  "wind": { "speed": 5.2 },
  "name": "London"
}
```

**Expected result:** The API call returns weather data for the test city.

### 2. Build the search and current weather display

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

**Expected result:** Users can search a city and see current weather conditions with an icon.

### 3. Add a multi-day forecast

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.

**Expected result:** A 5-day forecast strip displays below the current weather.

### 4. Add geolocation for automatic location detection

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.

> Pro tip: Geolocation requires HTTPS and user permission. Fall back to a city search if permission is denied.

**Expected result:** The app detects the user's location and shows local weather automatically.

### 5. Style the weather dashboard

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.

**Expected result:** A polished weather dashboard with dynamic styling based on conditions.

## Complete code example

File: `Workflow summary`

```text
WEATHER APP — SETUP SUMMARY
=============================

API CONNECTOR:
  Current Weather: GET .../weather?q=[city]&appid=[key]&units=metric
  Forecast: GET .../forecast?q=[city]&appid=[key]&units=metric
  By Location: GET .../weather?lat=[lat]&lon=[lon]&appid=[key]&units=metric

DISPLAY:
  Current: city, temp, description, icon, humidity, wind
  Forecast: 5-day strip with day, icon, high/low
  Icon URL: https://openweathermap.org/img/wn/{code}@2x.png

GEOLOCATION:
  Current Geographic Position → lat/lon
  Fall back to city search if denied

UNIT TOGGLE:
  Custom state: units (metric/imperial)
  Metric: °C, m/s | Imperial: °F, mph
```

## Common mistakes

- **Not handling the API key activation delay** — New OpenWeatherMap API keys take up to 2 hours to activate Fix: Wait for activation before testing. Use the API key test page on OpenWeatherMap to verify.
- **Calling the API on every keystroke in the search input** — Each call consumes API quota and workload units Fix: Use a Search button to trigger the call, not auto-search on input change
- **Not handling cities with special characters or spaces** — Spaces in city names break the URL if not encoded Fix: Bubble's API Connector handles URL encoding automatically for bracketed parameters

## Best practices

- Cache weather data for 30 minutes to reduce API calls
- Use the weather icon codes from OpenWeatherMap for consistent imagery
- Add a loading indicator while the API call is processing
- Fall back gracefully when geolocation is denied
- Display temperatures with one decimal place for clean formatting
- Add error handling for invalid city names

## Frequently asked questions

### Is the OpenWeatherMap API free?

Yes. The free tier allows 1,000 API calls per day, which is plenty for personal apps. Paid plans start at $40/month for higher limits.

### Can I show weather in Fahrenheit?

Yes. Change the units parameter from 'metric' to 'imperial' in the API call. Add a toggle that switches between the two.

### How do I cache weather data?

Create a WeatherCache data type. Store results with a timestamp. Check the cache before calling the API — if data is less than 30 minutes old, use the cached version.

### Can I show weather for multiple cities at once?

Yes. Store a list of favorite cities on the User record. Use a Repeating Group that calls the weather API for each city.

### Why does geolocation not work?

Geolocation requires HTTPS and user permission. Ensure your app is on a secure URL and handle the case when the user denies permission.

### Can RapidDev build a weather-based application?

Yes. RapidDev builds location-aware apps with weather integration, maps, and environmental data dashboards.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-weather-forecast-app-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-weather-forecast-app-in-bubble