[KongchangAI]
Tutorials· 1 min read· 683 words

iNaturalist Observation Aggregation Display: Building a Full-Stack Project from a Phone Inside a Tent

iNaturalist Observation Aggregation Display: Building a Full-Stack Project from a Phone Inside a Tent

Simon Willison built a full-stack iNaturalist aggregation project on his phone while camping using Claude Code.

Simon Willison completed an iNaturalist observation aggregation project entirely on his phone during a camping trip. The project includes a Python CLI tool (inaturalist-clumper) that clusters observations by time and proximity, a Git Scraping pipeline using GitHub Actions for automated data collection, and a Claude Code-generated frontend page with lazy loading and modal image previews.

iNaturalist Observation Aggregation Display: Building a Full-Stack Project from a Phone Inside a Tent

While camping, most people are roasting marshmallows — Simon Willison is coding on his phone. That's probably how programmers make peace with nature. He recently shared an iNaturalist observation aggregation project, covering everything from a Python CLI tool to an automated data pipeline to a frontend page, all completed on his phone during a camping trip.

Why Build This Project

Simon has two iNaturalist accounts with a substantial collection of nature observations. He wanted to group and display these records by time and location — for example, all the plants and animals photographed on a particular afternoon in a specific park would be grouped together, creating a complete "observation diary" effect.

The requirements sound simple, but what's interesting is that he chose to complete the entire project while camping. Most people camp to get away from technology; he camps to prove that technology is inescapable. Coding with Claude Code for web on a phone — what is this? Just another day for a cyber nomad.

Building inaturalist-clumper: A Python CLI Clustering Tool

The first step was developing a Python command-line tool called inaturalist-clumper, designed to fetch and cluster iNaturalist observations.

The clustering logic is intuitive: observations within 2 hours and 5 kilometers are automatically grouped together. This algorithm essentially reconstructs your afternoon walk — you photographed a bird by the lake, a flower in the bushes ten minutes later, and a bug in the grass half an hour after that. They naturally belong to the same "outing."

The tool is called "clumper" — unpretentious naming, but functionality as precise as an ecologist's GPS journal. Python CLI tools are always the first blade in Simon's Swiss Army knife.

Git Scraping: Using GitHub as a Free Data Pipeline

For data collection, Simon pulled out his signature move — Git Scraping.

He created a simonw/inaturalist-clumps repository that uses GitHub Actions to periodically run the CLI tool and save results as a clumps.json file. This means:

  • GitHub Actions serves as a free cron job server
  • The GitHub repository serves as a free database
  • GitHub-hosted JSON files natively support CORS, so frontend JavaScript can fetch them directly

Git Scraping automated data collection workflow

This is like discovering that the hotel's free breakfast can be packed up and used as lunch and dinner too — technically within the rules, but you have to admire the brazen creativity. Microsoft is probably quietly calculating bandwidth costs.

Claude Code Generates the Frontend Display Page

The final step was the frontend display. Simon used a natural language prompt to have Claude Code generate the inat-sightings.html page, with features including:

  • Fetching clumps.json data from GitHub
  • Using lazy loading to display thumbnails (so it doesn't freeze your phone by loading hundreds of images at once)
  • Clicking thumbnails to view full-size images in an HTML modal
  • Annotating each image with the species' common name

This isn't just "having AI help write code" anymore — it's "dictating a requirements document and having AI deliver the finished product." One prompt, and lazy loading, modal image previews, and species name annotations are all taken care of.

The entire project — from backend CLI to data pipeline to frontend display — was completed full-stack by one person on a phone inside a tent. This should be a humbling thought for companies that need three teams and two weeks of standups to ship a single feature.

Tech Stack Summary

ComponentTechnical Solution
Data fetching & clusteringPython CLI (inaturalist-clumper)
Automated schedulingGitHub Actions (Git Scraping)
Data storage & distributionGitHub repository JSON files
Frontend displayPure HTML/JS, generated by Claude Code
Development environmentPhone + Claude Code for web

When "phone" ranks higher than "tent" on your camping gear checklist, you know this person isn't communing with nature — they're using nature as material to feed their next open-source project.

Project link: iNaturalist Sightings

Share:

Related articles