Les Foulées Avrillaises

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 : Docker et VPS

Architecture de l'application web Les Foulées Aperçu de l’architecture.

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.