The idea
Most streaming platforms recommend music based on your own past listening — which quietly narrows what you hear over time into an echo chamber. EchoLocation breaks that pattern by letting you explore music by geography instead of algorithm: click any country on the map and instantly see what’s trending there, powered by Last.fm’s real listening data.
Architecture
A three-tier setup: an Angular frontend served as a static site, an Express API in the middle, and MongoDB Atlas holding the exploration history.
Three-tier architecture: Angular on S3, Express on EC2, MongoDB Atlas for data.
- Frontend — Angular (signals, RxJS), hosted as a static build on Amazon S3.
- Backend — Express REST API, running on an Amazon EC2 t3.micro instance (Amazon Linux 2023), kept alive with PM2.
- Data — MongoDB Atlas for the exploration history; Last.fm’s geo.getTopTracks endpoint called directly from the browser.
Built in five vertical slices
Rather than building layer by layer, I built the app as five end-to-end slices — each one shippable and testable before starting the next.
- 1. Interactive map. Leaflet.js loaded inside an Angular component, using a GeoJSON world-countries layer so each country is a clickable polygon — no reverse-geocoding API call needed to know what was clicked.
- 2. Last.fm integration. A typed LastfmService using HttpClient and signals. The trickiest part: Last.fm rejects country names like “Russia” or “United States of America” outright (error code 6). Fixed with the i18n-iso-countries package to convert to the exact names the API expects, plus a small manual override map for the remaining mismatches.
- 3. Search bar. Type a country name, and the map calls flyTo to animate there and highlight it — implemented by matching against the same GeoJSON layer used for clicks, so search and click share one source of truth.
- 4. Express + MongoDB backend. Every explored country is saved as a history record (country, trackName, artist, server-side exploredAt timestamp) via a small REST API, so returning visitors can see their own musical journey.
- 5. Styling, responsiveness, and hosting. Tailwind CSS throughout; a collapsible sidebar that starts open on desktop and closed on mobile; deployment to S3 (frontend) and EC2 with PM2 (backend).
In action
Exploring a country — clicking Belarus surfaces its top 10 most-listened tracks in the sidebar.
Exploration history, and fully responsive — the sidebar collapses cleanly on mobile, with past visits pulled straight from MongoDB.
A decision worth knowing
The original plan used a second API (BigDataCloud) to reverse-geocode map click coordinates into country names. During implementation, this turned out to be unnecessary: the GeoJSON country-polygon layer already carries the country name as a feature property, so clicking a country returns its name directly — no extra API call, one less thing that can fail, and no rate limit to worry about.