Web · Arbisoft
Lutfullah Khan Archive
A listening first archive of Lutfullah Khan's reel to reel recordings of poets, musicians and public figures. Built around audio playback that survives navigation.
Key decisions
- Kept persistent chrome and route content separate so audio never restarts when you navigate.
- Served media through a byte range route behind normalized playback descriptors, so the host can change without touching the UI.
- Opened profiles on mobile as drawers over the current screen instead of navigating away.
- Replaced per section color patches with one priority based controller for browser edge color.
- Role
- Main engineer on the site, working with the LUMS team. Took it from the Figma handoff and prototype to production and wrote most of the codebase.
- When
- Jul to Sep 2026
- Stack
- Next.js, React, TypeScript, Tailwind CSS, PostHog, GitLab CI/CD, Nginx, PM2
Lutfullah Khan spent decades recording poets, musicians and public figures on reel to reel tape. The archive puts a curated set of those recordings online with profiles, stories and context. It's meant for listening first, so most of the engineering went into playback.
Audio that keeps playing
The landing page is a reel carousel with its own player. Profiles have a full player. Stories and category screens play too. Moving between them shouldn't restart audio or flash the page, so persistent chrome and route content are kept separate and only the route content transitions.
Audio is served through a media route that answers byte range requests with 206 responses, which browsers need to seek inside long recordings. Components consume normalized playback descriptors rather than file paths, so the media host can later move to signed URLs or HLS without touching the UI.
Mobile drawers and edge to edge color
On mobile a profile opens as a full screen drawer over whatever you were looking at instead of navigating away, so closing it puts you back exactly where you were with playback intact.
The stubborn bug was browser chrome color. Safari and Chrome paint the area behind their toolbars using the page underneath, and with a drawer open that area kept the color of the section behind it. Patching each section made it worse. I replaced it with a single bleed controller where every surface registers a color with a priority. An open drawer beats the route, which beats the active landing section, which beats the default.
The rest of the build
- Server components by default. Profiles are statically generated with their own metadata and sitemap entries. Client components are limited to playback, gestures and animation.
- PostHog events are typed and separate user started audio from autoplay, since the landing page plays something on its own. Donation link clicks and profile opens are tracked so the team can see what leads people to support the archive.
- A WCAG 2.1 AA pass before launch: focus management between screens, inert backgrounds while overlays are open and labelled media controls.
- Media compression and local caching of audio durations to keep the first load light on mobile data.
- Deployed from GitLab CI/CD to a Next.js server run by PM2 behind Nginx. A teammate set up the CI job. I wrote the manual runbook for when CI couldn't reach the server.
