Aller au contenu principal

Qyo

4 semaines
Qyo - Apercu principal
Scroll pour explorer

Le projet

Qyo est une application web permettant de gérer collaborativement la musique lors d’événements. L’hôte crée un événement et partage un code ou QR code avec ses invités, qui peuvent ensuite proposer des morceaux et voter en temps réel pour décider de la playlist.

Fonctionnalités clés

Pour l’hôte

  • Création d’événements avec code d’accès et QR code
  • Choix des sources musicales autorisées par événement
  • Contrôle de lecture complet : play, pause, skip
  • Modération de la file d’attente : ban, kick, boost de priorité
  • Gestion des invités : expulsion ou bannissement
  • Compte persistant avec authentification email/mot de passe ou Google OAuth

Pour les invités

  • Zéro friction : pas de compte requis, juste un pseudonyme
  • Recherche et soumission de morceaux depuis les sources activées
  • Vote pour les morceaux (un vote par morceau, toggleable)
  • Visibilité en temps réel de la file d’attente et des votes
  • Notifications : morceau en lecture, expulsion, bannissement

Sources musicales

  • YouTube : recherche et lecture via l’API IFrame Player
  • SoundCloud : validation et lecture via Widget API
  • Fichiers locaux : upload via File System Access API, métadonnées extraites automatiquement

Temps réel

  • Communication WebSocket (Socket.IO) pour des mises à jour instantanées
  • Nouvelles soumissions, changements de votes, réordonnancement de la file
  • Notifications d’arrivée/départ des invités
  • Synchronisation de l’état de lecture

Stack technique

  • Frontend : Next.js 14 (App Router), TypeScript, Tailwind CSS, Zustand
  • Backend : NestJS, TypeORM, PostgreSQL, Redis
  • Temps réel : Socket.IO avec auto-reconnexion
  • Auth : JWT (RS256) pour les hôtes, sessions Redis pour les invités
  • Déploiement : Docker Compose, Caddy (reverse proxy), Hetzner Cloud
  • Qualité : ESLint, TypeScript strict, tests Jest

Points forts techniques

  • Architecture monorepo avec types partagés entre frontend et backend
  • Rate limiting intelligent : cooldown de soumission, limite de recherche par session
  • PWA installable sur mobile et desktop
  • Internationalisation complète français/anglais (next-intl)
  • Sécurité : CORS strict, validation des entrées, protection HTTPS automatique
Stack technique
01 Next.js
02 NestJS
03 PostgreSQL
04 Socket.IO
05 TypeScript
06 Docker
Votre projet

Envie d'un resultat
similaire ?

Discuter de mon projet

Réponse garantie sous 24h

Voir le site