The Listening Room & PIP
Un site web pour une chaine YouTube lofi hip-hop 24/7, centre sur deux personnages : THE LISTENER et PIP. Le frontend Next.js 16 integre le stream YouTube avec chargement differe, des animations parallax Framer Motion et une accessibilite soignee. Le backend repose sur une newsletter PostgreSQL 17 avec rate limiting et protection CSRF. L'ensemble est deploye sur un VPS Infomaniak a Geneve via Docker multi-stage et reverse proxy Caddy avec HTTPS automatique.
Le contexte
The Listening Room & PIP est une chaine YouTube de lofi hip-hop diffusant 24/7 pour le travail, les etudes et les nuits tardives. Derriere la musique, deux personnages : THE LISTENER, une figure encapuchonnee dont les ecouteurs ambres luisent en rythme, et PIP, un petit robot en ceramique pose sur le bureau aux yeux ambres qui clignotent avec le beat. Le projet necessitait un site web qui traduit cet univers visuel et narratif en experience numerique — pas une page de liens generique, mais un espace a l'image de la chaine. Le design adopte un theme sombre chaud avec des accents ambres (#FF8C42), les polices Playfair Display et Inter, et une esthetique de loft cosmopolite.
L'architecture
Le projet est un monolithe Next.js 16 (App Router, React 19, TypeScript strict) heberge en standalone Docker sur un VPS Infomaniak en Suisse.
Le frontend s'organise en cinq sections : Hero avec parallax Framer Motion, Stream avec l'embed YouTube, About avec les cartes personnages, Community avec les liens sociaux, et Newsletter avec le formulaire d'abonnement. Playfair Display est chargee via next/font pour eviter tout flash. Les animations scroll-triggered utilisent react-intersection-observer avec respect de prefers-reduced-motion. Les images sont servies par next/image en formats AVIF et WebP.
L'integration YouTube utilise un pattern de chargement differe : un poster statique est affiche jusqu'au clic, moment ou l'iframe YouTube est montee. Cette approche evite le chargement de 300+ KB de scripts Google avant que l'utilisateur ne le demande explicitement — conforme a la politique de consentement du cookie banner.
La newsletter repose sur une API Route Next.js (/api/newsletter) qui ecrit dans PostgreSQL 17 via le driver pg. Le schema est minimal : une table subscribers avec email unique, token de desinscription UUID et timestamp. Le rate limiting est implemente en memoire (5 requetes par minute par IP) avec nettoyage passif et plafond a 10 000 entrees pour eviter les fuites memoire. La protection CSRF valide l'en-tete Origin ou Referer a chaque requete POST.
L'infrastructure utilise Docker Compose avec deux services : l'app Next.js (build multi-stage, image node:22-alpine, output standalone, limite memoire 512 MB) et PostgreSQL 17 Alpine avec health checks. Le reverse proxy Caddy tourne dans un reseau Docker partage avec les autres projets du VPS et assure le HTTPS via Let's Encrypt.
Les defis techniques
RGPD et nLPD sur un site heberge en Suisse. Le serveur est en Suisse, ce qui impose le respect a la fois du RGPD (visiteurs UE) et de la nouvelle loi federale sur la protection des donnees. La decision architecturale principale a ete de ne charger aucun script tiers avant le consentement explicite : Google Analytics 4 est injecte conditionnellement via le Consent Mode v2, et l'iframe YouTube ne se charge qu'au clic. Le banner de cookie est cote client avec persistance en localStorage. La politique de confidentialite documente que les emails ne quittent pas la Suisse.
En-tetes de securite avec YouTube. La Content Security Policy doit autoriser frame-src https://www.youtube.com pour l'embed tout en bloquant les autres sources d'iframes. Le HSTS est configure avec max-age=63072000; includeSubDomains; preload pour forcer le HTTPS a long terme. Les Permissions-Policy bloquent camera, microphone et geolocalisation.
Page /links comme alternative a Linktree. Plutot qu'un service tiers, une page dediee /links sert de hub d'acces rapide pour les visiteurs venant des reseaux sociaux. Elle inclut YouTube, Discord, le formulaire newsletter et le site principal, avec ses propres metadonnees OpenGraph optimisees pour le partage mobile.
Schema.org dual pour une chaine musicale. Le layout injecte deux objets JSON-LD en parallele : WebSite pour la navigation et MusicGroup avec les genres (Lofi Hip Hop, Ambient, Chillwave) et les sameAs pointant vers toutes les plateformes sociales.
L'echelle du projet
- Frontend : 5 sections, 15+ composants, animations parallax et scroll-triggered, accessibilite prefers-reduced-motion
- Backend : API Route newsletter, PostgreSQL 17, rate limiting in-memory, protection CSRF
- Securite : CSP, HSTS, X-Frame-Options, Referrer-Policy, Permissions-Policy, consentement cookie RGPD/nLPD
- Infrastructure : Docker multi-stage (node:22-alpine), Caddy reverse proxy, HTTPS Let's Encrypt, VPS Infomaniak Geneve
L'etat actuel
Le site est en production sur thelisteningroom.tv. L'embed YouTube, le formulaire de newsletter et le banner de consentement sont operationnels. La page /links est utilisee comme destination principale pour les bios des reseaux sociaux (YouTube, Discord, X, TikTok, Instagram). Le deploiement se fait via git pull + docker compose up -d --build sur le VPS.
