PayPark

• 

• 

  labels for attached videos

Inspiration

The frustration of traditional parking systems—fumbling for cash, worrying about overstaying, and high credit card fees—inspired us to create ParkPay. We envisioned a seamless, blockchain-powered parking experience where payments happen automatically and transparently. By combining the XRP Ledger's fast micropayments with AI-powered insights, we set out to revolutionize how people park and pay.

What it does

ParkPay is a real-time, blockchain-based parking payment platform that eliminates the hassle of traditional parking meters. Users can:

• Start parking sessions with one click—no coins, no cards, no hassle
• Pay automatically using RLUSD (Ripple USD) on the XRP Ledger with per-second billing precision
• Get AI-powered pricing through Echo AI by Merit, which dynamically calculates fair rates based on location, time, and demand
• Track sessions in real-time with live billing updates and transparent cost breakdowns
• Connect their XRPL wallet to fund accounts and manage payments seamlessly

The platform features Merit's Echo AI authentication for secure sign-in, and real-time WebSocket connections for live updates.

How we built it

Frontend:

• Built with Next.js 14 and React for a fast, responsive user experience
• Styled with Tailwind CSS and Framer Motion for smooth animations
• Integrated TomTom Maps API for interactive parking spot visualization
• Used Socket.io for real-time session updates and live billing

Backend:

• Developed with Node.js, Express, and TypeScript
• Prisma ORM with SQLite for user data and session management
• XRPL.js for blockchain interactions and RLUSD payments
• Merit Echo SDK for AI-powered authentication and chat

Blockchain:

• XRP Ledger (XRPL) for fast, low-cost micropayments
• RLUSD issued currency for stable, USD-pegged transactions
• Trustline management for secure token transfers
• Real-time payment verification and transaction tracking

AI Integration:

• Echo AI by Merit for dynamic pricing calculations based on location, time, and demand
• Natural language explanations for pricing decisions
• Smart recommendations for optimal parking choices

Challenges we ran into

1. XRPL Decimal Precision: We encountered "Decimal precision out of range" errors when handling RLUSD amounts. The solution required formatting all amounts to exactly 6 decimal places before blockchain transactions.

2. Real-time State Synchronization: Keeping the frontend, backend, and blockchain in sync for live billing was complex. We implemented WebSocket connections and careful state management to ensure consistency.

3. Merit Echo SDK Integration: Integrating the Echo SDK required careful handling of React context providers and client-side rendering in Next.js. We had to isolate the EchoProvider to specific components to avoid dependency conflicts.

4. Dynamic Pricing Logic: Building an AI system that calculates fair, transparent parking rates while considering multiple factors (location, time, demand) required extensive testing and refinement.

5. Wallet Connection Flow: Creating a seamless wallet connection experience that stores credentials securely in localStorage while maintaining security best practices was challenging.

Accomplishments that we're proud of

• Seamless Blockchain Integration: Successfully implemented XRPL micropayments with sub-second precision billing
• AI-Powered Pricing: Built a transparent, fair pricing system using Echo AI that explains its decisions
• Real-time Everything: Achieved true real-time updates for session tracking, billing, and spot availability
• Beautiful UX: Created an intuitive, modern interface with smooth animations and clear information hierarchy
• Merit Echo Authentication: Successfully integrated cutting-edge AI authentication for secure, passwordless sign-in
• End-to-End Functionality: Built a complete, working product from wallet connection to payment settlement

What we learned

• Blockchain Precision Matters: Working with issued currencies on XRPL taught us the importance of exact decimal handling
• Real-time Architecture: Designing systems that sync state across multiple layers (UI, server, blockchain) requires careful planning
• AI Integration: Learned how to effectively integrate LLM-powered features (Echo AI) into a production application
• User Experience First: Even with complex blockchain technology, the user experience must remain simple and intuitive
• WebSocket Optimization: Discovered best practices for efficient real-time communication without overwhelming clients or servers
• Next.js Edge Cases: Gained deep knowledge of client/server component boundaries and dynamic imports in Next.js 14

What's next for ParkPay

1. Mobile App: Develop native iOS and Android apps for on-the-go parking management
2. Provider Dashboard: Build a comprehensive interface for parking garage owners to manage spots, view analytics, set pricing rules, and get paid per company.
3. Advanced AI Features: Predictive spot availability, personalized recommendations, and dynamic routing

Built With

• echo-ai
• fastapi
• next.js
• ripple
• tailwind.css
• xrp-ledger