Personal project · Built for fun2026

Golden Generation (ggen)

A little nostalgia project: a music player for Arabic anime theme songs from the 1990s and 2000s.

Open the player

How the player works

01
Catalog
Bundled JSON holds titles, artists, keywords, and media URLs—not audio files.
02
Player
React Context controls one HTMLAudioElement, with separate playback and progress updates.
03
Media
A dedicated CDN serves cover art and MP3s. The browser streams audio directly from its URLs.

Streaming & seeking

Audio element → CDN → 206 Partial Content

Requests with a Range header bypass service-worker caching and stay on the browser’s native streaming path.

Safe caching

Full CDN GET → 200 response → Cache API

The service worker only handles CDN /songs/ and /images/ GETs, caching complete responses rather than partial audio.

Your library

Favorites & preferences → Zustand → localStorage

Playlists, recent songs, resume position, and player preferences stay in this browser.

Hosted on Vercel, with no application backend or database. Media lives on the CDN; personal library data stays on the device. Selective caching does not guarantee offline playback.

Overview

I built Golden Generation for fun, as a place to revisit nostalgic Arabic anime themes. You can browse the songs, search in Arabic or English, save favorites, make playlists, and share a song with someone. It also gave me a chance to work on the small details of a music player, like keeping playback going while browsing and remembering where you left off.

Challenge

The idea was simple: make these songs easy to browse and play, without asking anyone to create an account. The interesting part was getting playback, queues, and saved favorites to work together without making the app unnecessarily complicated.

Solution

I used Next.js for the site, a JSON file for the song list, and a CDN for the audio. A shared player keeps the music running as you browse. Favorites, playlists, and the last playback position are saved in the browser, and each song has its own link for sharing.

Engineering decisions

Keeping it small. A static song list and browser storage were enough for this project. There’s no application backend to maintain, though that means playlists don’t sync between devices. Keeping progress updates separate. The progress bar updates frequently, so I gave it a separate React context rather than making the song grid update along with it. Working with browser audio. Skipping a song or pausing can interrupt a play request, and browsers can block autoplay. The player handles those cases separately from an actual audio-loading error. The service worker also skips partial audio requests, which the Cache API cannot store as ordinary full responses.

Architecture

Next.js App Router provides the catalog, library, recent history, and individual song pages. React Context owns an HTMLAudioElement, with separate contexts for playback state and frequently changing progress. Zustand’s persistence middleware stores the personal library and preferences in localStorage. A static JSON file defines the catalog, while audio and artwork are served through a CDN. The application is deployed on Vercel; a service worker caches eligible media assets.

My role

Personal project · Built for fun

What it delivers

A working player with search, a queue, favorites, playlists, recent history, and playback resume. It also supports keyboard controls, song sharing, and light and dark themes. At the time of writing, the curated collection contains 66 tracks across four artists.

Constraints & tradeoffs

Favorites and playlists belong to the browser you use; they don’t sync across devices and are lost if you clear its storage. The song list is curated rather than open to uploads. Offline playback isn’t guaranteed, and this version doesn’t have an automated test suite or CI workflows.

Tech stack

Next.js
React
TypeScript
TailwindCSS
Zustand
React Context
Framer Motion
Service Workers
Vercel

Related work

View all →

Design and engineering2024

essaidi.me

Engineering work needed a public surface that could carry case studies, writing, and tools without looking like a template.

Next.jsTypeScriptTailwindCSS

Read case study

Overview

Engineering decisions

Architecture