GeoBeats

During HackHarvard 2025, our team wanted to build something that celebrated the way music connects people across borders, languages, and emotions. We started by talking about the songs that meant the most to us. One person loved Chinese pop, another played Afrobeats, someone mentioned French jazz, and someone else added old-school American hip-hop. Different places, different styles — but all of them made us feel something familiar. That’s when the idea for GeoBeats: Compile the Decade was born. We wanted to create a web app where anyone could click on a world map, choose a country, and instantly explore the most popular songs from that region — from 2015 all the way to 2025. Not just a music discovery tool, but a time machine that lets people feel what the world was listening to during each year of the past decade.

🌍 Inspiration

We were inspired by how music transcends language. Even if you don’t understand the words, you can still understand the feeling. During the hackathon, we realized that people use songs as a form of memory to remember moments, people, or even entire phases of their lives. The project became our way to preserve those memories, not just for ourselves, but for anyone who believes that songs can tell the story of a generation.

⚙️ How We Built It

We designed the interface in Figma, keeping it clean and modern, with a glowing world map as the centerpiece. The frontend was built using React 18 and React-Leaflet, which let us create smooth map interactions — zooming, clicking, and hovering to explore countries and their musical histories.

On the backend, we used Node.js and Express.js to handle data requests. We integrated three main APIs: Nominatim (OpenStreetMap) for reverse geocoding converting coordinates into country and city names. Last.fm API to pull the top tracks and artists for each country. Apple iTunes API to provide audio previews and album artwork. We also used AllOrigins proxy during development to bypass CORS restrictions and dotenv to manage environment keys securely.

Connecting all these moving parts took time. Some APIs returned incomplete data, others had region-specific limits. We built caching mechanisms and error handling to make the system more stable. Every fix taught us something new about API synchronization, data pipelines, and the little details that make software actually work under pressure.

🧩 Challenges We Faced

One of the biggest challenges was matching accurate locations to the right music data. Some cities shared names across continents, and sometimes a country’s API data wasn’t updated or missing entirely. We also struggled with performance issues every time we loaded a map layer with new tracks, the latency increased. We learned to optimize requests, batch fetch data, and preload country data for smoother transitions. Another challenge was purely human and deciding together under tight time. We all had different coding styles and ideas, but we learned to merge them gracefully, respecting each other’s strengths. It reminded us that teamwork is not about agreeing on everything, but about building something meaningful together.

💡 What We Learned

We learned that even when technology seems complex, it’s still about connection between systems, and between people. Debugging late at night, we realized how design, backend, and frontend depend on each other like instruments in a band. If one is out of tune, the whole rhythm falls apart. We also learned how to work with global datasets, manage rate limits, and use asynchronous programming effectively. But most importantly, we learned that a good project isn’t only about what it does it’s about how it makes people feel.

For us, HackHarvard wasn’t just about building something cool it was about creating something that helps people listen to the world again.

Frontend: React 18, React-Leaflet, Vite Backend: Node.js, Express.js APIs: Nominatim (OpenStreetMap) – reverse geocoding (lat/lng → country/city) Last.fm API – top tracks by region Apple iTunes API – previews, metadata, artwork Dev Tools: AllOrigins proxy (CORS workaround), dotenv, Figma, Canva Hosting: Vercel / Render (for deployment)

✨ What’s Next

We want to expand GeoBeats into a global “music memory map.” Imagine being able to filter by mood, decade, or even event seeing how the sound of the world evolved over time. We’d also love to add a “community playlist” feature where users can contribute their favorite local tracks to represent their country’s unique soundscape. Our dream is for GeoBeats to become not just a tool, but a bridge one that lets people experience the heartbeat of humanity through sound.

Built With

• allorigins
• cra
• express.js
• frontend:-react-18
• leaflet-apis/data:-nominatim-(openstreetmap)-?-reverse-geocoding-(lat/lng-?-city/country)-last.fm-?-city-(?metro?)-and-country-top-tracks-itunes-search-(apple)-?-audio-previews-+-artwork-dev-helpers:-allorigins-proxy-(cors-workaround-during-local-dev)
• node.js
• react-18
• react-leaflet
• vercel
• vite
• with
• works