Visitor Parking Tracker
Smart parking slots registration portal
The Challenge
Providing a responsive, real-time booking form that updates occupancy immediately while ensuring secure validation across role permissions.
Engineering Solution
Built a Next.js App Router portal integrated with Firebase client SDKs. Used React Hook Form for client-side license plate formatting, writing registrations directly to Firebase Firestore to trigger instant listener layout updates.
Key Product Capabilities
Secure Google Sign-In and profile authorization using Firebase Authentication.
React Hook Form validation mapping license formats (Two Wheeler, Four Wheeler, Heavy, EV).
Firestore real-time listeners syncing parking availability status indicators instantly across operators.
Code Implementation
// Next.js Firebase Firestore booking submission helper
import { db } from '../firebase/config';
import { collection, addDoc, updateDoc, doc } from 'firebase/firestore';
export const submitParkingBooking = async (userId, data) => {
const bookingRef = collection(db, 'bookings');
// Add new booking document
const newBooking = await addDoc(bookingRef, {
userId,
vehicleNo: data.vehicleNo.toUpperCase(),
vehicleType: data.vehicleType,
slotId: data.slotId,
entryTime: new Date().toISOString(),
status: 'active'
});
// Mark slot occupied in slots metadata collection
const slotDocRef = doc(db, 'slots', data.slotId);
await updateDoc(slotDocRef, {
isOccupied: true,
currentBookingId: newBooking.id
});
return newBooking.id;
};Technologies Used
Direct Actions
Architecture Stack
Dashboard UI rendering active bookings and responsive forms using React Hook Form.
Manages user authorization states, logins, and credentials securely.
NoSQL database serving as the source of truth for slot occupancy states and logs.