Phone + Claude Code: Building an iNaturalist Observation Tool with Zero Servers — Full Workflow

Background: Impromptu Development During a Camping Trip

Simon Willison — renowned developer and creator of Datasette — built a complete nature observation display tool during a weekend camping trip, using nothing but his phone and Claude Code. This project demonstrates how AI programming assistants enable developers to rapidly build practical tools in any scenario.

Simon Willison is one of the co-creators of the Django web framework, and later created Datasette — an open-source tool that instantly transforms SQLite databases into browsable, queryable APIs. He has long championed the philosophy of "data as infrastructure," is the primary advocate of the Git Scraping technique, and is one of the most active practitioners and documenters in the AI-assisted programming space. His blog and social media continuously share extensive LLM programming case studies, broadly influencing the developer community.

His need was simple: aggregate and display observation records from his two different accounts on iNaturalist (a global nature observation community platform), organized by time and location. iNaturalist is one of the world's largest citizen science platforms, jointly operated by the California Academy of Sciences and the National Geographic Society, with over 150 million species observation records. Users upload photos of flora and fauna, and the platform combines community identification with computer vision models for species recognition. Its open API allows developers to query data by user, geographic region, taxonomic classification, and other dimensions, returning structured JSON containing coordinates, timestamps, taxonomic information, and multi-resolution image URLs. This open data ecosystem enables developers like Simon to build personalized tools on top of it.

However, the implementation involved three distinct components: CLI tool development, automated data scraping, and frontend page construction.

Technical Architecture: An Elegant Three-Layer Progressive Design

Layer 1: Python CLI Data Aggregation Tool

Simon first built a Python command-line tool called inaturalist-clumper to fetch observation data from the iNaturalist API and perform "clumping" processing.

The clumping logic is highly practical: by default, it groups observation records that are within 2 hours of each other and within 5 kilometers into the same cluster. This means all discoveries from a single walk or field survey are naturally categorized together, rather than scattered as fragmented individual records. This spatiotemporal proximity-based clustering method is widely used in Geographic Information Systems (GIS), with the core idea being: if two records are sufficiently close in time and space, they likely belong to the same activity. Through parameterized design (both time threshold and distance threshold are configurable), the tool achieves a good balance between versatility and usability.

Layer 2: Git Scraping for Automated Data Updates

The second step was setting up the simonw/inaturalist-clumps repository, leveraging Simon's own promoted Git Scraping technique — using GitHub Actions to run scripts on a schedule and commit the results to a clumps.json file in the repository.

Git Scraping is a data collection paradigm that Simon Willison systematically introduced in 2020. Its core idea is to use GitHub Actions' scheduled trigger (cron) functionality to periodically run scripts that fetch external data sources, then commit the results in JSON, CSV, or other formats to a Git repository. Since Git naturally records the diff of each commit, this approach not only achieves continuous data updates but also automatically provides a complete change history — developers can trace back to the data state at any point in time. Compared to traditional database storage solutions, Git Scraping requires no server, database, or API layer maintenance — a free GitHub account can support numerous small-scale data collection tasks. The community now has hundreds of projects based on this pattern, covering government data monitoring, price tracking, pandemic data archiving, and more.

The elegance of this design lies in the fact that raw files on GitHub natively support CORS cross-origin access, meaning any frontend page can directly fetch this data via fetch() without needing an additional API server. Specifically, GitHub's raw.githubusercontent.com domain serves raw file content from repositories, and its response headers include the Access-Control-Allow-Origin: * setting, meaning frontend JavaScript code from any domain can directly request these files without being blocked by the browser's same-origin policy. Additionally, GitHub deploys CDN nodes globally to cache and distribute these static files. While cache refreshes have a delay of several minutes, this is more than sufficient for non-real-time data display scenarios. Git Scraping essentially turns a GitHub repository into a free, version-controlled data hosting platform.

Layer 3: AI-Generated Frontend Display Page

The final step is the most impressive part. Simon issued a precise prompt to Claude Code, requesting a single-page HTML application that:

• Fetches JSON data from GitHub
• Displays all observation records using iNaturalist's thumbnail URLs (small.jpg)
• Supports loading=lazy for performance optimization
• Shows a larger image (large.jpg) in a modal when a thumbnail is clicked
• Displays the common name of each species

HTML's native loading="lazy" attribute is a browser-level deferred loading mechanism, first implemented in the Chromium engine in 2019 and now supported by all major browsers. When an image element has this attribute set, the browser automatically determines the loading timing based on the image's distance from the viewport — network requests are only initiated when the user scrolls to where the image is about to enter the visible area. For gallery-type pages containing numerous thumbnails, this optimization can reduce initial page load time by over 50% while significantly reducing bandwidth consumption. In mobile network environments (such as a phone hotspot during camping), the practical effect of this optimization is particularly noticeable.

One prompt, and a complete interactive image gallery was born.

Notable Technical Highlights

Full-Stack Development on a Phone

The entire project was completed on a phone. Claude Code is an AI programming tool from Anthropic designed for developers, supporting interactive programming through terminal command line or web interface. Its web version runs in mobile browsers, allowing developers to generate code, debug, and build projects without installing a local IDE. Claude Code can understand project context, read and write the file system, execute shell commands, and generate complete code files from natural language descriptions. This capability would be nearly impossible in traditional mobile development scenarios — phones lack mature code editors, terminal emulators, and build toolchains — but AI programming assistants fundamentally bypass these limitations by abstracting complex coding operations into natural language conversations.

In an atypical development scenario like camping, the AI programming assistant compensated for the lack of a full IDE on mobile devices, redefining the boundaries of what constitutes a "development environment."

Prompt-Driven Development: A Description as a Specification

Simon's prompt to Claude Code was itself a refined technical specification. It contained the data source URL, image URL patterns, interaction behavior, performance optimization requirements (lazy loading), and content display needs. This prompt-driven development pattern is becoming part of an increasing number of developers' daily workflows.

Notably, prompt-driven development places new capability demands on developers: you need to describe technical requirements clearly enough, including data structures, interaction logic, edge cases, and performance constraints. This is essentially an extension of "declarative programming" — developers describe "what" they want, and AI handles "how" to implement it. But unlike traditional declarative programming, prompts use natural language rather than formal syntax, which both lowers the entry barrier and raises higher demands for precision of expression. Experienced developers often write higher-quality prompts because they know which technical details are critical and which can be left to the AI's discretion.

Zero-Server Architecture: Entirely Built on GitHub Infrastructure

The entire system has no self-hosted servers:

• Data retrieval: GitHub Actions scheduled tasks
• Data storage: GitHub repository (JSON files)
• Data distribution: GitHub raw file CDN
• Frontend hosting: GitHub Pages

This is a zero-cost solution entirely based on GitHub infrastructure, offering significant reference value for personal projects and small tools. This architectural pattern is sometimes called the "GitHub full stack" — extending GitHub from a pure code hosting platform into an all-in-one infrastructure combining CI/CD, data storage, and static hosting. Of course, this approach has its limitations: GitHub Actions' free tier provides 2,000 minutes per month (unlimited for public repositories), individual file size is limited to 100MB, and the raw file CDN has caching delays. But for personal projects with moderate data volumes and infrequent updates, these limitations pose virtually no practical obstacles.

Takeaways for Developers

Simon Willison's small project may not be large in scope, but it clearly demonstrates the practical value of AI-assisted development — not replacing a developer's thinking, but accelerating the journey from idea to implementation. Architecture design, data flow planning, and technology selection — these core decisions are still made by the developer, while AI handles the concrete code implementation.

When an experienced developer can complete an entire project encompassing data collection, automated updates, and frontend display while camping, using only a phone, perhaps we should rethink the boundaries of the concept of a "development environment." Tools change, but the value of architectural thinking and engineering judgment remains constant.

Key Takeaways

• Simon Willison built a complete iNaturalist observation display tool during a camping trip using only his phone and Claude Code
• The project uses a three-layer architecture: Python CLI data aggregation → Git Scraping automated updates → AI-generated frontend page
• Leverages Git Scraping to turn a GitHub repository into a free data hosting and distribution platform, achieving a zero-server architecture
• A single precise prompt generates a complete frontend application with lazy loading and modal interactions
• Demonstrates the core value of AI-assisted development: developers handle architectural decisions while AI accelerates code implementation