Core Features

  • Interactive route maps: Leaflet maps that draw each route's track, with distance, total ascent, elevation, and region at a glance.

  • Elevation profiles: A profile chart linked to the map, drawn from a lightweight ~30 KB preview track instead of the full GPX.

  • GPX downloads: Full-resolution tracks to load into a bike computer or phone.

  • Per-route share pages: Each route is prerendered as its own page with Open Graph tags and a generated share image, so links shared on Facebook and messaging apps show a proper preview card.

  • Bilingual (HR/EN): Croatian by default, with an English switch the browser remembers. Static text carries its translation inline, and routes have optional English fields.

  • Gallery & videos: Photo lightbox and embedded YouTube ride videos.

  • Sign-up form: Contact and membership form handled by Netlify Forms.

  • Privacy: Cookie consent banner and privacy policy page.

Admin Panel

  • Route management: Log in to add, edit, delete, and reorder routes, including the GPX, photos, YouTube videos, and text in both languages.

  • Browser-side processing: When a GPX is uploaded, it extracts  distance, ascent, elevation, date, and ride duration from it. It determines the region ("start → farthest point") through OpenStreetMap's Nominatim, reduces the track, and generates a preview.

  • Image pipeline: Photos are resized and converted to WebP in the browser, and the Open Graph share image is drawn on a canvas, so the server never processes images.

  • Git as the database: Netlify Functions check the session and commit changes to the repository through the GitLab API.

  • Batched publishing: Saves are committed with [skip netlify]. One "Publish changes" action then creates a single commit that deploys everything pending at once, keeping hosting costs down.

Technical Stack

  • Frontend: Plain HTML, JavaScript, Tailwind CSS.

  • Maps: Leaflet with OpenStreetMap.

  • Icons: Lucide.

  • Backend: Netlify Functions (Node.js, ES modules).

  • Content storage: JSON and GPX files in Git, written through the GitLab API.

  • Hosting: Netlify (static hosting, Functions, Forms).

  • Build: A custom Node script that generates route data, per-route pages, preview tracks, and the sitemap.

Engineering Highlights

  • No database: The Git repository is the single source of truth, so every content change is versioned and can be rolled back.

  • Prerendered routes: The build step prerenders one HTML page per route so link previews work, while keeping old query-string URLs working through 301 redirects to clean canonical paths.

  • Map and chart performance: Full GPX files are reduced to ~1,500-point previews at build time.

  • Secure admin authentication: scrypt password hashing, signed HTTP-only session cookies, and a noindex, no-store, X-Frame-Options: DENY admin area.

  • Batched deployments: Deploys are batched into one publish, so frequent edits don't each trigger a paid deploy.

  • Asset caching: Images and tracks are cached for a week, while JavaScript, CSS, and route data always revalidate, so visitors never see stale content after a deploy.