I'm 16 and I Built an Interactive Wildlife Archive. Here's Everything That Went Wrong.

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.

Wildform 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.

Amir 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.

Looking 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.

Despite 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.