StudentBank

Un produit autour de la vie étudiante

StudentBank réunissait plusieurs services destinés aux étudiants : finance, logement et mobilité internationale. Pendant mon stage full-stack JavaScript, j’ai travaillé sur les entretiens utilisateurs, la conception des interfaces et le développement, jusqu’à l’API et l’authentification.

Ce qui m’intéressait, c’était de suivre un même besoin à travers ces différentes étapes : ce que l’étudiant veut faire, ce que l’interface doit afficher et ce que le système doit gérer derrière.

Partir des personnes qui vont l’utiliser

J’ai mené des entretiens utilisateurs, puis traduit les besoins en diagrammes UML. Pour le logement, il ne s’agissait pas seulement de consulter des annonces : les étudiants devaient candidater, transmettre des documents et suivre leurs demandes. Les propriétaires et les administrateurs avaient aussi leurs propres actions et responsabilités.

Les diagrammes de cas d’utilisation conservés montrent cette répartition. Ils décrivent le fonctionnement prévu du produit et permettaient de rendre le périmètre concret avant de le développer.

Donner une structure aux données

Ce travail concernait aussi la mobilité internationale : choisir un pays, explorer les écoles et les formations, déposer une candidature et suivre la réponse. La modélisation servait à relier ces parcours aux informations nécessaires dans l’application.

Le diagramme de classes rassemble utilisateurs, fichiers, établissements, logements, baux et candidatures. Il faisait le lien entre une série d’écrans et un produit avec des données liées, plusieurs acteurs et des actions à prendre en charge.

Passer des maquettes aux interfaces

J’ai travaillé sur les prototypes Figma et développé les interfaces en React avec Chakra UI. Dans le code du site conservé, la navigation et le pied de page sont partagés entre les pages, avec des routes pour l’accueil, l’application, la mission, l’équipe et le contact.

Les versions claire et sombre se retrouvent aussi dans le code : les hooks de couleur de Chakra changent les couleurs, les fonds et certains visuels. Les exports ci-dessous montrent la direction des maquettes ; la branche MobileTest conservée n’en contient qu’une partie de l’implémentation.

• React 18
• Chakra UI 2
• React Router 6
• Figma

Adapter le parcours au téléphone

La version mobile réorganise le contenu dans une page étroite : une navigation compacte, une introduction, puis les différents services. Le code distingue les navigations pour ordinateur et téléphone, avec un menu mobile qui occupe tout l’écran.

J’ai aussi travaillé sur des dispositions distinctes pour la section bancaire. Les archives gardent la trace de cette adaptation en cours, plutôt qu’un état terminé de tous les écrans sur toutes les tailles d’appareil.

Relier les interfaces au backend

Mon travail full-stack comprenait la conception et l’implémentation d’une API REST en Node.js avec MongoDB. J’ai travaillé sur l’organisation du code en modules, les requêtes, les réponses, les erreurs et l’authentification. Le développement allait donc au-delà de ce qui apparaissait à l’écran.

L’authentification mobilisait JSON Web Tokens, bcrypt, crypto-js et des intégrations de connexion OAuth 2.0. Ce volet backend est documenté dans mon CV et mon récit du stage ; le dépôt public du site conserve la partie frontend.

• Node.js
• MongoDB
• API REST
• JWT
• bcrypt
• OAuth 2.0

Ce que j’en ai retiré

C’était une première occasion de parcourir toute la chaîne : discuter d’un besoin, le formaliser, construire son interface et développer le backend associé. J’y ai mieux compris pourquoi ces parties doivent avancer ensemble.

Les documents qui restent montrent les différentes facettes du travail : diagrammes produit, maquettes pour ordinateur et téléphone, et code React. C’est aujourd’hui la trace la plus concrète que j’ai de ces trois mois de stage.