🎃 TripX: When AI Meets Blockchain in a Spooky Travel Adventure

elo — Sat, 06 Dec 2025 00:31:04 +0000

How I built a Frankenstein chimera that turns trip planning into a gamified Web3 experience for Kiroween 2025

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

kiroween #halloween #web3 #ai #react #typescript #blockchain #ethereum #gamification #travel

DEV Community: elo

🎃 TripX: When AI Meets Blockchain in a Spooky Travel Adventure

kiroween #halloween #web3 #ai #react #typescript #blockchain #ethereum #gamification #travel