Amir Bettir says he built Wildform, an interactive wildlife archive with 69 animal species, as a live, installable Progressive Web App. The project grew to include habitat filters, species profiles, a quiz, field notes, scroll-driven visuals, dark and light modes, and offline support. In his retrospective, he describes three problems that took the project off course: mismatched image files, a Vercel deployment building the wrong commit, and an assumption that light mode would be simple. His account also points to practical changes he would make next time.
What Wildform was designed to do
Bettir describes Wildform as a wildlife archive organized around four habitat filters: Land, Ocean, Air, and Wetlands. Each species profile includes diet, lifespan, size, conservation status, and a behavioral field observation. The app also includes a quiz and a magazine-style field-notes article, along with scroll-driven visuals, dark and light modes, and offline support.
Those are features reported by the author, not an independent audit of the app. His account does not establish how the species information was sourced or whether conservation statuses were independently verified.
The stack and the content problem
Bettir says he built the project with React 19 and Vite, Tailwind CSS 4, Vercel, and vite-plugin-pwa. He describes it as a static site with no backend or database. These are the versions and architecture he reported; they have not been independently checked against current releases.
#1 Best Overall
- Used Book in Good Condition
He kept all 69 species entries in App.tsx. As the archive grew, editing the entries there became cumbersome. In retrospect, he says he would put the content in a separate JSON file. That change would separate repeated species data from the interface code and make the entries easier to manage; it is a lesson from this project, not a guarantee that JSON is right for every app.
What went wrong during the build
1. Image files did not match their references
Bettir says some images he saved from the internet were WebP files, while the code referenced JPG paths. The mismatch produced broken images. He says renaming the files to use a .jpg extension resolved the visible issue in his project.
Changing a filename extension does not convert an image’s underlying format. When similar images fail to load, check both the referenced path and the actual file format; if they differ, use a compatible asset or convert the image rather than relying on the extension alone.
2. Vercel built a different commit
Bettir reports that Vercel repeatedly failed because it was building an older commit on another branch, while the fix he expected it to use had not been merged into main. The failure appeared to be in the deployment, but the code he wanted deployed was not in the commit being built.
Recommended Free Tools
His practical advice is: “When Vercel fails, always check which commit it’s building. The error is often in the wrong place.” Before changing code to address a deployment failure, inspect the deployment details and verify the branch and commit match the fix you expect.
3. Light mode needed more than color overrides
Bettir says the design was already dark, but he initially spent time writing color overrides as if light mode were the default that needed adjustment. He realized the reverse was true: light mode was the mode that needed deliberate design work.
Rank #4
The lesson is specific to a project whose visual direction began with a dark theme. A second theme is not necessarily a quick inversion; it may need its own considered choices rather than a set of assumptions about which mode is primary.
What he would do differently next time
- Move repeated content out of the component. Bettir would keep the species entries in a JSON file instead of hardcoding them in
App.tsx. - Configure the PWA earlier. He says he would set up PWA support from the beginning rather than add it late in development.
- Test on a real phone sooner. He says small-screen issues—including tiny text and cramped layouts—took time to discover. Earlier phone testing would have exposed those problems sooner in his process.
What this account does—and does not—establish
Bettir’s retrospective is a first-person account of building Wildform, not a product review or an independent assessment of its wildlife content. It reports a 69-species archive and describes its features, stack, setbacks, and lessons. It does not establish the accuracy or licensing of the species information, accessibility conformance, performance measurements, or the app’s present-day availability.
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.
