Parking Log
A full-stack app built to solve the everyday problem of forgetting where I parked.
About
I built Parking Log to solve my personal frustration of constantly forgetting where I parked, especially in massive lots at malls or stadiums. This full-stack application is designed to make that experience stress-free by letting users quickly save and share key details about their parking spot, like the location, floor, section, and any notes for reference. It also uses geolocation for easy navigation back to your car, and OCR for scanning parking tickets, so you never overstay by accident.
Check out the live web application here: Parking Log
*The live application is hosted on Render's free tier and may take up to a minute for initial loading.
Features
Parking Details
Log your parking info, including address, floor, section, vehicle information, and any notes.
Ticket Scanning
Scan your ticket and have the app detect and calculate the expiry time for you, using Tesseract.js.
User Authentication
Create accounts, securely store, and share parking information with other users.
Progressive Web App
Install to mobile devices using Service Workers for a native app experience.
Technologies Used
React
Frontend
Node.js
Backend
Supabase
Database and Auth
Render
Hosting
Demo Video
Quick walkthrough of the Parking Log application, showing user authentication, parking location logging, vehicle management, and vehicle location sharing.
App Screenshots
Secure authentication to protect user parking data. Quick sign-in gets users parking in seconds.
The main dashboard shows active parking sessions and shared locations. The empty state guides users to start logging.
Add multiple vehicles with custom names. Easy management with simple tap controls.
Log parking details using automatic geolocation. Specify floor and section for large parking areas.
Take reference photos and scan parking tickets. AI can read and calculate ticket expiry times.
Logged locations show with action buttons for copy details, view photo, navigation, sharing, or delete entries.
Share parking details to with users.
See the demo video
for more details.
What I Learned
As a personal passion project, Parking Log gave me the perfect opportunity to really dig into what it takes to create a full-stack web application from start to finish. I used this project to explore new territory, diving deep into Supabase and learning about Row Level Security (RLS), a concept I hadn't encountered before. Navigating my way around these policies was an enjoyable challenge, and it was crucial for ensuring data security within my application.
One of the most exciting features I implemented was ticket scanning using Tesseract.js for optical character recognition (OCR). This allows users to simply photograph their parking ticket and have the app automatically extract and parse the expiry time, eliminating the need for manual entry. Working with OCR technology taught me about image preprocessing , text recognition accuracy challenges, and creating parsing algorithms for various ticket formats.
I also enjoyed putting together the social sharing aspect of the application, implementing the functionality to allow users to share their parking locations with friends and family. This started off as just a button to copy to clipboard, but I quickly decided to implement an in-app sharing solution as well.
The biggest takeaway from this project was the problem-solving experience, as I challenged myself to use unfamiliar technologies. There was a lot of debugging, project scope planning, and a mentality switch to always keeping the user experience in mind when building out functionality.