Website for Coral Restoration Science and Engagement

Indonesia Biru Foundation (IBF) is a marine conservation organization based in Lombok, focused on coral reef research, restoration, and coastal community development. They needed a digital platform that could communicate the urgency of their mission, showcase real scientific work then let visitors interact directly with the data behind coral restoration, and crucially.

Fully custom build: rich interactions, live data, and a real machine-learning integration well beyond what a template or page builder could deliver.

Started by breaking the site down into a reusable component architecture so that a content-heavy, multi-section page would stay maintainable and performant. Modular component structure Built the front-end in Next.js around reusable components, so every section could be composed, reordered, and extended without friction. Custom design system Styled the interface with a Tailwind CSS to keeping typography, spacing, and color consistent from the hero all the way down to the footer. Layout built for complexity Architected the page to handle a wide range of section types (hero video, stat counters, carousels, data cards, embeds) without compromising load performance, using Next.js optimized image loading and file-based routing to keep a heavy site fast. Responsive across breakpoints Paid close attention to how the denser data sections reflow gracefully on mobile and desktop.

With the in place, we built the custom interactive elements that make the site feel alive and communicate IBF's impact at a glance. Much of this phase centered on motion and data. we developed multiple interactive carousels with custom pagination powering the programs section ("What We Do"), the team showcase news and events then built a series of animated data visualizations entirely from scratch.  To anchor Indonesia's place in the story, we created a custom dotted world map that highlights the country's coral coverage as a standalone visual component.

The standout feature of this build was a working machine-learning integration that brings IBF's actual research directly into the browser letting anyone test coral reef detection for themselves. At the core of this phase, we integrated a coral reef detection and classification model through Roboflow and embedded it directly into the site. Rather than linking out to an external tool, the model lives natively within the experience: visitors can upload their own image and watch the system classify coral conditions in real time with bounding boxes and confidence scores rendered cleanly over the photo. On the front end, we handled the full pipeline sending the API calls, parsing the model's response, and rendering the results instantly for a smooth. Beyond the AI feature, also we connected the site's supporting pathways to make sure every visit could lead somewhere meaningful, wiring up the merchandise store, the donation and coral-adoption CTAs.

The final piece was making sure IBF could run the entire site on their own. Instead of handing over a static build that would need a developer for every update, we built a custom content management system that puts the whole platform in the team's hands. The CMS covers every section of the site. So the team can edit content area by area through a clean, organized dashboard rather than digging through code. At the center of it is a full news and article manager where staff can create, edit, publish, and delete posts.

The Indonesia Biru Foundation website was built from the ground up in Next.js to do something most conservation sites can't: let visitors interact directly with the data and the science behind coral restoration while giving the team behind it full control to keep everything running. Every part of it reusable component architecture, the custom data visualizations, the live AI model, and the built-in CMS that was coded with real intention and scalability baked in rather than bolted on. This is an interactive platform that takes a complex environmental mission and makes it something the public can actually see, explore, and act on.