{
  "id": 11667987,
  "title": "I'm 16 and I Built an Interactive Wildlife Archive. Here's Everything That Went Wrong.",
  "url": "https://urgent.news/2026/10/03/im-16-and-i-built-an-interactive-wildlife-archive-heres-everything",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-03T11:08:48.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/amiramir77/im-16-and-i-built-an-interactive-wildlife-archive-heres-everything-that-went-wrong-3poh"
  },
  "original_language": "en",
  "account": "Sixteen-year-old Amir created an interactive wildlife archive called Wildform. This Progressive Web App features 69 animal species with animations, dark/light mode, and offline support. Amir's inspiration was to create a cinematic, quiet experience where animals slowly appear from shadows as the user scrolls. He built the site using React 19, Vite, Tailwind CSS 4, Vercel, and the vite-plugin-pwa to make it installable as a Progressive Web App.\n\nWildform consists of five main sections: Hero, Field Film, Living Archive, Field Test, and Field Notes. The hero features a leopard with a slow-breathing parallax effect. The field film is a scroll-driven video that plays as you descend past it. The living archive contains 69 species, each filterable by habitat (land, ocean, air, wetlands) and presenting a detailed profile with diet, lifespan, size, conservation status, and an observation about its behavior. Each species opens into a full magazine-style article inside a modal.\n\nAmir faced several challenges during the development process. Firstly, he encountered a .webp vs .jpg trap, where his browser displayed broken images due to the incorrect file format. He resolved this issue by renaming the files on GitHub to .jpg. Secondly, Vercel kept failing the builds for an hour, with an error message indicating an unexpected end of file in the JSON config. Amir realized the problem was due to his working on an old commit, which was not merged to the main branch. Lastly, he struggled with creating a dark/light mode toggle. He initially wrote CSS overrides for every color but later realized that his site was already dark, and he needed to invert his mental model to design for light first and treat dark as the default.\n\nLooking back, Amir would make three changes if he started over. First, he would store species data in a JSON file rather than hardcoding it in App.tsx. This would make it easier to update the species information without scrolling through a 700-line file. Second, he would build the Progressive Web App from day one, as he added it last and had to reconfigure things he had already set up. Lastly, he would test the app on a real phone earlier to catch small issues on mobile, such as tiny text and cramped layouts, sooner.\n\nDespite the challenges, Amir is proud of the animations, scroll-driven reveal on each species card, dark/light mode toggle, and the offline functionality. However, he is most proud of his determination to push through the difficulties. Amir encourages feedback, particularly regarding performance, mobile UX, and code structure. He invites readers to try Wildform at amir-wildform.vercel.app, add it to their home screen, and explore it offline.",
  "summary": "I'm 16. Last week I didn't know how to use a Figma plugin. Today, I have a live, installable Progressive Web App called Wildform that showcases 69 animal species with scroll-driven animations, dark/light mode, and offline support. Here's the honest story of how I got there — and everything that broke along the way. The idea I love animals. I always have. But every wildlife site I visited felt…",
  "key_points": [
    "16-year-old Amir built interactive wildlife archive called Wildform",
    "Developed site with React 19, Vite, Tailwind CSS, Vercel",
    "Faced challenges with file formats, Vercel builds, dark/light mode"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}