doermusic — Music & Sound Library Platform
doermusic is a music and sound library for DOC Studios. It lets visitors browse original compositions, ambient soundscapes, and commercial music — without audio stopping when they switch between categories.
Deliverables
What was built
Content categories
3 (Originals, Scenes, Ads)
Architecture
SPA + SSR
Desktop performance
100 / 100
SEO score
92 / 100
Features
Key features delivered
Stack
Technical stack
Framework
Next.js with React — pages are server-rendered on first load, then client-side navigation takes over
Language
TypeScript with ES6+ JavaScript
Styling
Custom CSS, Google Fonts (Montserrat for body, Playfair Display for headings)
Icons
Font Awesome 6.0
Architecture
Hash-based routing keeps the user on one page — #originals-page, #scenes-page, #advertisements-page
SEO
All meta tags are server-rendered so crawlers see complete page data. SEO score: 100/100
Hosting
Self-hosted on a containerized server with automated builds, HTTPS, and fast static asset delivery
Challenge
What needed solving
The main problem was keeping audio playing while visitors browse between categories. A standard multi-page site reloads the page on every navigation — audio stops. A pure client-side SPA solves that but produces weak SEO. Both mattered here.
Approach
How it was approached
Used Next.js to handle both sides: server-rendered HTML so search engines see proper page content, and client-side routing so audio never stops. Hash-based navigation keeps everything in one continuous browser session.
Implementation
How it was built
Built as a Next.js SPA with hash-based routing — navigation is fully client-side, so audio plays uninterrupted across all category switches.
Organized content into three sections: Originals, Scenes, and Advertisements. Each has its own dedicated browsing layout.
Set up server-side rendering for all meta tags and page markup so search engines get clean, complete HTML on every page.
Designed the UI around Montserrat and Playfair Display — straightforward, readable, fits the DOC Studios visual identity.
Added a contact form for licensing inquiries and custom composition requests.
Deployed on a self-hosted containerized server with automated builds and HTTPS.
Outcome
What was achieved
Desktop PageSpeed score: 100/100. SEO score: 100/100. Visitors can switch between all three categories while audio keeps playing, and licensing inquiries go directly to DOC Studios through the contact form.
Lessons
Key takeaways
- SSR and SPA aren't mutually exclusive. Next.js handles both — the architecture just needs to be decided before building starts.
- Keeping audio playing across navigation means all routing has to stay client-side. Any server-side redirect breaks the playback.
- A simple UI is easier to maintain as the content library grows. Complexity added early becomes a maintenance cost later.
Relevant pages
Website Strategy and Development
Corporate websites and landing pages built for clarity, trust, and conversion from the first structural decision through the final implementation.
SEO Consulting
Search visibility strategy built around qualified demand, technical foundations, page clarity, and content priorities that improve both rankings and conversion quality.
DOC Studios | Sonic Branding and Corporate Audio
DOC Studios is the specialized audio division focused on sonic branding, corporate audio identity, and licensing-ready sound systems.