Museek
Un blindtest multijoueur où chacun apporte sa playlist, pour que tout le monde puisse jouer.
Août 2026
UI/UX, Web design, Développement
Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Node.js, Socket.io
Le soir, avec des amis en appel Discord, on lançait des quiz musicaux sur YouTube. Sur les quiz anime, un ami ne pouvait pas suivre : ce n'était pas son univers. Quand on passait aux films Disney ou aux années 80, c'était à mon tour de décrocher. Quel que soit le thème, quelqu'un restait sur la touche.
Plutôt que d'imposer un thème, j'ai voulu laisser chacun apporter le sien. Dans Museek, chaque joueur ajoute sa playlist et le jeu mélange tous les morceaux. Tout le monde a donc des titres qu'il connaît, et on découvre au passage les goûts des autres.
Principes et chiffres clés
Sans compte
Personne n'a envie de donner ses données avant même de comprendre le jeu. Un pseudo suffit, et une simple URL de playlist publique remplace toute connexion à Spotify, Deezer ou Apple Music.
Pas une course
Tout le monde peut marquer sur chaque morceau, la vitesse ne compte pas. Le but est que chacun s'amuse.
Aucune réponse contestable
Pas de vote entre joueurs pour valider une réponse : l'autocomplétion propose les vrais noms. Qui connaît l’artiste ne peut pas se tromper.
- Lighthouse mobile
- 100 / 100 / 100 / 100
- Compte requis
- Aucun
- Joueurs par salon
- Jusqu'à 12
Features
- Jusqu'à 12 joueurs, sur mobile, tablette et ordinateur
- Playlists Spotify, Deezer et Apple Music
- Autocomplétion tolérante (accents, majuscules, écriture latine)
- Récap des réponses et liens vers les morceaux
- Installable comme une application
Identité visuelle
L'identité est la première chose que j'ai conçue, avant d'écrire une ligne de code. Tout part d'une idée : la musique est cachée, il faut la chercher.
Un M dont les barres verticales dessinent deux notes de musique en contreforme. On ne les voit pas tout de suite : il faut les chercher, comme dans le jeu. C'est le sens du nom, music + seek.
Un violet profond (#770FB8) sur un fond presque noir (#0E0712), pour une ambiance cosy, pensée pour jouer le soir entre amis. Le vert et le rouge sont réservés aux bonnes et mauvaises réponses, pour être compris d'un coup d'œil.
Public Sans, une linéale lisible à toutes les tailles, même sur petit écran en pleine partie. La maquette utilisait aussi Clash Display pour les titres, mais le logo et le fond suffisaient à donner du caractère : j'ai simplifié.
Un dégradé violet recouvert de grain donne de la matière aux écrans sombres, sans détourner l'attention de la partie.
Évolution visuelle
Salon de jeu
Moins de champs à remplir : une seule URL de playlist suffit. Deux options sont apparues : deviner qui a choisi le morceau, et une aide qui défloute la pochette.
Résultats
En testant avec des amis, tout le monde voulait voir ce que les autres avaient répondu. Le podium est devenu un récap morceau par morceau, avec un lien vers la plateforme pour retrouver les morceaux qu'on a aimés.
Challenges
Romaniser les titres japonais et chinois
Problématique
J'écoute beaucoup de musique japonaise et chinoise. Pour que tout le monde puisse jouer, il fallait pouvoir répondre en lettres latines. Le piège : les deux langues partagent les mêmes caractères. 東京 se lit « Tōkyō » en japonais mais « Dōngjīng » en chinois. Sans savoir de quelle langue il s'agit, impossible de donner la bonne réponse.
Étapes
Premier essai : une bibliothèque de romanisation directement sur le serveur. C'était rapide, mais face à un titre écrit uniquement avec ces caractères communs, elle ne pouvait pas deviner la langue.
Deuxième essai : demander à une IA de romaniser chaque artiste et chaque titre séparément. Sans contexte, elle hésitait : le même titre sortait parfois en japonais, parfois en chinois.
Solution
J'envoie maintenant l'artiste et le titre ensemble : un artiste japonais indique à l'IA que le titre est sûrement japonais aussi. Pour limiter les appels, le serveur traite seul ce qu'il sait déjà lire (les textes contenant des caractères propres au japonais), et seul le reste part à l'IA. Si l'IA ne répond pas, le serveur prend le relais pour que la partie continue.
Workflow
J'ai codé l'architecture moi-même et utilisé Claude Code comme appui : débogage, audit technique, tests serveur, découpage en modules. En tant que junior, je voulais comprendre chaque ligne plutôt que tout déléguer.
Enseignements
Typer proprement un projet TypeScript de bout en bout
Comprendre les échanges client / serveur en temps réel
Penser chaque écran pour qu'il se comprenne sans explication
Les bases du référencement naturel
Me contacter
Un projet en tête, une opportunité au sein de votre équipe ou simplement envie d'échanger ? Écrivez-moi !