All works
Pohen Hills Camp
AppsHospitalityNext.jsTailwind CSSUI/UX

Pohen Hills Camp

Wayan Phantom Megaditha

Wayan Phantom Megaditha

Fullstack Developer & Designer

Live ↗GitHub ↗
ClientPohen Hills Camp
Website ↗Instagram ↗

The Problem

Pohen Hills Camp is a glamping and nature resort in the hills of Bali. The experience was already good. Guests who visited came back and referred others. The problem was that people could not find the place through search, and when they did find it, the online presence did not match the quality of what was on the ground. Potential guests were landing on a weak digital experience and leaving without booking. This was a real client project delivered through Megatha Tech.


How It Works

  1. The homepage leads with full-bleed photography and natural color tokens. The design brief was: let the location sell itself, nothing competes with the images.
  2. Room and activity pages are generated from a structured data layer. The client updates content by editing a config object, not by touching JSX.
  3. Images are served as WebP with lazy loading and explicit width/height attributes to prevent layout shift. Fonts are subset and preloaded.
  4. Client-side JavaScript is kept minimal. The site is mostly static HTML so it loads fast on mobile connections in areas of Bali with inconsistent signal.
  5. The booking flow connects to the client's existing reservation system via a lightweight API wrapper, so they can swap systems later without a frontend rebuild.

Tech Stack

Next.jsStatic generation gives the best performance profile for SEO and mobile loading
Tailwind CSSConsistent spacing and color system maps cleanly to utility classes
WebP imagesConsistently reduces file size by 30 to 50 percent over JPEG at equivalent quality
Static generationInfrequently updated content does not need a server on every request

What I Would Improve

The booking integration is a wrapper around an external system that the client controls. A proper availability calendar built into the site would reduce the drop-off between interest and booking. The photo gallery is a simple grid. A full-screen immersive gallery experience with swipe gestures would better match how guests browse travel content on mobile. The SEO metadata is set statically. Generating it dynamically from the data layer would let the client update page titles and descriptions without developer involvement.

Screenshots

Wayan Phantom Megaditha

Wayan Phantom Megaditha

Fullstack Engineer · AI & Web3

Next.jsTailwind CSSUI/UXBali