CASE STUDY · DIVING & MARINE LIFE
An interactive dive site map and marine life encyclopedia for Koh Tao, Thailand. Built for dive shops and divers.
The brief.
Koh Tao is one of the most popular dive destinations in the world. The client needed a web app that dive shops could use to show customers what they would see at each dive site. No existing tool combined dive site information, interactive maps, and species data in one place. It needed to work on phones (divers research on the go), load fast on Thai mobile connections, and be expandable to other destinations later.
How we built it.
We built an interactive map using React 19 and Leaflet, with each dive site plotted around the island. Tap a site and you get depth ranges, difficulty level, conditions, and every species you might encounter there. Each species has its own profile: scientific name, habitat, behaviour, diet, and which sites it appears at. The data architecture is designed to scale. Adding a new destination means adding data, not rebuilding the app. Tailwind CSS handles the responsive design. Framer Motion handles transitions between views. The whole thing loads fast on 4G connections.
Tech
React 19, Vite, Leaflet, Tailwind CSS
Dive Sites
12 mapped
Species
28 catalogued
What was delivered.
A fully interactive web app covering 12 dive sites around Koh Tao with detailed profiles for each, plus 28 marine species with scientific data, habitat info, and dive site associations. Built to be expanded to new destinations as the brand grows. Designed for mobile-first use by divers and dive shop staff.
Want results like this for your business?
Get a free audit and find out what we can build together.