JSON-driven activity guide (Bootstrap Studio + Bootstrap 5 + Leaflet)

Together with chatgpt we created a kind of content manager for a dynamic tourist website.

Editors just update a single excursions.json file (title, intro, tags, geo…), and the UI builds itself: cards, filters, and a map with the filtered results.

Features

  • Bootstrap 5 UI (built in Bootstrap Studio).

  • Category pills + search + optional offcanvas filters on mobile.

  • Cards rendered from a JSON file (no CMS needed).

  • Leaflet map that updates to show only the filtered items.

  • Shareable URLs (query string holds category/search/etc.).

  • Lazy images + graceful fallbacks if an image/field is missing.

How it works

  • Place index.html and excursions.json in the same folder.

  • The page does fetch (‘excursions.json’), builds the cards, and stores useful data like location on each card.

  • Apply Filters refresh Map and so on.

Jason card template

Example website in action.

2 Likes