How I built a Frankenstein chimera that turns trip planning into a gamified Web3 experience for Kiroween 2025
Demo video
https://youtu.be/0KuMA3gEqkI
Demo app (now free testnet sepolia ethereum and auto accept quests proofs)
https://tripx-kiroween.bolt.host
What Even Is TripX?
TripX is my attempt at creating a Frankenstein chimera of technology. It stitches together seven different domains into one cohesive app:
๐ค AI โ Google Gemini 2.5 Pro generates personalized itineraries
โ๏ธ Blockchain โ Ethereum NFTs and tokens reward your travels
๐บ๏ธ Maps โ Google Maps + Mapbox for interactive visualization
๐พ Backend โ Supabase for everything database-related
๐ฎ Gamification โ Quests, badges, XP, and leaderboards
๐จ 3D Graphics โ Three.js animated cosmos background
๐ป Halloween Theme โ Premium spooky UI that makes you say "whoa"
The Technical Journey
Building with Kiro AI
I'll be honest: building this alone in a hackathon timeframe seemed impossible. That's where Kiro AI became my co-pilot. I used:
Vibe Coding โ 12 sessions building components and services
Specs โ 8 formal specifications for different features
Steering โ Project-wide coding standards and accessibility rules
Hooks โ Automated linting, type checking, and testing
Kiro helped me generate everything from the multi-RPC fallback system for blockchain reliability to GPS anti-spoofing with Haversine distance calculations. Even the 13 custom Halloween SVG icons were AI-generated!
The Tech Stack
Frontend: React 18 + TypeScript + Vite + TailwindCSS + Framer Motion
AI: Google Gemini 2.5 Pro
Backend: Supabase (PostgreSQL, Edge Functions, Auth)
Blockchain: Ethereum Sepolia + wagmi + viem + RainbowKit
Maps: Google Maps API + Mapbox GL
3D: Three.js
The Features That Make It Special
- AI Trip Generator ๐ค You tell TripX where you want to go, how long you'll stay, your budget, and your interests. Within seconds, Google Gemini 2.5 Pro crafts a personalized day-by-day itinerary with:
4-5 activities per day, properly scheduled
Budget-aware planning with realistic costs
Smart interest matching (Food, Culture, Nature, Nightlife)
Hotel recommendations within your budget
- Spooky Destinations ๐ป I curated 19 haunted locations worldwide: Transylvania, Edinburgh, Salem, Paris Catacombs, Prague, Tower of London, Bran Castle... Each destination has:
A spookiness rating (1-5 skulls ๐)
Unique Halloween-themed quests
XP rewards ranging from 100 to 500
TPX token rewards from 10 to 100
- Quest System ๐ฎ This is where the gamification gets serious. Complete location-based challenges to earn rewards:
GPS-verified quest completion with anti-spoofing (you can't fake your location!)
Photo verification using AI
XP and leveling system (Level 1 โ Level 5)
Halloween-themed seasonal quests
- Transit Planner ๐ Because what good is a trip if you can't get there? I integrated a full public transport planner that:
Finds connections between any two points in Europe
Shows multi-modal routes (train + bus + walk)
Displays real-time schedules and prices
Maps your entire journey on an interactive Mapbox visualization
- Web3 Rewards โ๏ธ Here's where blockchain enters the chat. Complete trips and quests to earn:
TokenTypePurpose๐ช TPXERC-20Utility token
๐ซ NFT PassportERC-721
Your unique travel identity
๐ Achievement NFTs ERC-721 Collectible badges for milestones
All deployed on Ethereum Sepolia testnet:
TPX Token: 0x6A19B0E01cB227B9fcc7eD95b8f13D2894d63Ffd
NFT Passport: 0xFc22556bb4ae5740610bE43457d46AdA5200b994
Achievement NFT: 0x110D62545d416d3DFEfA12D0298aBf197CF0e828
AI-Powered Trip Creation โจ
Creating a trip is magical. You input your destination (like "Rome, Rzym, Wลochy" in my case), select your duration, budget level (Low/Medium/High), and interests.
The AI then generates an itinerary with spooky locations included automatically if you select "Haunted & Spooky" as an interest. It's like having a personal travel agent who's obsessed with Halloween! ๐Halloween Badges ๐
Earn 12 unique badges by completing various challenges:
๐ป Ghost Hunter
๐ Pumpkin Master
๐ฌ Candy Collector
๐ง Witch's Apprentice
And 8 more...
- FAQ & Help System ๐ Because nobody wants to be lost, I built a comprehensive FAQ system with searchable categories:
Getting Started
Trip Planning
Spooky Destinations
Quests & Challenges
Web3 & Rewards
Badges & Achievements
Leaderboard
Troubleshooting
The Profile System ๐ค
Your profile is your travel identity. It shows:
Your TPX balance (I'm at 310 tokens! ๐)
Total XP and level (currently Level 3)
Wallet address (with a cute shortened format)
Quests completed
Tokens earned
Countries visited
Transaction history with blockchain verification
You can even add TPX tokens directly to MetaMask with one click!
Show Image
The Quest Experience ๐บ๏ธ
The quests page is where the magic happens. Each quest card shows:
Quest name and description
Location (with country)
Difficulty level (1/5 to 5/5)
Rewards: XP, TPX tokens, and NFT eligibility
Completion status
Each with NFT minted on the blockchain! ๐
The Admin Dashboard ๐ ๏ธ
Because I wanted to monitor everything, I built a complete admin dashboard:
Plus system health monitoring for Database, API, and Blockchain!
The trips management panel lets me see:
All user trips with destinations
Duration and dates
Cost breakdowns
Quest assignments
Trip status (active/completed/planned)
Real-time filtering by User ID, Country, and Status
The Challenges I Faced ๐
- Blockchain Reliability Sepolia testnet RPC nodes are... unreliable. I implemented a multi-RPC fallback system that tries 5 different providers before giving up. This increased success rates from ~60% to ~95%.
- GPS Anti-Spoofing People tried to cheat the quest system by spoofing their location! I implemented Haversine distance calculations with tolerance checks. You must be within 100 meters of a quest location to verify it.
- Gasless NFT Minting Users shouldn't pay gas fees to claim rewards. I set up an admin wallet pattern where the backend signs transactions on behalf of users. Smooth UX, zero friction.
- Responsive Ghost Particles The floating ghost animations were killing mobile devices. I added device detection that reduces particle count from 20 to 8 on mobile, keeping the app smooth at 60fps.
- Three.js Performance The cosmos background was beautiful but heavy. I optimized by:
Reducing star count based on device capability
Using BufferGeometry instead of Geometry
Implementing frustum culling
Adding lazy loading for non-critical animations
What I Learned ๐ง
AI is a force multiplier โ Kiro AI helped me build in weeks what would've taken months alone
Accessibility isn't optional โ Even spooky themes need to be WCAG compliant
Web3 UX is hard โ Hiding blockchain complexity while keeping it trustless is an art
Performance matters โ Beautiful animations mean nothing if they stutter
Gamification works โ People actually engage more when there are XP and badges
This project proves that unexpected combinations can work harmoniously when executed thoughtfully.
What's Next? ๐ฎ
If I continue developing TripX:
๐ Expand to 100+ spooky destinations worldwide
๐ญ Add AR features for quest verification
๐ Implement seasonal events (Christmas, Easter)
๐ฐ Mainnet deployment with real economic value
๐ค Partner with tourism boards for official quests
๐ฑ Native mobile apps for iOS and Android
Final Thoughts ๐ญ
Building TripX was a wild ride. I went from "this is impossible" to "holy shit, it actually works" in about two weeks. The combination of AI, blockchain, and Halloween theming created something unique that I'm genuinely proud of.
The best part? Seeing real users create trips, complete quests, and earn tokens. That moment when someone told me "this is actually fun" made all the late nights worth it.
If you're thinking about building something ambitious for a hackathon, my advice is:
Pick technologies you're excited about
Don't be afraid to combine unexpected domains
Focus on UX over features
Make it accessible from day one
Use AI tools to accelerate development
Happy coding! ๐๐ป๐ฆ
Built with ๐ for Kiroween 2025 using Kiro AI
Top comments (0)