Les Foulées Avrillaises

Mise à jour : 30 juillet 2026

Les Foulées Avrillaises représentent mon premier challenge full-stack. Il s’agit de la refonte totale du site web d’une association de course à pied.

La problématique

L’ancien site avait besoin d’un renouvellement : son interface était vieillissante et l’accès à la partie sécurisée ne se faisait qu’avec un mot de passe unique. J’ai donc échangé avec l’un des membres et proposé mes services de façon bénévole, dans le but d’offrir à tous une image rafraîchie ainsi qu’un outil sécurisé et utile.

La solution

Pour répondre à cette problématique, j’ai développé une application web sécurisée, accessible et dotée d’une interface attrayante. Afin d’adapter l’expérience à chaque utilisateur, l’architecture repose sur un système de gestion des rôles :

  1. Partie vitrine : Pour présenter le projet au grand public.
  2. Espace membre : Un tableau de bord dédié aux utilisateurs inscrits.
  3. Espace administrateur : Pour la gestion globale des utilisateurs, des adhésions et des événements.

Ce projet a été l’occasion d’adopter une conception Feature-First. Cette architecture modulaire me permet aujourd’hui d’assurer une maintenance simplifiée et d’intégrer de nouvelles fonctionnalités avec une grande flexibilité.

La stack

  • Framework full-stack : Next.js
  • Base de données et ORM : PostgreSQL et Prisma
  • Style et composants UI : Tailwind CSS et shadcn/ui
  • Architecture et déploiement : Vercel et Neon
  • Stockage : Vercel Blob

Architecture de l'application web Les Foulées Aperçu de l’architecture. (Obsolète - L’hébergement est passé sur Vercel)

Fonctionnalités

Espace Utilisateur

  • Gestion du profil & Confidentialité : Mise à jour des informations personnelles (coordonnées, contacts d’urgence) et contrôle de la visibilité dans l’annuaire du club.
  • Adhésion en ligne simplifiée : Formulaire d’inscription par saison avec choix de formule (Individuel, Couple, Jeune, Licence FFA), téléversement sécurisé du PPS et génération automatique de la carte d’adhésion en PDF.
  • Suivi des paiements : Centralisation et suivi de l’état des cotisations selon plusieurs modes de règlement (espèces, chèque, virement).
  • Inscription aux événements : Consultation et inscription aux activités du club (entraînements, sorties, compétitions) avec choix des options (distance, repas, hébergement) et gestion du covoiturage.
  • Annuaire & Documents : Accès sécurisé à l’annuaire des membres et aux documents administratifs ou internes mis à disposition par le club.

Espace Administrateur

  • Tableau de bord de suivi : Dashboard centralisé affichant les statistiques clés des adhérents et l’état global des inscriptions par saison.
  • Gestion des dossiers & Paiements : Modération et validation des dossiers d’adhésion (vérification des certificats PPS, validation manuelle des paiements).
  • Configuration des saisons : Ouverture/fermeture des périodes d’inscription et paramétrage dynamique des tarifs associés aux différentes formules.
  • Planification d’événements : Création et gestion des événements du club avec définition de la visibilité (publique/privée) et personnalisation des options d’inscription.
  • Contrôle des accès : Système d’invitation sécurisé par génération de jetons (tokens) uniques par e-mail et gestion des rôles.
  • Gestion du contenu (CMS) : Personnalisation dynamique de la page d’accueil et mise à jour des pages de mentions légales.

Problèmes rencontrés et conclusion.

Le projet se trouve aujourd’hui en phase finale de développement, dans l’attente d’une revue par l’administration de l’association.

  • Le piège des frameworks : J’ai été confronté au principal problème des débutants, à savoir vouloir utiliser des frameworks pour tout gérer. En choisissant des “stacks à la mode” pour être opérationnel, j’ai ajouté des couches d’abstraction inutiles alors qu’une approche Vanilla aurait été plus simple et aurait évité cette complexité.

  • Apprentissage de TypeScript et Docker : En découvrant TypeScript parallèlement au projet, j’ai réalisé lors de l’utilisation de la commande npx prisma db seed que TypeScript n’existe pas au runtime. Mon application et ma base de données étant conteneurisées avec Docker, je n’avais pas accès aux devDependencies dans mon image de production. Pour pallier cela, j’ai décidé de conserver le build avec les fichiers de développement et d’utiliser une instance PM2 pour le déploiement. -Sujet obsolète

  • Abandon de Docker et passage sur Vercel : Après de nombreux problèmes rencontrés avec le déploiement sous Docker sur un VPS, j’ai étudié la simplification et le coût de l’hébergement. Une utilisation moyenne de 70 utilisateurs m’a permis d’héberger le site sur Vercel et d’utiliser Neon en tant que base de données Postgres serverless à coût zéro. Vu la nature serverless de Vercel, les fichiers et images sont stockés avec Vercel Blob.