The Listening Room & PIP
A website for a 24/7 lofi hip-hop YouTube channel, built around two characters: THE LISTENER and PIP. The Next.js 16 frontend integrates the YouTube stream with lazy loading, Framer Motion parallax animations and careful accessibility. The backend features a newsletter with PostgreSQL 17 storage, rate limiting and CSRF protection. Everything is deployed on an Infomaniak VPS in Geneva via multi-stage Docker and Caddy reverse proxy with auto-HTTPS.
Context
The Listening Room & PIP is a lofi hip-hop YouTube channel streaming 24/7 for work, study and late nights. Behind the music are two characters: THE LISTENER, a hooded figure whose amber headphones glow with the beat, and PIP, a small ceramic robot companion on the desk with twin amber eyes that blink in rhythm. The project required a website that translates this visual and narrative world into a digital experience — not a generic link page, but a space that matches the channel's identity. The design uses a warm dark theme with amber accents (#FF8C42), Playfair Display and Inter fonts, and a cosmopolitan loft aesthetic.
Architecture
The project is a Next.js 16 monolith (App Router, React 19, strict TypeScript) hosted as a standalone Docker container on an Infomaniak VPS in Switzerland.
The frontend is organized into five sections: Hero with Framer Motion parallax, Stream with the YouTube embed, About with character cards, Community with social links, and Newsletter with the subscription form. Playfair Display is loaded via next/font to prevent FOUT. Scroll-triggered animations use react-intersection-observer with prefers-reduced-motion support. Images are served by next/image in AVIF and WebP formats.
The YouTube integration uses a lazy-loading pattern: a static poster is displayed until the user clicks, at which point the YouTube iframe is mounted. This avoids loading 300+ KB of Google scripts before the user explicitly requests the player — consistent with the cookie consent policy.
The newsletter relies on a Next.js API Route (/api/newsletter) that writes to PostgreSQL 17 via the pg driver. The schema is minimal: a subscribers table with unique email, UUID unsubscribe token and timestamp. Rate limiting is implemented in-memory (5 requests per minute per IP) with passive cleanup and a hard cap of 10,000 entries to prevent memory leaks. CSRF protection validates the Origin or Referer header on every POST request.
The infrastructure uses Docker Compose with two services: the Next.js app (multi-stage build, node:22-alpine image, standalone output, 512 MB memory limit) and PostgreSQL 17 Alpine with health checks. The Caddy reverse proxy runs in a shared Docker network alongside other projects on the VPS and handles HTTPS via Let's Encrypt.
Technical challenges
GDPR and nFADP on a Swiss-hosted site. The server is hosted in Switzerland, which requires compliance with both the GDPR (EU visitors) and the Swiss Federal Act on Data Protection. The main architectural decision was to load no third-party scripts before explicit consent: Google Analytics 4 is injected conditionally via Consent Mode v2, and the YouTube iframe only loads on click. The cookie banner is implemented client-side with localStorage persistence. The privacy policy explicitly documents that subscriber emails never leave Switzerland.
Security headers with YouTube. The Content Security Policy must allow frame-src https://www.youtube.com for the embed while blocking other iframe sources. HSTS is configured with max-age=63072000; includeSubDomains; preload to enforce long-term HTTPS. Permissions-Policy blocks camera, microphone and geolocation.
The /links page as a Linktree alternative. Rather than a third-party service, a dedicated /links page serves as a quick-access hub for visitors arriving from social media. It includes links to YouTube, Discord, the newsletter form and the main site, with its own OpenGraph metadata optimized for mobile sharing.
Dual Schema.org for a music channel. The root layout injects two parallel JSON-LD objects: WebSite for site navigation and MusicGroup with genres (Lofi Hip Hop, Ambient, Chillwave) and sameAs pointing to all social platforms.
Project scale
- Frontend: 5 sections, 15+ components, parallax and scroll-triggered animations, prefers-reduced-motion accessibility
- Backend: Newsletter API Route, PostgreSQL 17, in-memory rate limiting, CSRF protection
- Security: CSP, HSTS, X-Frame-Options, Referrer-Policy, Permissions-Policy, GDPR/nFADP cookie consent
- Infrastructure: Multi-stage Docker (node:22-alpine), Caddy reverse proxy, Let's Encrypt HTTPS, Infomaniak VPS Geneva
Current status
The site is live at thelisteningroom.tv. The YouTube embed, newsletter form and cookie consent banner are fully operational. The /links page is used as the primary destination for social media bios (YouTube, Discord, X, TikTok, Instagram). Deployment is via git pull + docker compose up -d --build on the VPS.
