UrbanFlow

Overview

SmartRide is a full-stack IoT solution designed to modernize public transport ticketing. It bridges the gap between physical hardware and cloud software, allowing users to tap an RFID card to initiate or complete a journey. The system intelligently handles state management—distinguishing between an 'Entry' and 'Exit' tap automatically—and provides a rich, real-time dashboard for users to track their rides, view fares, and visualize their route on an interactive map.

Key Objectives

• Seamless Hardware-Cloud Integration: Create a secure pipeline from an ESP32 microcontroller to a Next.js serverless backend with sub-second latency.
• Stateful Logic Engine: Eliminate data redundancy by intelligently determining ride context (Start vs. End) based on user history.
• Advanced Visualization: Leverage the Ola Maps API to render precise route polylines and turn-by-turn navigation steps.

Technologies

Hardware & IoT

• ESP32 DEVKIT V1 : Microcontroller handling RFID logic and WiFi communication.
• MFRC522 RFID Reader: For scanning 13.56MHz RFID cards/tags.
• Blynk IoT Platform : Used for secure data streaming, virtual pins, and webhooks.

Frontend

• Next.js 14 : React framework for server-side rendering and routing.
• Tailwind CSS & Shadcn/ui : For responsive, accessible, and modern UI components.
• Leaflet.js & React-Leaflet : For rendering interactive maps and route polylines.

Backend & Database

• Supabase (PostgreSQL) : For database storage and authentication.
• Drizzle ORM : For type-safe database queries and schema management.
• Ola Maps API : Used for Directions (Routing) and Reverse Geocoding.

Features

• Real-Time Analytics Dashboard: A comprehensive landing page displaying key metrics such as total rides, current card balance, monthly spending, and recent activity. It provides users with an immediate overview of their travel habits.

• Hardware-Controlled Card Linking: Users can securely link a physical RFID card to their account. The web app sends a command to the ESP32 via Blynk to switch to 'Linking Mode', allowing for secure registration of new cards.

• Interactive Route Visualization: Clicking on any ride reveals a detailed view featuring a dynamic map. By integrating the Ola Maps Directions API, the system calculates and draws the precise path taken by the bus, complete with turn-by-turn instructions and human-readable start/end addresses.

• Comprehensive Ride History: Users can browse their entire travel history in a searchable, filterable list, making it easy to track expenses and commute patterns over time.

Development and Challenges

• Blynk Platform Integration: Blynk served as the crucial bridge between the ESP32 and the cloud. I configured specific 'Virtual Pins' (V0 for ride data, V4 for mode control) to manage device state. A key challenge was the webhook parser failing to handle multiple data streams simultaneously. To solve this, I optimized the firmware to serialize location data into a single string payload before transmission.

This required changes on both the Edge (C++) and the Backend (TypeScript). On the backend, the combined string is parsed to extract precise coordinates:

// app/api/blynk-webhook/route.ts
export async function POST(request: NextRequest) {
  // Parsing the combined location string from the webhook body
  const { card_uid, reader_id, location_str } = await request.json();
  
  // Splitting the "lat,lng" string received from ESP32
  const [lat, lng] = (location_str || "0,0").split(',');
  
  // ... database logic to determine Entry vs Exit
}

• Parallel API Execution: To ensure the 'Ride Details' page loaded instantly, I implemented parallel fetching using Promise.all. This allows the application to fetch the ride path, start address, and end address from Ola Maps simultaneously, reducing load times by over 60%.
• Stateful Logic Implementation: Handling the logic for 'Entry' vs 'Exit' taps required a robust database query strategy. The system checks for any 'IN_PROGRESS' rides for the specific user ID. If found, it closes the ride (Exit); otherwise, it initializes a new one (Entry).

Conclusion

SmartRide demonstrates the power of combining reliable embedded systems with modern web frameworks. By solving real-world challenges in data transmission and geospatial visualization, it offers a scalable blueprint for future smart city transit solutions.