ODH Web Components

TypeScript
ReactOpen SourceTourism
View on GitHub

A library of React components for displaying Open Data Hub tourism data. Includes interactive maps, event calendars, accommodation widgets, and real-time data visualizations used across South Tyrol's tourism websites.

Overview

Open Data Hub provides APIs for tourism data, but consuming raw APIs requires significant development effort. These components provide ready-to-use, customizable widgets that any website can embed with minimal configuration.

The components are used by dozens of tourism websites, from small B&Bs to regional tourism boards, displaying real-time information about events, weather, ski conditions, and accommodations.

Components

Interactive Maps

Leaflet-based maps with clustering, filtering, and custom markers for POIs, accommodations, and events.

Event Calendar

Responsive event listings with category filtering, date range selection, and multilingual support.

Weather Widget

Current conditions, forecasts, and mountain weather with beautiful visualizations.

Accommodation Search

Search and filter hotels, B&Bs, and apartments with availability checking and booking links.

Tech Stack

TypeScriptReactViteStorybookLeafletTailwind CSS

What I Learned

Building a component library taught me about API design from the consumer's perspective. Every prop name, default value, and behavior needs to make sense to developers who haven't seen the source code.

I also learned about the challenges of maintaining backward compatibility while adding features, and the importance of comprehensive documentation with live examples.