# Skye

- [Case study](https://tesselpunt.com/projects/skye)

A mobile weather app with hourly and weekly forecasts, illustrated conditions and location suggestions powered by my own search infrastructure.

Find a place. See what’s ahead.

Role: Interface design · frontend & search infrastructure

Technologies: React, TypeScript, Cloudflare Workers, PostgreSQL, PostGIS

- [Live application](https://world.org/ecosystem/app_8ef6a5c8af9dce473c8a5b6b3808308f)

I built Skye as a weather mini app for World App. Its interface brings the current conditions, an expandable details card and hourly or weekly forecasts into one mobile view.

I also built the location search and autosuggestion infrastructure. Weather forecasts come from Open-Meteo; the place suggestions and search ranking run on our own services.

## Usage

Snapshot: 2026-10-04. Figures supplied by the portfolio owner.

- 55.5k all-time unique users

- [miniapps.world activity table](https://www.miniapps.world/)

## Explore the weather interface

Skye starts with nearby city suggestions based on IP location. You can search for any other city, select it and switch between hourly and weekly views. The condition artwork changes with the weather, temperature and time of day; the details card expands to show more measurements.

The preview below uses the application’s UI components, live Open-Meteo forecasts and our live location-search service. It loads after you click Try it. It runs in a mobile frame on desktop too, so you can explore the interface without installing World App.

### Interactive demo: Skye weather

Choose a nearby suggestion or search for a city, then explore hourly and weekly forecasts. The app UI uses live search and weather services; nearby suggestions use IP location.

- [Try the demo](https://tesselpunt.com/projects/skye#demo-skye-weather)

- [Weather UI — MainPage.tsx](https://tesselpunt.com/demo-code/skye-weather/MainPage.tsx-4ceb9ad4ef46.md): Application source

- [Location search — LocationSearch.tsx](https://tesselpunt.com/demo-code/skye-weather/LocationSearch.tsx-0860311e80e5.md): Debounced suggestions and autocomplete, including request cancellation.

- [Styles — MainPage.scss](https://tesselpunt.com/demo-code/skye-weather/MainPage.scss-0294fdbb1e09.md): Application source

- [Preview setup — Scene.tsx](https://tesselpunt.com/demo-code/skye-weather/Scene.tsx-293bf3bc790c.md): Portfolio adapter · live weather and search services

## My own location-search infrastructure

A Cloudflare Worker serves suggestions and autocomplete through Hyperdrive and PostgreSQL/PostGIS. Nearby suggestions use a spatial nearest-neighbour query over a materialized city view. Search normalizes accents and combines language-specific name matching, distance, place type and text similarity to rank results.

The React search waits 300 milliseconds after input changes and cancels the previous request when the query changes or the view closes. Short input shows nearby suggestions; queries of at least two characters use autocomplete. This connects a small mobile interaction to the infrastructure I built behind it.

### Skye location search

London autocomplete results returned by our own location-search infrastructure.

Image description: Skye city search displaying London autocomplete results

- [Image](https://tesselpunt.com/media/skye-search-large.webp)

- [Screenshot page](https://tesselpunt.com/projects/skye/gallery/skye-search)

## From current conditions to a forecast

Hourly and weekly views share the same forecast cards, with temperature and rain probability presented together. The app retains already fetched periods in view state when navigating back and forth, while skeletons cover the initial weather load. Temperature formatting follows the user’s measurement preference, and interface labels are translated.

The mobile layout and illustrated weather banners are part of the shipped app. The portfolio preview keeps the weather and location services live, while leaving the production application bootstrap, analytics and World App bridge outside the preview.

On October 4, 2026, miniapps.world reported 55,538 all-time unique users for Skye. This is a cumulative reach figure, rather than a current active-user count.

- [Skye on World](https://world.org/ecosystem/app_8ef6a5c8af9dce473c8a5b6b3808308f)
- [Open-Meteo · forecast data provider](https://open-meteo.com/)
- [Activity source · October 4, 2026 snapshot](https://www.miniapps.world/)

### Skye weekly forecast

The weekly view with live forecast data, captured in October 2026.

Image description: Skye weekly forecast with daily temperature and precipitation cards

- [Image](https://tesselpunt.com/media/skye-week-large.webp)

- [Screenshot page](https://tesselpunt.com/projects/skye/gallery/skye-week)

## Screenshots

### Skye current weather

Skye’s weather interface, captured with a live London forecast in October 2026.

Image description: Skye showing London weather, illustrated conditions, current details and hourly forecast cards

- [Image](https://tesselpunt.com/media/skye-weather-large.webp)

- [Screenshot page](https://tesselpunt.com/projects/skye/gallery/skye-weather)

### Skye location search

London autocomplete results returned by our own location-search infrastructure.

Image description: Skye city search displaying London autocomplete results

- [Image](https://tesselpunt.com/media/skye-search-large.webp)

- [Screenshot page](https://tesselpunt.com/projects/skye/gallery/skye-search)

### Skye weekly forecast

The weekly view with live forecast data, captured in October 2026.

Image description: Skye weekly forecast with daily temperature and precipitation cards

- [Image](https://tesselpunt.com/media/skye-week-large.webp)

- [Screenshot page](https://tesselpunt.com/projects/skye/gallery/skye-week)
