Files
tribunal-app/README.md
T
Valentin ROBIN 87cd286e5a Scaffold V1: auth, profils et leaderboard
Next.js 16 + Tailwind + Supabase (Auth, Postgres, Storage). Connexion
par pseudo/mot de passe via email interne dérivé, RLS avec points
protégés au niveau colonne, pages login/signup/leaderboard/profile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-11 14:52:18 +02:00

6.1 KiB

Le Tribunal

Application web pour animer et scorer le jeu « Le Tribunal » entre amis pendant une semaine de vacances : comptes, profils et leaderboard. Le socle est ré-thématisable par édition (un thème différent chaque année).

État actuel : V1 — le périmètre se limite à l'authentification, aux profils et au leaderboard. Le jeu lui-même (le bus, la roulette, l'ostracisme, etc.) arrivera dans des versions suivantes (voir la roadmap).


Fonctionnalités (V1)

  • 🔐 Création de compte avec pseudo, mot de passe et photo de profil
  • 👤 Connexion / déconnexion par pseudo + mot de passe (pas d'email visible)
  • 🖼️ Profil éditable : changer son pseudo et sa photo
  • 🏆 Leaderboard de tous les inscrits, trié par points (rang · photo · pseudo · points)
  • 📱 Responsive, pensé mobile-first et propre sur ordinateur

Stack technique

Rôle Techno
Framework Next.js (App Router) + TypeScript
Style Tailwind CSS
Auth · Base · Stockage Supabase (Auth, Postgres, Storage)
Déploiement Vercel + Supabase (managé)

Prérequis

  • Node.js 20.19+ (Next.js 16 / React 19)
  • Un compte Supabase (offre gratuite suffisante)
  • Un compte Vercel pour le déploiement (optionnel en local)

Installation

1. Cloner et installer

git clone ssh://git@git.alxczl.fr:7878/valentin/tribunal-app.git
cd tribunal-app
npm install

2. Créer le projet Supabase

  1. Créez un nouveau projet sur supabase.com.
  2. Dans SQL Editor, exécutez le contenu de supabase/schema.sql (table profiles, policies RLS, bucket avatars).
  3. Récupérez l'URL du projet et la clé anon dans Project Settings → API.
  4. Dans Authentication → Providers → Email, désactivez "Confirm email". L'app utilise des adresses techniques fictives (pseudo@letribunal.test) qui ne peuvent recevoir aucun email : si la confirmation reste activée, personne ne peut se connecter après inscription.

3. Variables d'environnement

Copiez le fichier d'exemple et renseignez vos valeurs :

cp .env.local.example .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon

⚠️ Ne mettez jamais la clé service_role dans le front ni dans le dépôt.

4. Lancer en local

npm run dev

L'application tourne sur http://localhost:3000.


Scripts

Commande Description
npm run dev Serveur de développement
npm run build Build de production
npm run start Lance le build de production
npm run lint Vérification du code (ESLint)

Déploiement (Vercel)

  1. Importez le dépôt dans Vercel.
  2. Renseignez les variables d'environnement (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY).
  3. Déployez. Vercel rebuild automatiquement à chaque push sur la branche principale.

Structure du projet

tribunal-app/
├─ src/
│  ├─ app/
│  │  ├─ login/page.tsx          # Connexion (pseudo + mot de passe)
│  │  ├─ signup/page.tsx         # Création de compte + upload photo
│  │  ├─ leaderboard/page.tsx    # Classement de tous les inscrits
│  │  ├─ profile/                # Édition du profil + déconnexion
│  │  ├─ layout.tsx              # Layout + navigation
│  │  └─ page.tsx                # Redirection selon l'état de connexion
│  ├─ components/                # Composants UI réutilisables (Avatar, NavBar)
│  ├─ lib/
│  │  ├─ auth.ts                 # slugify / email interne dérivé du pseudo
│  │  └─ supabase/                # Clients Supabase (browser / server / proxy)
│  └─ proxy.ts                   # Protection des routes + rafraîchissement session
├─ supabase/schema.sql           # Schéma + policies RLS + bucket avatars (versionné)
├─ .env.local.example
└─ README.md

Authentification

La connexion se fait par pseudo + mot de passe, sans email visible. En interne, un email technique est dérivé du pseudo (slug@letribunal.test) pour s'appuyer sur Supabase Auth — .test est un TLD réservé (RFC 2606), accepté par le validateur d'email de Supabase (.local est rejeté). Le pseudo affiché est stocké dans la table profiles, et son unicité est vérifiée à l'inscription.

Pas de réinitialisation de mot de passe par email en V1 (cercle d'amis, pas d'email réel collecté). Un administrateur peut réinitialiser un mot de passe depuis la console Supabase si nécessaire.


Sécurité

  • Mots de passe hachés et gérés par Supabase Auth (jamais stockés en clair).
  • Row Level Security activée : chacun ne peut modifier que son propre profil, et les points ne sont pas modifiables depuis l'application (gestion admin prévue plus tard).
  • Lecture des profils réservée aux utilisateurs authentifiés (nécessaire pour le leaderboard).

Ré-thématisation

Les couleurs sont définies comme design tokens (variables CSS), afin de pouvoir changer l'habillage d'une édition à l'autre sans toucher aux composants. Palette par défaut : navy #0F2748, or #C9A227, ivoire #F4ECD8, encre #2A2116.


Roadmap

  • Rôles admin / juges — attribution de points, modération
  • Éditions & thèmes — année, nom du thème, mood board, vocabulaire configurable
  • Le jeu du Tribunal — le Char, batailles de cul sec, ostracisme, roulette, timer du Gardien
  • Temps réel — leaderboard et fil d'événements live, mode « grand écran » pour vidéoprojecteur

Licence

Projet personnel et privé, destiné à un usage entre amis.