Simon Willison Built an iNaturalist Observation Display Tool Using Only a Phone + Claude Code

Simon Willison, during a camping trip, built a complete toolchain for displaying iNaturalist nature observation records from scratch—using nothing but his phone and Claude Code. This project demonstrates how AI programming assistants are making "develop anywhere, anytime" a reality.

Project Background: Why Develop on a Phone?

iNaturalist is one of the world's largest citizen science platforms, jointly operated by the California Academy of Sciences and the National Geographic Society. As of 2024, it has accumulated over 200 million observation records covering more than 400,000 species. Its core mechanism is community-driven species identification—after users upload photos, other users and AI models help identify species. When multiple people reach consensus, a record is marked as "Research Grade," and this data is synced to the Global Biodiversity Information Facility (GBIF) for scientific research. The platform provides a comprehensive REST API supporting queries by user, geographic range, time period, and other dimensions.

Simon Willison has two iNaturalist accounts and wanted a simple way to display observations from both accounts on a single page, grouped by time.

This requirement seems simple but involves multiple layers: data fetching, aggregation processing, scheduled updates, and frontend display. What makes it interesting is that he chose to complete the entire development on his phone using Claude Code during a camping trip. Claude Code is Anthropic's command-line AI programming tool that can directly read and write the file system, execute shell commands, and manage Git operations. Unlike traditional IDEs, Claude Code's pure text interaction interface makes it naturally suited for running in mobile terminal apps. Developers only need to connect to a remote server via SSH or interact with Claude Code directly in a local terminal to complete the entire workflow of writing, debugging, and deploying code—eliminating the dependency on graphical IDEs and large screens.

Technical Architecture: A Three-Layer Serverless Toolchain

The entire project consists of three independent but interconnected components. The architecture design is clean and clever, requiring no backend server whatsoever.

Python CLI Data Processing Tool

Simon first built a Python command-line tool called inaturalist-clumper to fetch observation records from the iNaturalist API and perform "clumping" processing. Clumping means grouping observations that are within 2 hours of each other in time and within 5 kilometers in geographic distance into the same group. This aggregation logic effectively simulates the concept of "a single outing"—all species you photograph during one walk or hike are naturally grouped together.

This design borrows from the stay point detection concept in trajectory analysis. The algorithm traverses observation records sorted by time, starting a new group whenever the time gap between adjacent records exceeds 2 hours or the spatial distance exceeds 5 kilometers. Geographic distance is typically calculated using the Haversine formula, which computes the great-circle distance on a sphere based on the latitude and longitude of two points. This simple but effective heuristic avoids complex clustering algorithms (like DBSCAN) while accurately reconstructing users' actual travel patterns in most scenarios.

Git Scraping for Automated Updates

The second component is the inaturalist-clumps repository, which employs the "Git Scraping" pattern that Simon himself popularized.

Git Scraping is a data collection pattern that Simon Willison proposed and popularized in 2020. Its core idea combines GitHub Actions' scheduled tasks (cron jobs) with Git's version control capabilities: at fixed intervals, a script runs to fetch data from external sources, writes the results to JSON/CSV files in the repository, and automatically commits. If the data hasn't changed, Git produces no new commit; if there are changes, the differences are precisely recorded. This pattern has been widely adopted for tracking government data changes, monitoring price fluctuations, recording API response changes, and more. Compared to traditional database solutions, its advantages are that it's completely free, comes with built-in audit logs, and stores data in plain text for easy analysis.

This design has several core advantages:

• Free hosting: GitHub provides free static file hosting
• CORS support: Files on raw.githubusercontent.com can be directly fetched by browser-side JavaScript
• Version history: Every update has a Git record, providing natural data change tracking
• Zero maintenance cost: No servers or databases to maintain

The CORS support point deserves further explanation: CORS (Cross-Origin Resource Sharing) is a browser security mechanism that by default blocks webpage JavaScript from requesting resources under different domain names. GitHub's raw.githubusercontent.com domain sets appropriate CORS policies in its response headers, allowing webpages from any origin to fetch file content hosted there via the fetch API. This means developers can store JSON data files in a GitHub repository and read that data directly from frontend pages on any domain, without building a dedicated API server or configuring proxies. Combined with GitHub Pages or other static hosting services, this enables fully backend-free dynamic data display applications.

Pure Frontend Single-Page Display Application

The final layer is a single-page HTML application that uses fetch() to request the clumps.json file from GitHub, then renders all observation records on the page. The page loads thumbnails (small.jpg) from iNaturalist's image CDN, displays larger images (large.jpg) in a modal on click, and shows species common names. Images use loading=lazy for lazy loading to optimize page performance.

Using a Single Prompt to Have Claude Code Generate the Frontend App

The most striking aspect is how the frontend page was developed. Simon input a descriptive prompt to Claude Code that explicitly specified the data source URL, thumbnail and full-size image URL patterns, lazy loading requirements, modal interaction, and species name display—all key details. Claude Code generated a working HTML page directly from this.

The quality of this prompt is worth studying—there are no vague descriptions, and every technical detail has clear specifications. This reinforces an important point: the core skill in AI-assisted programming is the ability to describe requirements precisely.

Takeaways for Developers

Although this project is modest in scale, it demonstrates several important trends:

1. Mobile AI programming is viable: With AI programming assistants like Claude Code, completing entire projects on a phone is no longer a pipe dream
2. Serverless architecture taken to its extreme: The entire project has no backend server, relying entirely on GitHub Actions + static files + client-side rendering
3. The practicality of the Git Scraping pattern: This pattern of using a Git repository as a simple database is well-suited for personal projects and small-scale data scenarios
4. AI-assisted rapid prototyping: Going from idea to working tool can happen during breaks between camping activities

Simon Willison has long been a deep practitioner of AI tools. This project once again proves that when developers possess clear architectural thinking and precise requirement articulation skills, AI programming assistants can dramatically accelerate the development process, making "weekend projects" truly achievable in a single weekend.