š 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
3. IoT Layer - ESP32 + Ultrasonic Sensors
šļø 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
2. Slot Booking and Availability Checker
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:
Problem: Parking spots occasionally showed incorrect status
Solution:
š Future Vision / Next Steps
š Version 2.0 ā Enhanced User Experience & Admin Features
Planned Activities:
š§ Version 3.0 ā Intelligence & Integration
Planned Activities:
š§® AI-Powered Slot Suggestion
š Vehicle Number Plate Recognition (VNPR)
š³ Payment Gateway Integration
š 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
š§© 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
Get visibility from recruiters & peers