What's Poppin'

What’s Poppin’ is a location-based web app I built during my API course as part of the Web Design & Development minor. The goal? Help users quickly discover local events happening around them — concerts, shows, festivals — you name it. Think of it as your personal event radar. The app pulls real-time data from the Ticketmaster API to show you what’s happening and where. To make it visual and interactive, I used the Leaflet API to place all events on a dynamic map. Want to search for a specific place? The OpenStreetMap API helps convert any location you type into coordinates, complete with autocomplete to speed things up. To make the experience even more personal, I integrated web APIs like Geolocation to detect your current location, LocalStorage to remember your settings as you browse, and even the Battery Status API to warn you if your phone might not survive the night. Because hey, no one wants a dead phone at a music festival. From concept to code, this project challenged me to combine multiple APIs into one smooth experience — and the result is a fun, useful tool that actually feels like something you'd want to use on a Friday night.

CSS
HTML
Javascript
Json

“Life is either a daring adventure or nothing at all.” – Helen Keller

More Information

Project Content

Web API's

Geolocation API: This API retrieves the user's current geographic location, allowing the system to provide personalized, location-based information. It’s especially useful for showing nearby events or services without requiring manual input. LocalStorage API: Used to store the user's location and other session data directly in the browser, this API ensures that key information is preserved even as users navigate between pages or refresh the site—improving performance and user experience. Battery Status API: This API monitors the user's device battery level. It’s particularly helpful in scenarios like attending events or parties, where users might want to take videos or photos without worrying about unexpectedly running out of battery.

Content API's

OpenStreetMap API: This API is used to convert text-based location input into geographic coordinates. It also provides autocomplete functionality, making it easier for users to search and select valid locations efficiently. Leaflet API: Leaflet is used to render an interactive map on the webpage. It allows for dynamic placement of markers at specific coordinates, visually representing where events are taking place. Ticketmaster API: This API retrieves detailed information about events happening on a selected date. It provides data such as event names, images, descriptions, venue locations, and other relevant details.

Design to Reality

While researching, I came across a design online that inspired how I could incorporate API data into the webpage. It featured a list of locations alongside a map with clickable points showing bits of information. I initially designed a small popup card to appear when users clicked on a map point, but through testing, I found that users preferred a simpler interaction. Highlighting the selected point directly on the map proved to be much more effective. The last two images show the early concept and the final design evolution.

I'm sorry

This part of the website is still under construction, move to another page or change the device to visit this website!