Tous à table
Une application web pour jouer ensemble pendant le repas, sur un seul écran : Défi, Blind Test et Discussion.
- Cadre
- Projet scolaire, HEPL, cours « Création d’un support non-linéaire »
- Type
- Application web, pensée pour le téléphone
- Rôle
- Concept, design et développement
- Année
- 2025
- Outils
- React, Vite, Tailwind CSS, Framer Motion
- Statut
- Terminée
Contexte
À table, les téléphones prennent souvent la place de la conversation. Tous à table retourne l’idée : un seul écran, posé au milieu de la table, pour jouer ensemble au lieu de faire défiler chacun le sien.
Mon rôle
Concept, interface et développement de l’application, de l’écran de lancement au podium.
Défis techniques
- Un parcours de jeu complet : choix du mode, joueurs avec prénom et avatar, tours de jeu, scores, podium.
- Les joueurs habituels sont retenus d’une partie à l’autre (localStorage), la partie en cours vit dans le sessionStorage.
- Quinze questions en mode Défi, mêlant culture générale et extraits musicaux ; le Blind Test lance l’extrait YouTube à un instant choisi au hasard.
- Des transitions animées avec Framer Motion et des confettis pour célébrer le podium.
Outils
- React 18
- Vite
- React Router
- Tailwind CSS
- Framer Motion
- localStorage
Résultat
L’application est terminée : elle a été réalisée pour le cours « Création d’un support non-linéaire ».
Treize écrans, du lancement au podium
Captures réelles en format iPhone 16 (393 × 852 points, densité 3). Faites défiler la bande horizontalement. Les prénoms sont des données de démonstration.
