Case Study
Pune Trekkers connects about 2,300 members across three WhatsApp groups. I designed and built punetrekkers.org so plans, trail guides and trek photos live somewhere newcomers can actually find them.
The community runs on WhatsApp. Trek plans got buried in chat, newcomers had no way to see what was coming up or what a trek would cost, and photos from past treks were scattered across phones.
The group is free and nobody makes a profit, so the site had to be cheap to run, easy for volunteers to update, and careful with members' phone numbers.
Each trek lists difficulty, shared cost and meeting details. A date only appears once organizers confirm it, and a 'message the organizer' link opens WhatsApp through a server redirect so organizer numbers never appear in page HTML.
Members can propose their own hikes. Submissions are validated with Zod, stored in Supabase as pending, and only appear publicly after an admin approves them. Public queries never select the submitter's WhatsApp number.
A searchable dataset of 428 forts and 276 peaks, filterable by distance from Pune, Lonavala, Mumbai, Nashik and five other starting points, with one-tap Google Maps directions. Featured trails are server-rendered; the full dataset loads after the page is interactive.
Written guides for popular treks near Pune such as Lohagad, Sinhagad, Rajgad, Kalsubai and Ratangad, plus a trail diary of past treks. Uploads are admin-managed and photos appear only once permission is recorded.
The homepage hero is a procedurally generated Sahyadri ridge rendered with three.js, with no 3D model downloads.
Ridgelines come from seeded ridged-multifractal noise, so they look natural and never repeat. A dotted route and waypoint pins trace the trail.
The scene switches between morning, day, dusk and night using the visitor's local time. A tiny script runs in <head> before first paint so the sky never flashes the wrong colour.
A clay-style hiker built from primitives breathes, blinks, follows the pointer, waves on hover and dozes off when the page is quiet.
three.js is a separate chunk loaded when the browser is idle. Rendering is capped at ~30fps and 1.5× pixel ratio and pauses off-screen and in hidden tabs. Reduced-motion users get a single still frame; data-saver users and browsers without WebGL keep a static poster.
Most traffic arrives through WhatsApp, which drops oversized preview images. An API route uses sharp to resize each trek's cover photo into a compressed 1200×630 JPEG for Open Graph.
Organization and per-trek structured data, a generated sitemap, and dedicated pages for each trek and guide help people searching for treks near Pune find the group.
Node's built-in test runner covers content schemas, member plans, structured data and theme colour contrast, alongside a script that audits the hike dataset.