[CASE]Music · SaaS·2025
Supify
La plateforme qui réinvente le partage musical.
Supify est une plateforme SaaS dédiée à la musique qui permet aux utilisateurs de créer des tierlists, participer à des tournois de blind-tests, découvrir les morceaux préférés des artistes et interagir avec une communauté de passionnés. Un projet ambitieux pensé comme une véritable application, pas un simple site.
01Contexte
Le point de départ
Le marché de la découverte musicale est saturé d'applications froides et orientées algorithmes. Spotify, Apple Music : des catalogues énormes mais zéro interaction communautaire profonde. Supify est né d'un constat simple — les fans de musique veulent débattre, classer, défier, partager leurs goûts.
Le projet devait être plus qu'un site vitrine : une vraie plateforme avec authentification, gestion de contenu dynamique, interactions en temps réel, monétisation. Un scope proche d'une startup SaaS early-stage.
02Enjeu
Le défi à relever
Construire rapidement une plateforme complète avec plusieurs modules interconnectés : tierlist builder, tournoi de blind-tests, artist picks, dashboard utilisateur, onboarding. Chaque module devait être à la fois indépendant et cohérent dans l'expérience globale.
Garantir des performances irréprochables malgré la complexité : le site devait rester rapide avec de nombreuses images (pochettes d'album), de l'audio (extraits musicaux), et des interactions dynamiques. Le tout en gérant scrupuleusement les droits d'auteur musicaux.
Prévoir la monétisation dès le départ avec un système d'abonnement clair, tout en laissant la plupart des fonctionnalités gratuites pour encourager l'adoption.
03Solution
L'approche choisie
Stack Next.js 15 avec App Router pour un rendu hybride : pages publiques en static/ISR (rapides, SEO-friendly), zones authentifiées en server components. Base de données Supabase (PostgreSQL + auth + storage) pour la scalabilité et la simplicité. Stripe pour les abonnements.
Architecture modulaire : chaque feature (tierlist, blindtest, music-draw, tournois, artist-picks) vit dans son propre dossier avec ses composants, sa logique métier et ses API routes. Facile à faire évoluer, difficile à casser.
Design system cohérent construit avec Tailwind CSS et Framer Motion. Identité visuelle forte (gradient violet/rose signature), animations fluides qui renforcent le sentiment premium sans sacrifier la performance. Résultat : un site qui ressemble à une app, avec les avantages d'un site web (indexation, partage, zéro install).
04Fonctionnalités livrées
- 01
Tierlist Builder
Outil drag-and-drop permettant aux utilisateurs de classer leurs artistes et morceaux préférés. Partage social intégré, tiers customisables, export en image.
- 02
Blind Test
Mini-jeu de reconnaissance musicale avec extraits audio chronométrés. Scoring en temps réel, mode compétitif multi-joueurs, classements hebdomadaires.
- 03
Tournois musicaux
Système de duels éliminatoires entre morceaux ou artistes. Bracket visualisé, vote communautaire, résultats partageables.
- 04
Artist Picks
Rubrique éditoriale où les artistes partagent leurs morceaux de cœur. Storytelling, recommandations personnalisées, découverte guidée.
- 05
Music Draw
Tirage aléatoire d'un morceau selon des critères personnalisés. Idéal pour lancer une soirée, sortir de sa bulle d'algorithme, découvrir.
- 06
Pixel Cover
Mode créatif permettant aux utilisateurs de pixeliser leur propre cover d'album. Outil ludique qui crée du contenu partageable, fort potentiel viral.
- 07
Abonnement Premium
Tunnel d'abonnement Stripe intégré. Gestion des subscriptions, upgrades, annulations. Features premium (illimité, features exclusives, badge profil).
- 08
Onboarding guidé
Parcours d'inscription personnalisé qui récupère les goûts musicaux initiaux de l'utilisateur pour personnaliser immédiatement l'expérience.
- 09
Dashboard utilisateur
Profil public partageable avec les tierlists, stats de blind tests, badges, historique. Gamification complète du parcours utilisateur.
05Stack technique
- Next.js 15
- TypeScript
- Supabase
- PostgreSQL
- Stripe
- Tailwind CSS
- Framer Motion
- Vercel
Et la suite ?