01 — Étape du projet
De l'intention visuelle à la maquette.
Kiwanis est un site web réalisé pour le Kiwanis Pays de Montbéliard, une association locale engagée en faveur des enfants. Pensé pour moderniser sa présence en ligne et mieux mettre en valeur ses actions, ses projets et ses membres, le site propose une expérience claire, accessible et adaptée à tous les supports. Aujourd'hui en production, il est directement utilisé par l'association.
Kiwanis est un projet universitaire réalisé en équipe de trois étudiants dans le cadre du BUT MMI pour un véritable client. Nous avons travaillé avec le Kiwanis Pays de Montbéliard afin de concevoir un site répondant à ses besoins réels. Le projet s'est déroulé du 10 novembre 2025 au 10 mars 2026 avant sa mise en ligne en mars 2026.
Le Kiwanis Pays de Montbéliard souhaitait moderniser sa présence numérique et disposer d'un véritable site internet pour mieux faire connaître ses actions. L'objectif était de créer une plateforme claire et actuelle permettant de présenter l'association, ses membres, ses actions solidaires, ses projets à venir et ses différentes activités, tout en facilitant la gestion des contenus.
H1
Poppins
H2
Poppins
H3
Poppins
Body
Sora
Nous avons fait le choix d’utiliser une identité typographique simple et lisible afin de conserver un aspect à la fois moderne, humain et professionnel. Les titres permettent de structurer clairement les différentes informations, tandis que le corps de texte reste volontairement sobre pour faciliter la lecture et rendre le site accessible à un public très large.
02 — Étape du projet
Les fonctionnalités, les interfaces de gestion, la structure technique et le développement.
01
Les actions du Kiwanis sont affichées dynamiquement et peuvent être recherchées et filtrées afin de faciliter l'accès aux différents contenus. Chaque action dispose également de sa propre page de détail avec ses informations et ses médias.
02
Une rubrique dédiée permet au club de présenter ses prochains projets et événements. Lorsqu'une date est disponible, l'utilisateur peut également ajouter directement l'événement à son agenda.
03
Les services externes ne sont pas chargés automatiquement. Le site demande explicitement l'accord de l'utilisateur avant d'activer certains contenus comme OpenStreetMap ou les suggestions de recherche liées à Nominatim.
01
Le back-office permet d'ajouter et de modifier les actions du Kiwanis sans intervenir directement dans le code du site. Les informations renseignées sont enregistrées dans PocketBase puis utilisées pour alimenter automatiquement la liste des actions et leurs pages de détail.
02
Les futurs projets et événements peuvent également être administrés depuis le back-office. Les informations enregistrées sont ensuite utilisées sur le site public pour présenter les projets à venir, leurs dates et les fonctionnalités associées.
Le site repose sur Astro pour structurer les interfaces et PocketBase pour centraliser les données dynamiques. Les contenus administrables sont gérés depuis un back-office personnalisé puis récupérés par le site public. Cette architecture permet au Kiwanis de mettre à jour ses contenus sans intervenir directement dans le code.
Technologies utilisées
Le projet devait répondre aux besoins d'un véritable client tout en restant simple à administrer après sa livraison. Les contenus devaient pouvoir évoluer sans intervention directe dans le code, le site devait rester responsive et plusieurs services externes devaient être intégrés en respectant le choix de l'utilisateur concernant leur chargement.
Nous avons structuré le site autour de contenus dynamiques centralisés dans PocketBase et développé les différentes interfaces avec Astro. Un back-office personnalisé permet au Kiwanis d'administrer les contenus qui sont ensuite réutilisés automatiquement sur le site public. Le développement a été organisé autour des usages réels de l'association plutôt que d'un simple site vitrine statique.
Ce projet m'a permis de travailler sur un site destiné à un véritable client et réellement utilisé après sa mise en ligne. J'ai appris à transformer des besoins concrets en fonctionnalités, à gérer des contenus dynamiques avec PocketBase et à concevoir une interface d'administration adaptée au projet. J'ai également mieux compris les enjeux liés à la mise en production, au travail en équipe et aux ajustements nécessaires lorsqu'un site doit continuer à vivre après sa livraison.
03 — Étape du projet
Mon intervention, les défis rencontrés et le résultat final.
Au sein de l'équipe, je me suis principalement concentré sur le développement du site et sur sa partie dynamique. J'ai notamment participé à la mise en place des différentes fonctionnalités, à l'intégration des données avec PocketBase et au développement d'un back-office personnalisé permettant au Kiwanis de gérer plus simplement ses contenus. Le projet m'a également amené à travailler sur la responsivité, l'accessibilité et la mise en production d'un site destiné à être réellement utilisé après sa livraison.
Développement web — développement des fonctionnalités, intégration des contenus dynamiques et création du back-office personnalisé.
Design & communication — conception visuelle, création des supports de communication et réalisation du guide d'utilisation remis à l'équipe du Kiwanis.
Design & développement web — participation à la conception visuelle du projet et au développement du site.
01
Problème
Contrainte
Le Kiwanis devait pouvoir faire évoluer régulièrement les contenus du site sans modifier directement le code.
Solution
Nous avons relié les contenus à PocketBase et mis en place un back-office personnalisé afin de permettre leur administration depuis une interface dédiée.
02
Problème
Contrainte
Certaines fonctionnalités utilisent des services tiers comme OpenStreetMap et Nominatim, qui ne doivent pas être activés avant le choix de l'utilisateur.
Solution
Le chargement de ces services est conditionné au consentement. Sans autorisation, la carte et les fonctionnalités associées restent désactivées jusqu'au choix explicite de l'utilisateur.
03
Problème
Contrainte
Le site devait regrouper plusieurs types de contenus : actions passées, projets à venir, membres, partenaires et produits, tout en conservant une navigation simple pour l'association comme pour les visiteurs.
Solution
Les données ont été organisées en contenus distincts puis intégrées dans des pages adaptées à leurs usages. Cette organisation permet de faire évoluer chaque partie du site indépendamment tout en conservant une interface cohérente.
Réalisé pour un véritable client, le site est en ligne depuis mars 2026 et continue d'être utilisé pour présenter les actions, les projets et les activités du Kiwanis Pays de Montbéliard. Sa mise en production a transformé un projet universitaire en un outil réellement utilisé par l'association.
Voir le site (ouvre dans un nouvel onglet)© 2026 Bryan Menoux. Tous droits réservés.
