← RETOUR AUX PROJETS Case Study

SUNWAVE HUB

< Frontend / Vite / Supabase / GitHub Pages />█

Plateforme communautaire dédiée à l'univers retrowave & synthwave — radio live, galerie visuelle générée par IA, soumission de playlists et espace événementiel, entièrement statique.

VOIR LES FONCTIONNALITÉS EXPLORER LA STACK
Scroll
Project_overview

Le projet

Une communauté dispersée sur Discord, YouTube et Reddit — un espace centralisé pour la réunir.

La communauté retrowave existe principalement sur Discord, Reddit et YouTube, sans espace centralisé réunissant musique, visuels et actualités. Sunwave Hub est pensé comme ce point de convergence : une expérience immersive à forte identité visuelle.

L'objectif était de créer un site entièrement statique (zéro serveur à maintenir), avec une base de données légère via Supabase et un pipeline de génération de contenu automatisé par IA. Déployé automatiquement à chaque push sur main via GitHub Actions.

Tous les besoins dynamiques — soumissions de playlists, lecture des données — transitent par l'API REST Supabase directement côté client, sans aucun backend custom.

Type
Projet personnel
Contexte
2026
Rôle
Full-Stack & Design
Statut
En ligne
Key_metrics

En chiffres

4
Modules principaux
2
Workflows GitHub Actions
0
Serveur à maintenir
∞
Visuels IA générables

Features

Fonctionnalités clés

Radio Live — Obsidian Receiver '84
Lecteur radio custom à l'esthétique CRT/synthwave, piloté par l'YouTube IFrame API. Trois stations (Neon Drift, Sunset Vibes, Cyberpunk Nights) avec VU-mètres animés et affichage du titre en marquee.
Galerie Visuelle Automatisée
Images générées automatiquement chaque semaine via un workflow GitHub Actions qui appelle l'API Gemini. Les visuels sont commit directement dans le repo et déclenchent un redéploiement. Lightbox avec téléchargement intégré.
Soumission de Playlists
Formulaire de soumission (URL Spotify ou YouTube + titre) persisté dans Supabase via le client JS côté navigateur. Les 4 dernières entrées approuvées sont affichées dynamiquement. Schéma dédié sunwave pour l'isolation.
Design System Retrowave
Palette sunset (pink → orange → yellow), overlays scanlines CRT, grille rétro-perspective animée, glassmorphism. Typographie Audiowide + Oxanium. Variables CSS centralisées, responsive mobile-first.
Pipeline CI/CD automatisé
Deux workflows : déploiement automatique sur push main vers GitHub Pages, et cron hebdomadaire pour la génération de la galerie IA. Variables Supabase injectées depuis les GitHub Secrets.
Sécurité côté client
Row Level Security Supabase configurée pour autoriser les lectures publiques et restreindre les écritures aux soumissions approuvées. Clé anonyme exposée sans risque grâce aux politiques RLS.
Tech_stack

Stack technique

Une stack statique-first, chaque outil choisi pour sa légèreté et sa compatibilité GitHub Pages.

⌨ Build
Vite
Build rapide, injection des variables d'environnement (VITE_) pour Supabase, sortie statique dans /dist.
Bundler Statique
🎨 Frontend
HTML + CSS + JS
Aucun framework UI. ES Modules natifs. Tailwind via CDN pour la rapidité de développement. Vanilla JS pur.
Vanilla ES Modules
🛠 Base de données
Supabase
Schéma isolé sunwave. Client JS direct depuis le navigateur. Anon key + RLS pour sécuriser les écritures.
PostgreSQL RLS
🎵 Audio
YouTube IFrame API
Lecture de playlists en arrière-plan (iframe 0×0). Gestion des états, changement de station à chaud, récupération du titre via getVideoData().
Streaming AudioContext
🤖 Contenu IA
Gemini API
Workflow Actions hebdomadaire. Génère 6 visuels retrowave, les commit dans /public/images/gallery/ et redéploie automatiquement.
Génération image Cron
🚀 CI/CD
GitHub Actions
Déploiement sur push main → GitHub Pages. Génération galerie sur cron hebdomadaire. Secrets injectés à la volée.
Deploy GitHub Pages
$ cat stack.txt
→ Build : Vite → /dist statique
→ Frontend : HTML + CSS + JS Vanilla (ES Modules)
→ Database : Supabase (PostgreSQL + RLS, schéma sunwave)
→ Radio : YouTube IFrame API (playlists rétrowave)
→ Galerie IA : Gemini API → GitHub Actions cron hebdo
→ CI/CD : GitHub Actions → GitHub Pages
Challenges

Défis & Solutions

Les contraintes d'un site statique face à des besoins dynamiques — et comment elles ont été surmontées.

Défi
Variables d'env. sur GitHub Pages
GitHub Pages déploie du contenu statique, impossible d'injecter des variables côté serveur — la clé Supabase ne peut pas être cachée.
Solution
Anon key + Row Level Security
La clé anonyme exposée est sans danger si les politiques RLS sont correctement configurées. Lectures publiques autorisées, écritures restreintes par politique.
Défi
Mise à jour du contenu sans CMS
Un site statique ne peut pas récupérer de nouvelles images à la volée — la galerie serait figée sans intervention manuelle.
Solution
Pipeline IA git-natif
Workflow Actions cron (hebdomadaire) : Gemini génère les visuels → commit dans le repo → push → redéploiement GitHub Pages déclenché automatiquement.
Défi
Radio YouTube sans CORS visible
Récupérer le titre de la piste en cours via l'IFrame API nécessite une synchronisation précise avec les événements du lecteur caché.
Solution
Polling sur onStateChange
Écoute de onStateChange (état PLAYING) puis getVideoData().title pour mettre à jour le marquee. Interval de fallback si l'événement est retardé.
Défi
Isolation du schéma Supabase
Sunwave Hub partage une instance Supabase existante — risque de collision entre tables de projets différents.
Solution
Schéma PostgreSQL dédié
Création d'un schéma sunwave distinct du schéma public. Les requêtes JS ciblent explicitement ce schéma — aucune interférence possible.
Retrospective

Apprentissages & Perspectives

Ce que j'ai appris
  • Architecturer un pipeline de contenu IA entièrement géré par git — génération, versioning et rollback natifs
  • Configurer des politiques Row Level Security pour sécuriser un client JS public sans backend
  • Orchestrer l'YouTube IFrame API en mode "radio" avec gestion des états et récupération des métadonnées
  • Isoler plusieurs projets dans une seule instance Supabase via des schémas PostgreSQL dédiés
  • Concevoir un design system cohérent avec CSS custom properties et classes utilitaires sans framework
Prochaines étapes
  • Ajouter un espace événementiel avec agenda des concerts et sorties retrowave
  • Implémenter un système de votes sur les playlists soumises par la communauté
  • Migrer vers Tailwind CLI configuré pour purger les classes inutilisées en production
  • Ajouter un mode hors-ligne via Service Worker pour la radio et les dernières images
  • Explorer Web Audio API pour des visualisations audio plus avancées (spectrum analyser)