HKInfo

Inspiration

Hong Kong is a vibrant city with countless attractions, but tourists often struggle with information overload and poor timing decisions. We were inspired by the challenge of combining Hong Kong's rich real-time data ecosystem (weather, traffic, government alerts) with AI to create truly personalized tourism experiences. The idea came from seeing tourists miss out on great experiences simply because they didn't have access to the right information at the right time.

What it does

HKInfo is an AI-powered Hong Kong tourism planning application that creates personalized itineraries by analyzing real-time city data. The app:

Analyzes natural language input - Users can simply type "I want cultural sites for elderly visitors, budget HK$500" and get a complete trip plan
Integrates real-time data - Live weather, traffic conditions, and government alerts from Hong Kong Observatory and Transport Department
Generates optimized routes - AI creates efficient multi-stop itineraries with Google Maps integration for transit planning
Provides interactive visualization - Dynamic maps with numbered attractions, traffic overlays, and route optimization
Offers flexible input methods - Both structured preference forms and free-text analysis for different user types

The application combines Hong Kong's excellent public data APIs with modern AI to solve the real problem of tourism information overload.

How we built it

Frontend Architecture:

React 18 with TypeScript for type safety and modern development
Styled-components for consistent theming and responsive design
Google Maps API integration with real-time traffic and transit layers
Custom drag-and-drop interface for resizable layout panels

Backend Services:

Node.js/Express API server for data aggregation
Integration with Hong Kong Observatory for weather data
Transport Department APIs for real-time traffic information
Government News API for official alerts and announcements

AI Integration:

Local AI service using Ollama for natural language processing
Custom prompt engineering for Hong Kong-specific tourism recommendations
Real-time context injection (weather, traffic, alerts) into AI decision making
Dynamic trip optimization based on current conditions

Key Technical Features:

Responsive design that works seamlessly across desktop, tablet, and mobile
Real-time data updates every 30 seconds
Optimized route calculation with Google Directions API
Professional UI with unified design system and smooth interactions

Challenges we ran into

Real-time Data Integration: Hong Kong has excellent public APIs, but combining weather, traffic, and government data into a coherent real-time picture required careful API orchestration and fallback handling when services are unavailable.

AI Context Management: Getting the AI to understand Hong Kong-specific context (like MTR vs bus preferences, local weather impacts, cultural considerations) required extensive prompt engineering and real-time data injection.

Google Maps Complexity: Implementing dynamic route optimization for multiple attractions while handling Hong Kong's complex transit system (MTR, buses, ferries) was technically challenging, especially with real-time traffic integration.

UI/UX Polish: Creating a professional interface that doesn't feel overwhelming despite the complexity of the underlying data. We spent significant time on responsive design and smooth drag-and-drop interactions.

Performance Optimization: Balancing real-time updates with performance, especially when the AI is processing complex trip plans that can take 1-3 minutes to generate.

Accomplishments that we're proud of

Seamless AI Integration: We successfully created an AI system that feels natural and helpful rather than gimmicky. Users can express complex preferences in plain English and get genuinely useful results.

Real-world Data Utility: The app actually uses Hong Kong's real government data APIs, making it genuinely useful for real tourists, not just a demo.

Professional Polish: Despite being a hackathon project, the UI feels like a production application with smooth animations, responsive design, and thoughtful user experience.

Technical Architecture: Built a scalable, maintainable codebase with proper TypeScript, component architecture, and API design that could realistically be extended into a full product.

Route Optimization: Successfully implemented complex multi-stop route optimization that considers real-time traffic and Hong Kong's unique transit system.

What we learned

AI Prompt Engineering: Learned how to effectively inject real-time context into AI prompts and handle the unpredictable nature of AI responses in a production-like environment.

Government API Integration: Gained experience working with real government data APIs, including handling rate limits, data format inconsistencies, and service availability issues.

Google Maps Advanced Features: Mastered complex Google Maps API features like transit routing, traffic layers, and dynamic marker management for a professional mapping experience.

React Performance: Learned advanced React patterns for handling real-time data updates, complex state management, and smooth UI interactions without performance degradation.

User Experience Design: Discovered the importance of progressive disclosure - showing complex information in digestible ways without overwhelming users.