Version: 2.0.0
Team: MAJKL
Event: BrunelHack 2025
Tubler is a gamified London Underground exploration platform that rewards users for visiting tube stations with blockchain-based achievements and tokens. Built with Next.js, ICP (Internet Computer Protocol), and Solana integration, it features real-time station verification, achievement milestones, and cross-chain token minting.
- 10 Milestone Achievements: From "First Steps" (1 station) to "Tube Completionist" (270 stations)
- Rarity Levels: Common, Uncommon, Rare, Epic, Legendary, Mythic
- Visual Badges: Auto-generated SVG achievement images with rarity-based styling
- Progress Tracking: Real-time progress bars and milestone notifications
- Achievements Canister: Validates and stores achievement data on ICP
- Solana Bridge Canister: Handles cross-chain token minting
- Decentralized Storage: All achievement metadata stored on ICP
- Real-time Validation: Achievements validated through ICP canisters
- Station Tokens: Mint tokens for each verified station visit
- Achievement Tokens: Special tokens for milestone achievements
- Cross-chain Integration: Solana tokens minted via ICP bridge
- Wallet Integration: Phantom wallet support for token management
- D3.js Visualization: Interactive London Underground map
- Station Markers: Click to verify and earn tokens
- Geolocation: Real-time user location tracking
- Responsive Design: Works on desktop and mobile
- Dark/Light Theme: Automatic theme switching
- Achievement Notifications: Popup notifications for new achievements
- ICP Status Indicator: Real-time connection status
- Mobile Responsive: Optimized for all screen sizes
- Next.js 15: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling
- Radix UI: Accessible component library
- D3.js: Interactive data visualization
- ICP Canisters: Rust-based smart contracts
- Solana: Token minting and transactions
- AI Verification: Station photo validation
- Local Storage: Achievement persistence
User Visit → Photo Capture → AI Verification → ICP Validation → Solana Minting → Achievement Unlock
- Node.js 18+
- Rust (for ICP canisters)
- DFX (Internet Computer SDK)
- Phantom Wallet
- Clone the repository
git clone <repository-url>
cd MAJKL-1- Install dependencies
npm install- Start ICP replica
source "$HOME/Library/Application Support/org.dfinity.dfx/env"
dfx start --clean --background- Deploy ICP canisters
dfx deploy- Start development server
npm run dev- Open the application
http://localhost:9002
- Visit a Station: Navigate to any London Underground station
- Take a Photo: Capture a photo with the station in view
- AI Verification: Our AI validates the photo authenticity
- ICP Validation: Achievement data is validated on ICP canisters
- Token Minting: Solana tokens are minted via ICP bridge
- Achievement Check: System checks for milestone achievements
| Visits | Achievement | Rarity | Description |
|---|---|---|---|
| 1 | First Steps | Common | Visit your first tube station |
| 10 | Getting Around | Uncommon | Visit 10 tube stations |
| 25 | Tube Explorer | Uncommon | Visit 25 tube stations |
| 50 | London Navigator | Rare | Visit 50 tube stations |
| 75 | Underground Veteran | Rare | Visit 75 tube stations |
| 100 | Metro Master | Epic | Visit 100 tube stations |
| 150 | Tube Network Expert | Epic | Visit 150 tube stations |
| 200 | London Underground Legend | Legendary | Visit 200 tube stations |
| 250 | Almost There | Legendary | Visit 250 tube stations |
| 270 | Tube Completionist | Mythic | Visit all 270 tube stations |
- Achievements Canister: Stores and validates achievement data
- Solana Bridge Canister: Handles cross-chain token minting
- Real-time Validation: All achievements validated through ICP
- Decentralized Storage: No central database required
- Canister UI: Direct access to canister interfaces
MAJKL-1/
├── src/
│ ├── app/ # Next.js App Router
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components
│ │ ├── sidebar/ # Sidebar components
│ │ ├── map/ # Map-related components
│ │ └── providers/ # Context providers
│ ├── lib/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ ├── types/ # TypeScript type definitions
│ └── backend/ # ICP canisters
│ ├── achievements/ # Achievements canister
│ └── solana_bridge/ # Solana bridge canister
├── dfx.json # ICP project configuration
├── Cargo.toml # Rust workspace
└── deploy-icp.sh # Deployment script
- Real-time connection status to ICP canisters
- Floating indicator in top-right corner
- Links to canister UI interfaces
- Automatic milestone detection
- Visual achievement badges
- Progress tracking
- Notification system
- Photo capture and validation
- AI-based authenticity checking
- Token minting on verification
- Achievement triggering
// Validates and stores achievement data
pub struct AchievementData {
pub user_id: String,
pub achievement_id: String,
pub achievement_name: String,
pub required_visits: u32,
pub current_visits: u32,
pub timestamp: String,
pub wallet_address: String,
}// Handles cross-chain token minting
pub struct AchievementMintingRequest {
pub achievement_id: String,
pub user_wallet: String,
pub metadata_uri: String,
}# ICP Configuration
DFX_NETWORK=local
CANISTER_ID_ACHIEVEMENTS=uxrrr-q7777-77774-qaaaq-cai
CANISTER_ID_SOLANA_BRIDGE=u6s2n-gx777-77774-qaaba-cai
# Solana Configuration
SOLANA_RPC_URL=https://api.devnet.solana.com
SOLANA_NETWORK=devnet# Deploy to local network
dfx deploy
# Deploy to mainnet
dfx deploy --network ic- Progress Cards: Show progress to next achievement
- Achievement List: All unlocked achievements with details
- Rarity Badges: Color-coded rarity indicators
- ICP Verification: Shows ICP validation status
- Station Markers: Clickable station points
- Geolocation: Real-time user location
- Fog of War: Reveals visited stations
- Responsive Design: Works on all devices
- User Profile: Shows collected badges and stats
- Station Verification: Photo capture and validation
- ICP Status: Connection status and canister info
- Achievement Progress: Real-time progress tracking
- No PII Storage: Only achievement metadata stored
- Local Storage: User data stays on device
- ICP Encryption: Canister data is encrypted
- Wallet Security: Phantom wallet handles keys
- AI Validation: Photo authenticity checking
- ICP Validation: Achievement verification on canisters
- Multi-layer Security: Multiple validation steps
- Audit Trail: All actions logged on blockchain
# Start all services
npm run dev # Next.js frontend
dfx start --clean # ICP replica
dfx deploy # Deploy canisters# Deploy to mainnet
./deploy-icp.sh
# Build and deploy frontend
npm run build
npm run start- Code Splitting: Lazy-loaded components
- Image Optimization: Auto-generated SVG achievements
- Caching: Local storage for achievements
- Real-time Updates: WebSocket-like updates
- ICP Auto-scaling: Canisters scale automatically
- Solana TPS: High transaction throughput
- CDN Ready: Static assets optimized
- Mobile Optimized: Responsive design
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- TypeScript: Strict type checking
- ESLint: Code quality enforcement
- Prettier: Code formatting
- Husky: Pre-commit hooks
- ✅ Basic achievement system
- ✅ ICP integration
- ✅ Solana token minting
- ✅ Interactive tube map
- ✅ Achievement notifications
- 🔄 Multi-city support
- 🔄 Social features
- 🔄 Leaderboards
- 🔄 Team challenges
- 🔄 Premium features
- 🔮 AR integration
- 🔮 Voice commands
- 🔮 AI-powered recommendations
- 🔮 Cross-chain NFTs
- 🔮 DAO governance
- Documentation: Check the code comments
- Issues: Report bugs on GitHub
- Discussions: Join our community
- Email: Contact the team
This project is licensed under the MIT License - see the LICENSE file for details.
- BrunelHack 2025: For the hackathon opportunity
- ICP Foundation: For the Internet Computer platform
- Solana Labs: For the blockchain infrastructure
- London Underground: For the station data and inspiration
Built with ❤️ by Team MAJKL for BrunelHack 2025