Music discovery webapp
Hidden Gems
Een interactieve muziekdiscovery-webapp waarmee gebruikers nieuwe muziek ontdekken vanuit een bestaand Spotify-nummer. De app verzamelt vergelijkbare nummers en rangschikt ze op listener-similarity.
Overzicht
Hidden Gems is gebouwd als portfolio-project rond muziekdiscovery, OAuth-authenticatie, dataverwerking, performance en een gebruiksvriendelijke responsive interface. Een Spotify-tracklink vormt het startpunt; Spotify en Last.fm leveren samen de metadata en listener-based aanbevelingen.
Wat belangrijk was
- Spotify OAuth Authorization Code Flow met PKCE zonder client secret in de frontend.
- Last.fm-aanbevelingen veilig laten lopen via een beschermde Cloudflare Worker.
- Snelle, stabiele discovery met caching, paginering, retries, timeouts en beperkte parallelle requests.
Discovery flow
De app start met een Spotify-tracklink en maakt daar een overzichtelijke set aanbevelingen van, inclusief albumcovers, compatibiliteit en directe Spotify-links.
Features
- Spotify-login via OAuth Authorization Code Flow met PKCE.
- Listener-based aanbevelingen via Last.fm en Spotify-metadata.
- Sorteren op hoogste of laagste compatibiliteit met paginering.
- Voortgangsbalk met zoekfase, percentage en verstreken tijd.
- Liked/recent gespeelde nummers uitsluiten en favoriete ontdekkingen lokaal bewaren.
Technologies
Gebouwd met Angular 18, TypeScript, HTML, SCSS, Spotify Web API, Last.fm API, Cloudflare Workers, LocalStorage, GitHub Actions en GitHub Pages.
Security
De Spotify Client ID mag publiek zijn, maar Hidden Gems gebruikt PKCE zodat er geen Spotify Client Secret in de browser nodig is. De Last.fm API-key staat alleen als beveiligd Cloudflare Worker-secret opgeslagen en komt niet in de repository of browserbundle terecht.
Performance
De app gebruikt lazy-loading, async image decoding, recommendation caching, Spotify-library caching, gepagineerde resultaten, beperkte parallelle API-verzoeken, retries bij rate limits en veilige fallbacks wanneer metadata ontbreekt.