Parkly

Less circling, more campus life. Parkly helps students find parking, check availability, fees and permits, and get directions—all in one map.

Comment

Note: Parkly is designed to connect with parking facilities that have systems capable of sharing parking availability through APIs. This demo uses simulated occupancy data to show how the app would work with those integrations; it is not connected to live campus parking systems. Parking lots connected to an API show colors and how many cars are parked. Other lots appear in black.

Inspiration

Finding parking should not be the hardest part of getting to class. Students need to know more than where a parking lot is: they also need to know whether spaces are available, who can park there, and whether a permit is required. Parkly brings that information together in one map, using Pasadena City College as the setting for our prototype.

What it does

Parkly helps users explore nearby parking and choose a lot before driving around campus. Users can:

  • View parking lots on an interactive map.
  • Compare availability through green, yellow, orange, and red markers.
  • Select a connected lot to see occupancy by level.
  • Check access restrictions, parking fees, and permit requirements.
  • Open the PCC student parking permit purchase page.
  • Get driving directions with upcoming turns and distance information.
  • Try a simulated navigation route without sharing their location. During navigation, the map rotates with the direction of travel while the position arrow stays pointed upward. The PCC occupancy counts, level layouts, and example pricing are simulated for this prototype. Parkly is not currently connected to PCC parking cameras or an official occupancy API.

How we built it

Parkly uses React, TypeScript, and Vite for the interface, Leaflet and OpenStreetMap for mapping, OSRM for driving routes, and Supabase for authentication. The website is deployed through GitHub Pages. A simulated parking feed updates occupancy every five seconds to demonstrate how the interface could respond to a future parking API. ChatGPT/Codex assisted with generating and revising code, debugging, testing, and deployment. The product direction and interface decisions were developed through repeated feedback and testing of the working application.

Challenges we ran into

One challenge was presenting several kinds of information without overcrowding the map. We refined marker positions, occupancy colors, lot details, and mobile interactions to make the interface easier to follow. Navigation introduced additional challenges: location permissions, route progress, turn instructions, and keeping the map rotation aligned with an upright position arrow. Moving the application to GitHub Pages also required updating asset paths, direct page links, and authentication redirect URLs.

Accomplishments that we're proud of

We created a working, publicly accessible prototype that connects parking discovery, lot details, permit information, and navigation in one experience. The demo clearly distinguishes connected simulated lots from locations whose availability is unknown. It also lets users explore parking without creating an account or sharing their location.

What we learned

Building Parkly highlighted the importance of clear data labels, usable mobile layouts, and handling location permissions gracefully. AI-assisted development helped accelerate implementation, but testing the actual interface and checking its behavior remained essential. We also learned how routing, authentication, and hosting configuration affect the experience beyond the visual design.

What's next for Parkly

The next step is to explore a partnership with campus parking staff and replace the simulated occupancy feed with an authorized data source. Future improvements could include verified parking entrances, accurate campus pricing and restrictions, accessible parking filters, and availability predictions based on historical occupancy data.

Built With

Share this project:

Updates

Submission history