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

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 like a Wikipedia page — plain, dense, forgettable.

I wanted to build something that felt like a museum at night. Dark. Cinematic. Quiet. Where you scroll and creatures slowly emerge from the shadows instead of being dumped on you in a grid.

So I opened Figma, sketched a hero with a leopard's eye, and started building.

The stack

• React 19 + Vite — because I wanted fast builds and hot reload
• Tailwind CSS 4 — because writing CSS by hand for 69 cards would be torture
• Vercel — one-click deploy, free forever
• vite-plugin-pwa — to make the whole thing installable

Nothing fancy. No backend. No database. Just a static site that does a lot.

What I built

The site has five main sections:

1. Hero — A fullscreen leopard with a slow-breathing parallax effect
2. Field Film — A scroll-driven video that plays as you descend past it
3. Living Archive — 69 species, filterable by habitat (Land, Ocean, Air, Wetlands)
4. Field Test — An interactive quiz with scoring and randomized questions
5. Field Notes — A full magazine-style article inside a modal

Every species opens into a detailed profile with diet, lifespan, size, conservation status, and a small "field observation" about its behavior.

The bugs that almost killed me

1. The .webp vs .jpg trap

I spent four hours debugging broken images.

The images were on GitHub. The code referenced them. Everything looked right. But every image showed the broken-image icon.

The problem? When I saved images from the internet, my browser gave me .webp files. But my code was looking for .jpg.

I renamed the files on GitHub to .jpg — and it worked instantly.

Lesson: Windows hides file extensions by default. Turn them on. Trust me.

2. The Vercel build that wouldn't stop failing

For a solid hour, every deploy failed with:

tsconfig.json:2:0: ERROR: Unexpected end of file in JSON

My tsconfig.json on GitHub was perfect. 22 valid lines of JSON. I checked it maybe ten times.

The real problem? I was building on an old commit. My fix was on a different branch. Vercel kept rebuilding the broken version because I hadn't actually merged my change to main.

Lesson: When Vercel fails, always check which commit it's building. The error is often in the wrong place.

3. The dark mode that didn't exist

I wanted a dark/light toggle. I spent an evening writing CSS overrides for every single color.

Then I realized: my site was already dark. The "light mode" was the new thing I had to build.

I had to invert my entire mental model — designing for light first, then treating dark as the default.

Lesson: Sometimes your default assumption is the thing you need to question.

What I'd do differently

If I started over, I'd make three changes:

1. Use a JSON file for species data. Right now, all 69 species are hardcoded in App.tsx. Editing them means scrolling through a 700-line file. A simple species.json would make updates painless.

2. Build the PWA from day one. I added it last, which meant re-configuring things I'd already set up. Do it early.

3. Test on a real phone earlier. I designed on desktop for most of the build. Small problems on mobile (tiny text, cramped layouts) took hours to find and fix later.

What I'm proud of

The animations. The scroll-driven reveal on each species card. The dark/light mode toggle. The fact that you can install it on your phone and it works offline.

But honestly? I'm most proud that I didn't quit. There were three moments where I wanted to delete the repo and start something else. I'm glad I pushed through.

Try it

🔗 Live: amir-wildform.vercel.app

It works offline. Add it to your home screen. Open it on a plane.

If you have feedback — especially on performance, mobile UX, or code structure — I'd love to hear it. I'm still learning and every comment helps.

Thanks for reading. I'm Amir, 16, and I build things. 🐆