← Retour à l'atelier
Web App · Full-Stack 2025 · Projet perso

LANoël

Une web app de gestion complète pour une LAN de Noël entre amis : votes des jeux, équipes, points et classement en direct.

La page publique de LANoël : compte à rebours de l'évènement et classement général des équipes
Projet
LANoël 2025
LAN entre amis
Rôle
Design
Dev full-stack
Format
Web app + overlay
desktop téléchargeable
Année
2025
Le brief

Organiser une LAN,
sans tableur Excel.

Une LAN de Noël, 10 à 12 participants, deux jours de tournoi en équipes de deux. Derrière la fête, une vraie logistique : quels jeux on joue, qui joue avec qui, qui gagne quoi, et un classement que tout le monde conteste s'il n'est pas sous les yeux de tous.

LANoël remplace le tableur et les débats : les participants votent pour les jeux, les équipes sont tirées à la roulette, les points suivent un barème par position, et le classement vit en temps réel, sur le site comme dans un overlay téléchargeable posé au-dessus du jeu.

12
Participants
6
Équipes de deux
10
Jeux proposés
55
Votes enregistrés
Côté joueurs
01

Le vote : chacun sa liste

Chaque participant vote pour ses jeux préférés, huit voix maximum, jaquette à l'appui. Le compteur de voix est public, et quand la période se termine, tout se verrouille d'un coup : les boutons passent en « Votes terminés » et le bandeau l'annonce : plus personne ne bourre les urnes à minuit.

Vote limitéJaquettesVerrouillage
La page de vote : jaquettes des jeux, compteurs de voix et votes verrouillés
02

Le top : la sélection se fait seule

Les votes dépouillés, le classement s'affiche du #1 au #10, badge « Sélectionné » sur chaque carte. L'app repère même le problème toute seule : « 10 jeux sélectionnés pour 8 places ! » Les égalités à 4 voix se départageront entre amis, mais au moins le débat part de chiffres.

Classement autoTop 8Alerte égalité
Le top des jeux votés : classement de 1 à 10 avec badges Sélectionné
03

Les participants : les lutins inscrits

Le trombinoscope du tournoi : avatar personnalisé (ou initiales générées), équipe, points et nombre de votes de chacun. Tout le monde voit qui joue avec qui et où en est son duo, et les avatars mèmes font partie du folklore.

ProfilsAvatarsÉquipes
La page des participants : avatars, équipes, points et votes de chaque joueur
04

Le programme : deux jours millimétrés

Dix jeux planifiés sur deux jours, avec horaires et durées : de Gentlemen's Dispute à 14h00 jusqu'au marathon Biped 2 de six heures pour clore le tournoi. Juste en dessous, le classement en direct (médailles pour le podium, points au vif) pour que la tension monte entre deux parties.

Planning2 joursClassement live
Le programme de l'évènement sur deux jours et le classement en direct
Côté régie
05

Le dashboard : tout à portée de main

L'écran d'accueil de l'admin : quatre compteurs (utilisateurs, jeux, équipes, votes) et les raccourcis vers chaque module de gestion. Avec, en bonus, la roulette de tirage des équipes : le hasard assumé, en direct devant tout le monde, pour composer les duos sans soupçon de favoritisme.

StatsModulesRoulette d'équipes
Le dashboard administrateur : compteurs et raccourcis de gestion
06

Les jeux : le catalogue du tournoi

Ajouter un jeu prend dix secondes : un nom, une jaquette (JPG, PNG, GIF ou WebP, 5 Mo max) et il rejoint le catalogue soumis au vote. La liste récapitule les voix reçues, avec modification et suppression en un clic.

CRUDUpload d'imagesVotes liés
La gestion des jeux : formulaire d'ajout avec jaquette et liste des jeux votés
07

Les équipes : des duos, un rang

Un nom d'équipe, deux joueurs choisis dans la liste des inscrits, et le duo entre dans la course. Le tableau tient le rang de chaque équipe à jour, points cumulés en face, de ROBLOX LOVERS en tête aux INFIRMES qui cherchent encore leurs premiers points.

DuosClassementÉdition
La gestion des équipes : création d'un duo et liste classée des équipes
08

Les points : le barème qui coupe court

Deux modes de saisie : le barème (un jeu, une équipe, une position, et les points tombent automatiquement) ou la saisie manuelle pour les cas spéciaux et les bonus. Le classement se recalcule instantanément sous le formulaire ; à la fin du match, le résultat est déjà en ligne.

BarèmeSaisie manuelleTemps réel
La gestion des points : attribution par barème et classement recalculé en direct
L'overlay compagnon

Le classement,
par-dessus le jeu.

Chaque participant peut télécharger un petit overlay desktop qui reste posé au-dessus du jeu en cours. Connecté au site en continu (statut « Connecté » et heure de mise à jour affichés), il montre le classement live sans quitter la partie.

Et il se pilote au clavier pour ne jamais gêner : Ctrl + L verrouille la fenêtre en place, Ctrl + H la masque d'un coup, et les boutons de la barre gèrent le rafraîchissement et les réglages. De quoi voir son équipe grimper, ou dégringoler, en temps réel.

TéléchargeableAlways-on-topTemps réelRaccourcis clavier
L'overlay desktop LANoël : classement live connecté, verrouillable avec Ctrl+L et masquable avec Ctrl+H
← Suite Retour à l'atelier