Retour aux projets

YAmbassadeurs

React + Vite + TypeScriptTailwind CSSFlutteriOS / AndroidSupabase

Une plateforme web et mobile destinée aux ambassadeurs du campus Ynov Lyon, permettant la gestion des événements, des inscriptions et de la communication interne.

Campus de Ynov Lyon

Projet Web & Mobile – Utilisé par plus de 120 ambassadeurs

Présentation du Projet

YAmbassadeurs est une plateforme web et mobile destinée à centraliser et simplifier la gestion des événements organisés par les ambassadeurs de Ynov Lyon.
Elle a été pensée pour répondre à deux types de besoins : les étudiants et le staff de l’école.


Interface Étudiant (publique)

  • Inscription rapide aux événements
  • Consultation des actualités et des prochains rendez-vous
  • Accès aux informations clés (lieux, participants, horaires)

Interface Staff (administration)

  • Création, modification et suppression d’événements
  • Gestion des participants et suivi de la présence
  • Système de chat communautaire entre :
    • Ambassadeurs
    • Staff
    • Futurs étudiants intéressés par Ynov

Application Mobile (Flutter)

La version mobile offre une expérience dédiée aux ambassadeurs :

  • Gestion complète des événements
  • Suivi des inscriptions et participation
  • Organisation des groupes et channels de discussion
  • Notifications et communication interne

Version publique :
https://yambassadeurs.netlify.app/


Stack Technique

Frontend — React + Vite + TypeScript

Le projet a d’abord été initié sous Angular, puis entièrement migré vers React pour améliorer la flexibilité du code et accélérer le développement.
Tailwind CSS a été intégré afin d’assurer une cohérence visuelle et une grande rapidité d’implémentation.

Backend — Supabase

Supabase a été choisi comme solution complète : base de données, authentification et API.
Ses atouts majeurs :

  • Gestion des rôles et permissions via Row-Level Security
  • Développement accéléré grâce à son écosystème intégré
  • Intégration fluide avec React et Flutter

Mobile — Flutter

Le développement mobile était un objectif clé du projet.
Flutter m’a permis de :

  • Découvrir le langage Dart
  • Créer une application performante cross-platform
  • Mieux structurer mon code grâce à une architecture plus stricte que React Native

Hébergement

  • Netlify pour le déploiement web continu
  • Hébergement final prévu sur VPS Ubuntu (Hostinger)
    • Reverse proxy NGINX
    • Gestion des services via PM2
    • Sécurisation (firewall, fail2ban, SSL)

Problématiques & Solutions

Migration Angular → React

Le passage d’Angular à React a nécessité une réécriture complète de l’interface.
Résultats :

  • Meilleure clarté du code
  • Gestion d’état plus fluide
  • Expérience utilisateur améliorée

Gestion des rôles avec Supabase

La mise en place des RLS Policies a été la partie la plus technique :

  • Protection des données sensibles
  • Accès différencié selon rôle (étudiant / ambassadeur / staff)
  • Mise en place d’un modèle sécurisé et scalable

Apprentissage & montée en compétences

Lancé en première année d’informatique (Décembre 2024), ce projet m’a permis :

  • D’apprendre React et TypeScript en conditions réelles
  • De monter en compétence sur Flutter
  • De comprendre les enjeux d’un projet multi-plateforme
  • De mettre en pratique des méthodes de structuration Fullstack modernes

Hébergement & Sécurité

Avant Supabase + Netlify, l’application était hébergée directement sur mon VPS.
Constats :

  • Risques de sécurité trop élevés
  • Maintenance complexe
  • Peu adapté pour une application destinée à des étudiants

Solution : migration vers une architecture maîtrisée, sécurisée et plus scalable.


Compétences Développées

  • Développement front-end moderne avec React + Tailwind
  • Conception d’une base de données sécurisée avec Supabase
  • Création d’une application fullstack Web + Mobile
  • Déploiement CI/CD, VPS, NGINX et PM2
  • Gestion de rôles, authentification et permissions
  • Expérience utilisateur multi-interface (web + mobile)

Le Projet Aujourd’hui

  • Utilisé par plus de 120 ambassadeurs du campus Ynov Lyon
  • Fonctionnalités co-construites avec le staff lors de réunions mensuelles
  • Plateforme évolutive servant de hub administratif et communautaire

YAmbassadeurs est un projet qui reflète ma capacité à développer une solution complète (web + mobile), à travailler avec des outils modernes et à répondre aux besoins réels d’un établissement scolaire.