Les Foulées Avrillaises

Updated July 30, 2026

Les Foulées Avrillaises represents my first full-stack challenge. It is a complete redesign of the website for a running association.

The problem

The old site needed a renewal: its interface was aging and access to the secure area was only done with a single, shared password. I therefore discussed with one of the members and offered my services on a volunteer basis, with the aim of providing everyone with a refreshed image as well as a secure and useful tool.

The solution

To answer this problem, I developed a secure, accessible web application with an attractive interface. In order to tailor the experience to each user, the architecture is based on a role management system:

  1. Public Showcase: To present the project to the general public.
  2. Member Area: A dashboard dedicated to registered users.
  3. Administrator Area: For the overall management of users, memberships, and events.

This project was an opportunity to adopt a Feature-First design. This modular architecture allows me today to ensure simplified maintenance and to integrate new features with great flexibility.

The stack

  • Full-stack framework: Next.js
  • Database and ORM: PostgreSQL and Prisma
  • Style and UI components: Tailwind CSS and shadcn/ui
  • Architecture and deployment: Vercel and Neon
  • Storage: Vercel Blob

Architecture of the Les Foulées web application Architecture overview. (Obsolete - Hosting has been moved to Vercel)

Features

User Area

  • Profile & Privacy Management: Update personal information (contact details, emergency contacts) and control visibility in the club directory.
  • Simplified Online Registration: Registration form per season with formula choices (Individual, Couple, Youth, FFA License), secure upload of the PPS, and automatic generation of the membership card in PDF.
  • Payment Tracking: Centralization and monitoring of membership fee status according to several payment methods (cash, check, bank transfer).
  • Event Registration: Consultation and registration for club activities (trainings, outings, competitions) with options choices (distance, meals, accommodation) and carpooling management.
  • Directory & Documents: Secure access to the member directory and to administrative or internal documents provided by the club.

Administrator Area

  • Monitoring Dashboard: Centralized dashboard displaying key member statistics and global registration status by season.
  • File & Payment Management: Moderation and validation of registration files (verification of PPS certificates, manual validation of payments).
  • Season Configuration: Opening/closing of registration periods and dynamic setup of rates associated with different options.
  • Event Planning: Creation and management of club events with visibility settings (public/private) and customization of registration options.
  • Access Control: Secure invitation system through the generation of unique tokens by email and role management.
  • Content Management (CMS): Dynamic customization of the home page and update of the terms and conditions pages.

Challenges encountered and conclusion

The project is currently in its final development phase, pending review by the association’s administration.

  • The framework trap: I faced the main problem of beginners, namely wanting to use frameworks to handle everything. By choosing “trendy stacks” to be operational, I added unnecessary layers of abstraction when a Vanilla approach would have been simpler and would have avoided this complexity.

Obsolete subject

  • Learning TypeScript and Docker: While discovering TypeScript alongside the project, I realized when using the npx prisma db seed command that TypeScript does not exist at runtime. Because my application and database were containerized with Docker, I did not have access to devDependencies in my production image. To remedy this, I decided to keep the build with the development files and use a PM2 instance for deployment.

  • Abandoning Docker and migrating to Vercel: After encountering numerous issues with Docker deployment on a VPS, I studied ways to simplify and lower the cost of hosting. An average usage of 70 users allowed me to host the site on Vercel and use Neon as a serverless Postgres database at zero cost. Given the serverless nature of Vercel, files and images are stored with Vercel Blob.