Found restaurants!

EatWhat | 食乜好

🌟 The Inspiration

Living in Hong Kong, I witnessed the daily struggle of "陣間食乜嘢" (What should we eat later?) - a phrase heard countless times across the city. Despite having thousands of incredible restaurants, choosing where to eat often becomes a 10-minute debate that ends with the same familiar spots. This paradox inspired me to create something that transforms decision fatigue into excitement.

🎯 What I Built

HK Food Detective gamifies restaurant selection by combining intelligent filtering with entertaining decision games. Users set their preferences (cuisine, budget, group size, distance), then let fate decide through four interactive games: Spin the Wheel, Roll the Dice, Flip the Coin, or Draw Cards. Each game result generates beautiful, shareable cards perfect for social media.

The app features a bilingual interface (English/Chinese), interactive map view, and works entirely offline after initial load - no server required.

🛠️ How I Built It

I chose Svelte for its simplicity and performance, combined with Leaflet.js for mapping and HTML5 Canvas for game animations. The biggest technical challenge was creating cross-browser compatible shareable cards. Initially using html2canvas library, I encountered mobile compatibility issues and rebuilt the entire system using manual canvas rendering with proper text wrapping for multilingual content.

The restaurant filtering system uses real-time distance calculations and localStorage caching for instant loading. Each game component features physics-based animations - the spinning wheel dynamically generates segments based on filtered results, while dice and coin games use CSS transforms for realistic motion.

🧠 What I Learned

This project taught me that sometimes building from scratch is more reliable than using libraries. The canvas rendering system required deep understanding of text metrics, font fallbacks for Chinese characters, and blob handling for downloads. I also discovered the psychology of gamification - the 2-3 second anticipation during animations is as important as the result itself.

Mobile-first development revealed unique challenges around touch interactions, viewport handling, and download behavior differences between iOS and Android browsers.

🚧 Challenges Faced

The most significant challenge was ensuring the shareable card feature worked across all devices. Different browsers handle file downloads differently, especially on mobile. After multiple iterations, I developed a robust solution using canvas-to-blob conversion with proper error handling and fallbacks.

Another challenge was creating visually appealing wheel segments for varying numbers of restaurants (1-50+). I solved this by limiting visible segments to 12 for optimal readability while maintaining fair selection probability.

🚀 Future Vision

I envision integrating AWS services to enhance the experience: Amazon Q Developer for AI-powered recommendations based on dining history, Amazon Location Service for advanced geolocation features, and Amazon Translate for expanding to other Asian markets. The goal is to maintain the app's simplicity while adding intelligent personalization.

🏆 What Makes This Special

HK Food Detective celebrates Hong Kong's incredible food culture while solving a universal problem. By embracing randomness with intelligence, it transforms daily decisions into adventures. Built by a Hong Kong local, every detail reflects authentic understanding of local dining habits - from the detective theme inspired by Hong Kong cinema to the specific restaurant categories that matter to locals.

The app represents innovation in simplicity: instead of complex algorithms, it makes the unpredictable delightful.