Parking's a BEACH

Landing page.
3D model of the intended PCB parking sensor.

Inspiration

A commute to campus is one thing, but long treks through parking lots and structures in search of just one empty spot is a whole other beast. We created this web app, Parking’s a BEACH, as four CSU Long Beach students who were simply fed up with finding parking.

What it does

Parking’s a BEACH works on multiple fronts.

First, the hardware: ultrasonic sensors embedded underneath every individual parking space or parking block (wherever is most convenient) check which spots are empty and which are occupied.

Second, the backend: the ultrasonic sensors update our database every five minutes to determine if the status of a parking spot has changed. This makes updates virtually instantaneous, ensuring accuracy for whoever is using the web app.

Lastly, the user-facing frontend: no matter if the user would rather be directed to any open spot on campus versus one at a specific lot, our web app displays real-time parking availability.

We’ll find you a spot quickly and accurately - so you’ll never stress over finding a parking space again. (Trust us, save that stress for your next midterm. 🦈📚)

How we built it

For the user-facing frontend, we designed and prototyped our concept in Figma. From there, we used React to create multiple web pages, which connected to our backend database using Google Cloud Functions through Node Postgres. We also connected Google Cloud SQL to the PostgreSQL database and received Core IoT input from the hardware Ultra Sonic Sensor, which lets our backend know if a parking space is physically occupied or not.

Our Ultra Sonic Sensor was connected to the ESP32, which goes to sleep and wakes up every 5 seconds to conserve power (in real-life application, this process would take 5 minutes). When the ESP32 wakes up from deep sleep, it pings the Ultra Sonic Sensor and assesses if there is a vehicle or object present in the parking space. If there was previously a vehicle and it is no longer there, or if it was previously empty and now occupied, the ESP32 sends a JSON file to the Cloud IoT core with the location and state data.

Challenges we ran into

Through 24 hours of internet outages and multiple instances of lagging out, here are some of the technical problems we ran into:

Hardware:

Getting ESP32 connected to MySQL
Getting JSON to work on ESP32 Backend:
Connectivity issues between cloud SQL and a database
Running SQL queries from cloud functions
Connecting hardware to the database Frontend:
Issues with vertically centering pages
Issues with creating images that overlay other images

Accomplishments that we're proud of

We didn’t totally fail! Other than that, we’re proud of:

Connecting databases to the frontend of the web app
Connecting hardware to Google Core IoT
Bridging UI/UX design with web development
Building a stronger team along the way!

What we learned

Despite our team consisting entirely of CS majors or minors, each of us has different focuses and interests - which allowed all of us to pick up new skills and insight throughout the project. This includes:

How to use component libraries for frontend development
How to use Google Cloud SQL and Cloud functions to connect the hardware, database, and frontend
Handoff flow from UI/UX design to development
Connecting Microcontroller to Google Cloud Core IoT.
Connecting Cloud Functions to React Front End.

What's next for Parking's a BEACH

Of course, a 24-hour sprint has its limitations. With more time, we hope to improve Parking’s a BEACH by:

Implementing primarily as a mobile app to be more accessible while driving.
Creating a “reserve” function, where users are able to indicate that they are on their way to a parking spot.
Reduce battery consumption on the microcontroller.
Normalize the database.

Thanks for taking a look at our project! GO BEACH! 💻🦈✨