GrabMap HK

Inspiration

I was losing way too much money hunting plushies and had no reliable way to find specific machines eg: Kirby, Labubus, Sanrio, Mofusand etc. With the popularity of Popmart and claw machines all over Hong Kong, I saw an opportunity to build something that actually helped players: a space where they could share their wins, find machines that are worth their money, and enjoy the claw machine experience. This is also where toy brands, grab machine owners and other partnerships can connect with grab machine enthusiasts.

What it does

• Discover machines by district and prize type: Filter by Labubus, Kirby, Sanrio, or any plushie you’re hunting. Spend less time wandering and more time playing.
  
• See real community wins: Each machine displays photos of prizes people have actually won, so you can avoid rigged or low-value machines.
  
• Share your own wins: Upload photos and tips to brag or help others. Turning frustration into a playful, collaborative experience.

How we built it

• Frontend: Vite + React + Tailwind CSS allowed fast prototyping while keeping the interface smooth and mobile-friendly. Mobbin used for design inspiration to elevate the look and feel of the app.
• Backend & Database: Supabase to store the machine data and user submissions.
• Data & Localization: Manus scraped machine location data from existing sources.
• AI Assistance: Kiro handled 95% of the app build from spec, scaffolding and component generation, while light use of ChatGPT and Claude to support debugging, iterative improvements, and design implementation.
• Iterative Design: Multiple rounds of feedback from friends to make the UI feel playful.

Challenges we ran into

Photo uploads breaking: Initial build the photo upload functions did not work so it took a few more shots of prompting to get that working. Data scraping: Initially missed some Traditional Chinese data, affecting localisation. Could improve with a full re-scrape in the future. Feature Creep vs. MVP: Planned the Google Maps integration in the very beginning but cut to prioritise win-sharing to make sure it is a community driven app. UI looking AI generated: The early designs were functional but looked too much like AI generated it. Took some time to look through design inspiration, redesigned the main landing page to a different structure (Featured, Browse) instead of landing on a overwhelming grid of claw machine cards.

Accomplishments that we're proud of

• MVP built in 2 days using AI-assisted development.
  
• Photo uploads and community win-sharing fully functional.
  
• Iterative design process resulted in a playful, engaging UI that feels less AI generated
• Successfully scoped and prioritized features for hackathon constraints, focusing on key feature completion.

What we learned

• AI tools can dramatically speed up MVP development, and also a great companion to brainstorm design ideas and methods to improve existing product. Great to be able to switch from spec building/defining tasks to implementing real quick using Kiro
• Focusing on data collection/backend is worth it in the beginning i.e. what is needed in the supabase table, where to source the data
• Debugging in real-time and iterating on UI and features is as much part of building as coding itself.
  
• Community-driven features are what give the product purpose — the technology is secondary to user experience.

What's next for GrabMap HK

• Test with real communities: regular players
• Add leaderboards and gamification to highlight top winners and encourage engagement.
  
• Implement a map view showing wins and machine locations across Hong Kong.
  
• Enable social sharing so players can share to Instagram or other platforms.
  
• Explore partnerships with arcades or machine operators.
  
• Scale as a hybrid digital-physical platform, building community around casual gaming in public spaces.

Sometimes the best way to explore a city is through claw machines. What prize would you try to find first?

Built With

• chatgpt
• claude
• kiro
• react
• supabase
• tailwind
• vite