iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
At 16, I built Wildform, an interactive wildlife archive with 69 species, scroll-driven animation, and offline support. Three times, I wanted to delete the repository and start something else. I kept going—and learned that the hardest problems were not always the ones their error messages seemed to describe.
This account is based on Amir Bettir’s first-person write-up on DEV Community, presented as published October 3, 2026. The project details and lessons below are Bettir’s own; they are not an independent audit of the app.
What I built: a wildlife archive designed to unfold as you scroll
Bettir says Wildform was meant to feel “like a museum at night”: dark, cinematic, and quiet, with animals revealed through scrolling rather than displayed in a plain grid. The author describes it as a live, installable Progressive Web App (PWA) with offline support and 69 species.
Recommended Free Tools
Its five main sections were:
- Leopard hero: a full-screen opening scene with a parallax effect.
- Field Film: a scroll-driven sequence.
- Living Archive: 69 species, filterable by Land, Ocean, Air, and Wetlands. Species profiles included diet, lifespan, size, conservation status, and a short behavior observation.
- Quiz: a scored quiz with randomized questions.
- Field Notes: a magazine-style article displayed in a modal.
Bettir names React 19 and Vite, Tailwind CSS 4, Vercel, and vite-plugin-pwa as the stack. The author describes Wildform as a static site without a backend or database. Those are the author’s implementation details, not a comparison showing that this stack is better than alternatives.
#1 Best Overall
The bugs that took the project off course
Broken images: check the file, not just the code
Bettir spent four hours debugging images that had been saved as .webp but referenced as .jpg. In the author’s account, changing the filenames to match the references resolved the problem. The practical check is to confirm the actual extension on disk; an operating system that hides extensions can make a filename look correct when it is not.
A JSON parse error that pointed to the wrong problem
During deployment, Vercel reported tsconfig.json:2:0: ERROR: Unexpected end of file in JSON. The file appeared valid locally, and the eventual cause was not the file contents: Bettir realized Vercel was building an old commit because the fix was on another branch and had not been merged to main.
Before changing a file in response to a deployment error, check the deployment’s branch and commit. Bettir’s concise lesson was: “When Vercel fails, always check which commit it’s building.”
Dark mode required rethinking the starting point
Because Wildform was already dark, Bettir initially approached the work as a series of overrides to create the wrong mental model. The author eventually recognized that light mode was the new mode to build. This is a lesson about identifying the existing design state before adding a feature—not a rule that every site should default to dark mode.
What I would change on the next project
Keep the species data out of the main component
Bettir says all 69 species were hardcoded in App.tsx and would instead go into JSON. Separating content from the component that renders it would make a large collection easier to edit and maintain.
Plan the installable, offline experience earlier
The author would set up the PWA from the beginning rather than adding it later. For a project whose goals include installation and offline use, that means treating those behaviors as part of the product from the outset instead of a finishing touch.
Rank #4
Test on a real phone before the end
Bettir designed desktop-first and only later caught small-screen problems such as tiny text and cramped layouts. Fixing them late took hours, according to the author. Checking the site on a real phone earlier could have exposed those issues while the layout was still being built.
The wins—and why continuing mattered
Bettir says the parts they are proudest of are the animations, the scroll-driven species-card reveal, the dark/light toggle, and the phone-installable experience with offline support. The author also says there were three moments when they wanted to delete the repository and start something else, but does not describe what happened in each moment. The point is not that a difficult project always has a tidy breakthrough: Bettir’s own summary is, “I’m most proud that I didn’t quit.”
The post asks readers for feedback, especially on performance, mobile UX, or code structure. It does not include independent performance measurements, so the project’s speed or technical quality should not be inferred from the feature list alone.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
