Full-Stack Developer

Wildari Planet · A headless wildlife education platform built end-to-end with Drupal 10, Astro.js, and Claude Code.

Overview

Wildari Planet is an independent wildlife conservation and education platform I designed and built entirely from scratch. The goal was to create a content-rich, fast, accessible site that teaches people about animal species, conservation status, and wildlife science. Its design is modern and user-friendly - something animal education websites often lack.

What I built

Designed the UX/UI, starting from wireframes in Figma, to deliver the polished experience many science-heavy animal websites lack - a modern layout and a distinct visual identity that encourage people to learn about animals.
Built interactive quizzes in different difficulty tiers so visitors can check their knowledge as they learn.
Set up Drupal 10 on my local machine and architected it as a headless CMS, with custom content types for animal species profiles, conservation articles, and educational resources.
Built Drupal taxonomies for continents and animal types, and a filter system that lets visitors browse animals by continent and conservation status.
Created back-end user roles in Drupal so different people get the right level of access to manage content.
Built the Astro.js front end consuming Drupal's JSON:API - delivering fast, JS-light pages with excellent Core Web Vitals scores.
Used Claude Code as an AI coding assistant throughout the build - accelerating component development, debugging, and documentation while maintaining human review of all generated code.
Configured Cloudflare Workers for hosting and deployment, with Git/GitHub for version control.
Implemented WCAG accessibility standards, mobile-first responsive design, and semantic HTML throughout.

Animal Profile

Each animal profile brings together the species' range, quick facts, conservation status, and general information, along with a photo gallery, flashcards for studying, and a quizz section to test what you've learned.

Quizz Section and Different Tier Quizzes

Three quiz levels - easy, medium, and hard - each with four questions, so visitors can test their knowledge at the level that suits them.

Drupal Backend

The animal database in Drupal 10 - custom content types for each species, organized with taxonomies for continents, animal types, and conservation status.

People and roles in Drupal - custom user roles that give each person the right level of access to manage content.

How I used Claude Code, and how I checked it

I built Wildari Planet with Claude Code, and I treated everything it produced as a draft to check.

The brand. I started by giving it screenshots of my Figma designs. It couldn't read the spacing well, so the padding came out too small or too big and the pages looked strange. When I gave it my hex color palette and specific technical direction, it improved quickly.

Connecting Drupal to the site. Claude Code wrote the JSON and API code that pulls content from the Drupal backend into the frontend. It often forgot to pull data from the backend. Most of the Quick Facts icons were missing, and sometimes whole paragraphs. So I checked every page, in Drupal and on the site, to confirm the content was really there, and reminded it each time.

Mobile. I opened the site on my phone and iPad, took screenshots of what looked wrong, and sent them to Claude Code with notes. For example, an animal's face wasn't centered on mobile, so I told it to reposition the image.

Quizzes. I played every quiz myself. I found uneven text and inconsistencies, and I checked that right and wrong answers each behaved correctly.

What I learned. Claude Code was wrong many times. It's fast, but it doesn't check its own work, so I did.

Tools used

Drupal 10
Astro.js
Claude Code
HTML5
CSS/Sass
JavaScript
JSON:API
Git
GitHub
Figma
Claude Design
Cloudflare Workers
Drupal AI Module
AI Automators
Visual Studio Code
macOS Terminal