🚗 Resident Area Carpark Management System Web Application
Abstract
The increasing urbanisation of Colombo, Sri Lanka, has significantly amplified traffic congestion and parking difficulties. Traditional parking management methods, dependent on human supervision, are no longer sufficient to meet demand. To solve these urban mobility challenges, we developed a smart car parking management system that enhances parking space utilisation, controls traffic flow, and improves user satisfaction.
Our system leverages ESP32 microcontrollers and ultrasonic sensors to provide real-time availability of parking slots. Data from these sensors is pushed to a cloud-based database and visualized on a web and mobile application. The platform includes features such as real-time monitoring, advance booking, automated payments, and intelligent route suggestions.
Users can search for destinations, check for parking availability on a map, compare travel options, and get cost-based recommendations. The system is scalable and adaptable to various facilities including malls, offices, and public lots, ultimately reducing congestion and supporting sustainable urban mobility.
🖊️ Low-Fidelity Wireframes
💡 Showcased early design thinking with digital sketches using Excalidraw.
Design Concept:
Focus was placed on user convenience and real-time visibility. The wireframes emphasized simplicity and ease of navigation. Users can:
View map with nearby parking slots
Search for destination and reserve a spot
View booking and payment confirmation
✍️ Sketch Title: Initial Layout for Search & Reservation Flow
🎯 High-Fidelity Designs
💡 Brought the core user journeys to life with polished UI mockups.
✍️ Title: Final UI for Parking Search and Booking Confirmation
Real-time availability visualization
Seamless navigation bar
Clean, modern booking form
Cost & distance comparison modal
🎨 Design System
We utilized a custom design system tailored for urban utility applications, drawing inspiration from ShadCN UI principles.
Why a design system?
To maintain consistency across the interface
Improve developer handoff and reusability of components
Streamline design-to-code process
Key Components:
Buttons, Cards, Modals, Search Inputs
Consistent font scale, spacing system, and color palette
Accessibility-friendly contrast ratios
⚙️ Development Phase
Technology Stack Selection
1. Frontend - React.js with Tailwind CSS
Component-based structure enabled reusability and scalability
Fast UI updates using virtual DOM
Tailwind CSS ensured a clean, utility-first layout system
2. Backend - Firebase Realtime Database
Serverless and real-time capabilities matched perfectly with parking availability data
Seamless integration with frontend
3. IoT Layer - ESP32 + Ultrasonic Sensors
Gathered accurate distance data for vehicle presence detection
Wi-Fi enabled for cloud sync
🏗️ High-Level Architecture Diagram
Architecture Overview:
ESP32 → Firebase Realtime DB → React Web App
Realtime database updates propagate live to users
Map integration with Google Maps API for location and distance estimation
Authentication and booking history stored in Firebase Auth and Firestore
✍️ Diagram Title: IoT-to-Web Integration for Realtime Parking
📊 Entity Relationship Diagram
User Table: Stores profile, bookings, and preferences
Parking Slot Table: Realtime slot availability, location, and pricing
Reservation Table: Timestamps, payment status, and cancellation options
✍️ Diagram Title: ER Diagram for Smart Parking System
🔑 Key Features
1. Real-Time Parking Slot Monitoring
ESP32 reads ultrasonic data every 2 seconds
Cloud sync ensures immediate UI reflection
2. Slot Booking and Availability Checker
Users select a destination → system shows nearby available slots
One-click reservation with time and cost estimation
3. Route Planner with Transport Comparison
Calculates walking time, driving time, and transport cost
Recommends self-driving or public transit
4. Secure Login and Booking History
Firebase Auth ensures user data safety
Users can view, cancel, or modify upcoming bookings
❗ Challenges & Solutions
Problem: Real-time updates caused excessive read/write costs on Firebase
Solution:
Used Firebase's onSnapshot listeners only on key views
Added debouncing and rate limits for ESP32 data pushes
Problem: Parking spots occasionally showed incorrect status
Solution:
Implemented a threshold filtering algorithm to discard false readings
Added a manual override system for admin users
🔭 Future Vision / Next Steps
🚀 Version 2.0 – Enhanced User Experience & Admin Features
Planned Activities:
🔧 Admin Dashboard
View real-time occupancy stats across all registered parking locations
Manually update sensor statuses when needed
Export booking history and analytics reports
🗺️ Interactive Map UI
Allow users to click on map pins for quick info pop-ups
Cluster parking spots for better readability
📆 Flexible Booking Slots
Let users choose custom time ranges for bookings
Add cancellation policies and no-show detection logic
🔔 Smart Notifications
Push notifications for reservation reminders, booking confirmations, and slot availability near frequently visited places
🧠 Version 3.0 – Intelligence & Integration
Planned Activities:
🧮 AI-Powered Slot Suggestion
Use user history + traffic patterns to suggest best slots automatically
Predict parking demand at certain times/locations
🚗 Vehicle Number Plate Recognition (VNPR)
Integrate with CCTV-based systems for automatic check-in/out
Secure and contactless experience for gated communities or corporate parks
💳 Payment Gateway Integration
Add card/mobile wallet payment options through Stripe or PayHere
Include invoice generation and tax documentation
🌍 Long-Term Vision
🏙️ City-Wide Smart Parking Network
Collaborate with municipalities and private parking vendors to scale the system city-wide
Standardize APIs for third-party integrations (e.g., ride-sharing apps)
📱 Mobile App Expansion
Release Android/iOS native apps for on-the-go access
Enable offline caching and background sync
🧩 IoT Optimization
Move to low-power, long-range communication tech (e.g., LoRaWAN) for large-scale deployments
Implement battery optimization protocols for ESP32s
♻️ Sustainability Focus
Gamify carpooling and eco-friendly transport suggestions based on carbon footprint estimates
