Retour aux projets
Application WebNext.jsSupabase

Le Grand Croise Mulet : Ingénierie web pour un événement exclusif.

Conception et développement complet d'une plateforme événementielle combinant une vitrine immersive et un système complexe d'inscriptions sous conditions (clients, parrainages et contrôle d'âge légal).

Visiter le site en ligne

Le Contexte

Le "Grand Croise Mulet" est un défi sportif de trail atypique : 11 km et 1 600m de dénivelé positif, organisé en totale autonomie sur une période d'un mois.

La particularité du projet résidait dans son caractère exclusif. L'événement n'est pas ouvert au grand public : il est strictement réservé à la clientèle d'un commerce local (un salon), ou accessible uniquement sur invitation (système de parrainage). Il fallait donc concevoir un site capable non seulement de présenter la course de manière attractive, mais surtout de filtrer et sécuriser les inscriptions en temps réel.

Les Défis Techniques & Solutions

Logique d'inscription conditionnelle

Développement d'un formulaire à étapes interactif. Le système interroge la base de données en direct pour vérifier si l'utilisateur est bien enregistré comme client, ou si le code parrain saisi est valide et n'a pas déjà été utilisé.

  • Validation stricte avec Zod
  • Verrouillage instantané du droit de parrainage

Protection des mineurs & Légal

Le trail étant un sport à risque, une vérification d'âge est effectuée à la volée lors de la saisie de la date de naissance. Si le participant est mineur, un champ exigeant l'accord formel d'un représentant légal est dynamiquement généré et rendu obligatoire.

  • Horodatage & traçage IP légal

Back-Office Sécurisé

Mise en place d'un tableau de bord administrateur (Dashboard) protégé par un système d'authentification par cookies. Il permet à l'organisateur de visualiser les inscrits, leur statut (client/filleul) et de modérer la base de données.

  • Middleware & Next.js Server Actions
  • Badges conditionnels (ex: Accord parental)

Base de données & API Tierces

Architecture robuste via Supabase avec mise en place de politiques de sécurité (RLS) pour protéger les données utilisateurs. Intégration de l'API Resend pour l'envoi automatique d'emails de confirmation transactionnels stylisés en HTML.

  • Supabase Service Role Key
  • Templates d'emails responsives

Stack Technique

Next.jsFramework React
Tailwind CSSStyling & UI
SupabasePostgreSQL & Auth
ResendMailing API
ZodValidation de données