Resident area Carpark Management Sysytem Web Application) (Smart Web Application (IoT Integrated))

🚗 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

0

View Project