Parking App

For my final assignment in the course Interaction Design, I was asked to create a single-page microsite that visualizes data from an API of my choice. The project had to be fully responsive and built using HTML, CSS, and JavaScript.

The requirements included at least one clear data visualization, one micro-interaction (not just a hover effect), and a favicon. I also had to follow best practices like CSS Grid, CSS variables, mobile-first design, and proper accessibility (keyboard navigation and respecting user font settings).

I used the City of Ghent’s open data API, which provides real-time information on parking availability. My microsite visualizes how full each parking garage is, with clear occupancy indicators.

Users can mark car parks as favorites, which are remembered the next time they open the site. You can click through to Google Maps for navigation, and see if a parking is located in the LEZ (Low Emission Zone). A button links to the official City of Ghent site, where users can check their vehicle's eligibility for entry.