Culture Hop Taiwan: a culture event discovery tool for the modern traveler

Translates fragmented public data into a bilingual curated, map-based experience using local AI and open maps.

LIVE SITE: https://culturehoptaiwan.com/en

Context & Vision: Soft Infrastructure

My background is in Architecture and Urban Design.

In that world, we often focus on "hardware"—museums, plazas, and transportation hubs.

However, a modern city relies equally on "Soft Infrastructure"—the invisible web of information, services, and cultural systems that allows people to navigate and engage with the physical space.

VisitBerlin stands as a benchmark in this domain. It treats the city as a cohesive product, seamlessly integrating events, context, and ticketing. It turns the city into an accessible interface.

Taiwan is a major cultural hub. House the world’s most comprehensive collection of Chinese artifacts, and sustain a vibrant, democratic contemporary art scene that allows for diverse expression.

Yet for international visitors, accessing this cultural layer is often surprisingly difficult. The information exists, but it is frequently fragmented, monolingual, and scattered across disconnected silos.

Defining the Problem: The Information Gap

I analyzed the existing landscape to understand why the user journey was broken.

• The Accessibility Barrier (API vs. Interface): While the Ministry of Culture provides a robust Open API, it is raw data inaccessible to the general public. The primary public-facing interface, the "National Art & Culture Information System (文化部全國藝文活動資訊系統)", suffers from severe usability issues. It largely covers only government-funded projects and presents data in a rigid, administrative format—often just a dry table.

  The search experience is unintuitive, and only in Chinese. making discovery nearly impossible for a non-local.

  
  

• Ticketing Platforms: Sites like OPENTIX(兩廳院文化生活) are great for buying seats, but they naturally exclude the free, spontaneous events like indie markets, small exhibitions that give a city its pulse.

  
  

• The "Airbnb Experience" Gap: Airbnb Experiences is currently not active in Taiwan. This leaves a void for travelers looking for curated, local context.
  

The Opportunity: I identified a specific design opportunity: Could I create a "curatorial layer" that sits on top of these existing data sources?

Design Strategy: The AI-Augmented Designer

In the past, building a complex data pipeline to process thousands of events would have been a significant technical barrier.

However, with the rise of AI coding assistants and LLMs, my role has shifted. I no longer need to write every line of Python from scratch; instead, I focus on orchestrating the workflow. I view this project not just as a website, but as an AI-Enriched Data Pipeline.

System Architecture: Local Factory, Cloud Storefront

To build a sustainable yet high-performance system without a massive budget, I engineered a hybrid architecture, that include 4 parts:

The Factory, The Warehouse, The Storefront and The Monitor.

The Factory

• Hardware: NVIDIA RTX 3060 (12GB).

• Software: Ollama running Gemma 3 12b.

• The Process: This pipeline handles the "heavy lifting"—translation, cleaning, and semantic tagging.

  • The Trade-off: Doing the initial batch processing of ~3,000 events takes about 24 hours.

  • The Routine: However, the daily maintenance is surprisingly lightweight. Since the Ministry of Culture updates their data roughly once a day, I set up a local scheduled task that runs 1-2 times daily. It only takes about 30 minutes to process the incremental updates, making the daily workflow very efficient.

    
    

The Warehouse

• Database: I selected Supabase (PostgreSQL) as the backend foundation.

• Supabase provides a robust, relational structure for our event data while offering instant API access for the frontend, allowing to manage thousands of active events with minimal maintenance overhead.

  
  

The Monitor

This monitoring layer is designed to support future observation, rather than to report results at this stage.

• Google Analytics 4 is used to understand high-level signals such as traffic sources, audience distribution, and overall navigation flows—providing context on who arrives and how they move through the site.

• Microsoft Clarity focuses on individual experience. Session recordings and heatmaps help examine how users interact with the map and list views, and whether elements like AI-generated tags support or hinder exploration.

Together, these tools form a lightweight feedback system—one capturing patterns at scale, the other revealing interaction at the human level—guiding iteration as real usage data accumulates.

The Storefront

• Framework: Built on the bleeding edge with Next.js (App Router) and React.

• Map Tech: I use React-Leaflet paired with Supercluster. This combination is the real key to performance—allowing the mobile client to aggregate tens of thousands of coordinates in real-time while maintaining a smooth zoom experience.

Performance Experience: Optimization Strategy

Loading 3,000+ dynamic events on a mobile map presents a massive performance challenge. When I first launched the mobile version, the sheer weight of the interactive map and data points resulted in a disastrous Google Lighthouse score of 27/100.

I had to put on my engineer hat to solve this, targeting key metrics to make the site usable.

• Prioritized Loading Strategy: Instead of loading the entire database at once, we split the delivery. The server immediately renders the top "Featured" events so the user sees content instantly. The heavy map data (the full index) is fetched silently in the background.

• Lazy Loading & Skeleton Screens: We aggressively "lazy load" the heavy, non-critical interactive elements. They are kept out of the main bundle until they are actually needed. To prevent the layout from jumping around during this process, we implemented precise skeleton screens that reserve space for the map and filters.

• Caching Strategy (ISR): To balance freshness with speed, we implemented Incremental Static Regeneration (ISR) with a revalidation period of one hour. This ensures users get relatively up-to-date content without forcing the server to rebuild the page on every single visit.

The Reality Check: After these optimizations, I managed to pull the mobile score up to 65/100. Could a dedicated performance engineer get it to 90? Probably. But as a UX designer with limited resources, I decided this was the point of diminishing returns. 65 is functional and fluid enough for a real user; I chose to invest my remaining time in refining the exploration features rather than chasing a perfect metric.

Implementation Challenges: Data Hygiene & State

While the stack is modern, the raw data from the Ministry of Culture (MOC) is often messy. We built a "Detox Pipeline" to handle this.

• The "Dirty Data" Pipeline:

  • Geocoding Recovery: Many events miss coordinates. I implemented logic that uses AI to infer locations based on the venue name.

  • Venue Consistency: Addresses in Taiwan are notoriously inconsistent. I built a mapping system to standardize variations (e.g., unifying different spellings of "Taipei") into single, canonical venue IDs.

• The State Management Maze:

  • Syncing the Map Pins, the List View, and the Category Counts (e.g., "Exhibitions (12)") is difficult when users are zooming and panning. I developed a custom logic to handle this multi-dimensional state synchronization efficiently.

• Bilingual Efficiency:

  • Search is tricky in a mixed-language environment. I optimized the search logic to query against the English Title, the Chinese Summary, and the AI-generated Tags simultaneously.

Conclusion

At this stage, the project has reached a solid functional baseline. It successfully connects to the Ministry of Culture’s Open API, retrieves a significant portion of official imagery, and uses the local AI pipeline to experiment with a curatorial tone. The results are a promising starting point—functional and informative, though clearly distinct from human-authored content.

On the sustainability front, the cost structure is lightweight. Since the primary investments are time and electricity for local processing, the overhead is manageable. Under current traffic conditions, I expect that light-touch monetization—such as limited sponsorships or native-style listings—would be sufficient to offset operational expenses, without the pressure to generate meaningful profit.

Looking ahead, I am keeping the project’s direction intentionally open. One possible path is for this to evolve into true cultural soft infrastructure, perhaps with institutional support to ensure long-term stability. Another possibility, should meaningful traffic emerge, is a shift toward a more editorial format—closer to a cultural discovery publication.

In either case, decisions will be guided less by assumption and more by observation. The Monitor—usage patterns and engagement signals—will serve as my primary reference. Rather than prescribing a fixed outcome, I plan to remain attentive to what the data suggests and what role the ecosystem invites this tool to play.