Inspiration
A pelican on a red bicycle sounds simple. Then it starts traveling through improbable places, and several AI coding assistants discover how demanding one bird can be.
My separate Golden Pelican project grew into a world of animated scenes. Visitors needed a way to discover its destinations without opening every scene individually.
Golden Pelican’s Whereabouts turns that need into a fictional WANTED bulletin: an interactive atlas for a traveler who refuses to stay put.
What it does
- Explore sightings on an interactive map.
- Open postcard-style reports and jump into the corresponding scenes on the Golden Pelican main site.
- Browse Unlocatable Locations for adventures that do not fit on an ordinary map.
- Nominate and vote for a destination, then reveal your leading choice through a sealed next-stop card.
- Switch between Chinese and English on desktop or mobile.
Nominations and votes stay in each visitor’s browser. They are personal choices, not a shared global poll.
How I built it
I built the companion application with AI coding assistance, using HTML, CSS, JavaScript, Leaflet, and Leaflet.markercluster. Esri supplies the map tiles, localStorage preserves preferences and nominations, and the Web Audio API generates ambient sound. The static site runs on GitHub Pages without a build step.
The repository includes scope, PRD, technical specification, and build-checklist documents. They record the visitor journey, implementation choices, and deliberate boundaries: no accounts and no shared voting backend.
The work progressed through short iterations: define the experience, build a prototype, refine the requirements, and test individual interactions and layouts.
Challenges I ran into
Keeping a growing world coherent. Map markers, postcards, and scene links need to stay aligned as the main project evolves.
Mapping impossible places. Some destinations have no meaningful coordinates. A separate collection lets visitors find them without pretending every adventure belongs on a conventional map.
Testing in context. Map-provider behavior differed between local files and hosted pages. On mobile, postcards were squeezed into the same row as their heading; separating the scrolling cards from the heading fixed the layout.
Throughout it all, the pelican remained completely unhelpful. It just kept cycling.
What I learned
Clear product boundaries make working with coding agents more manageable. Local nominations preserve the playful interaction without introducing accounts or backend infrastructure.
Generated code also needs direct checks in its intended setting. Hosted maps, small screens, persistent choices, and links into another application all require more than plausible-looking code.
The planning documents provided a shared reference for deciding what belonged in this application and what should remain outside it.
What I’m proud of
An absurd premise became a usable, bilingual companion application. The map provides orientation, the postcards invite exploration, and the nomination flow gives visitors a small part in the journey.
The pelican supplies the chaos. The application supplies the map.
What’s next
I would like to make sightings easier to synchronize with the main project and explore richer ways for visitors to suggest future journeys, while keeping the experience lightweight and playful.
Project scope and links
This submission is the Whereabouts companion application. It uses scene images and links from my separate Golden Pelican project. The linked animated world provides context; its scenes are not presented as work created for this entry.
- Try Golden Pelican’s Whereabouts
- Public repository and planning documents
- Explore the separate Golden Pelican world
Original application code is MIT-licensed. Artwork and third-party components have separate licensing notices in the repository.
Built With
- api
- audio
- css
- github
- html
- javascript
- leaflet.js
- leaflet.markercluster
- localstorage
- web
Log in or sign up for Devpost to join the conversation.