Wildari Planet - Full-Stack Conservation Platform

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.

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