Développement full-stack · Application web
Application de gestion des stages
Une application web de gestion de stages à plusieurs rôles, qui permet aux étudiants, superviseurs et employeurs de se connecter, soumettre et suivre des rapports de progression.
2026
Développement full-stack
3 semaines

Aperçu
Client
Secteur
Services
Platform
Projet scolaire
Éducation · Stages
Développement full-stack
PHP · MySQL · JavaScript · HTML/CSS
Résumé
Les étudiants du programme avaient besoin d’un lieu unique pour consigner leurs rapports de progression, que les superviseurs et les employeurs pouvaient ensuite consulter, en remplacement d’un processus papier informel.
Le défi
L’application devait gérer trois rôles distincts — étudiants, superviseurs et employeurs — avec des données et des permissions différentes, le tout derrière un même système d’authentification. Le véritable défi consistait à combiner HTML, CSS, JavaScript et PHP dans une application cohérente à plusieurs pages : faire fonctionner ensemble la gestion des sessions, la validation côté serveur et la validation côté client, sans conflit, tout en gardant une base de code organisée à mesure qu’elle grandissait.
Objectifs du projet
Centraliser le suivi de progression des stages · Donner aux superviseurs une visibilité sur les rapports · Remplacer le processus papier
Objectifs utilisateurs
Se connecter rapidement selon son rôle · Soumettre un rapport dans un formulaire clair · Consulter les soumissions passées en un coup d’œil

Découverte et recherche
Constat 01
Analyse de la manière dont les tableaux de bord à rôles distincts séparent les accès sans dupliquer les pages.
Constat 02
Les étudiants veulent le chemin le plus court possible entre la connexion et l’envoi d’un rapport.
Constat 03
Les rapports papier se perdaient entre étudiants et superviseurs, sans registre partagé.
Orientation du système de design
L’interface demeure volontairement administrative : un en-tête bleu marine, un seul accent bleu et des champs clairement étiquetés plutôt que des éléments décoratifs. Chaque écran a été pensé pour être compris en quelques secondes par des utilisateurs qui veulent simplement se connecter, soumettre ou consulter — pas naviguer.
Système de conception
Conçue directement dans le code, écran par écran, et maquettée avec Figma et Claude Design. Sans outil de design au cœur du flux, les composants de carte de connexion, de tableau et de formulaire ont été créés une seule fois en CSS puis réutilisés dans le tableau de bord de chaque rôle pour assurer la cohérence.


Écrans haute fidélité
Formulaire de connexion, tableau de bord et rapport de stage



Un écran de connexion unique dirige l’utilisateur selon son type de compte; un tableau de bord liste les rapports antérieurs avec des liens directs vers les détails, et le formulaire de rapport sépare les données d’identité des champs de réflexion ouverts.

Développement
Authentification PHP par session pour trois rôles · Requêtes MySQL pour les étudiants, superviseurs et employeurs · Validation JavaScript avant l’envoi · Routage structuré à plusieurs pages par rôle · Déploiement sur un hébergement public
Réflexion
Ce projet portait moins sur le design visuel que sur l’architecture : éviter que trois rôles, un flux d’authentification et deux niveaux de validation s’emmêlent. Le plus difficile était de structurer le PHP pour que les requêtes de chaque rôle restent isolées et sécurisées. Il m’a aussi poussé à penser l’expérience utilisateur même sans outil de design, en étiquetant clairement les champs et en séparant les données d’identité des réponses ouvertes. La prochaine fois, j’ajouterais une sanitation des entrées plus robuste dès le départ plutôt que de l’intégrer après coup, une fois le flux principal fonctionnel.