# StudentBank > Des besoins étudiants aux diagrammes produit, aux interfaces React et au backend Node.js/MongoDB. Stage full-stack JavaScript · juillet–septembre 2022 Rubrique: Parcours [Ouvrir dans le portfolio interactif]() [English]() ## En bref | Indicateur | Valeur | | --- | --- | | Mon rôle | Stagiaire full-stack JavaScript | | Période | Juillet–septembre 2022 | | Frontend | React · Chakra UI · Figma | | Backend | Node.js · MongoDB | ## 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. ### Images et médias [Trois volets du produit réunis sur la page d’accueil. Extrait ; ouvrir pour voir la maquette complète.]() Accueil sur ordinateur présentant la banque, le logement et la mobilité en trois panneaux illustrés. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. ## 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. Du besoin au fonctionnement du produit 1. **Écouter** — Recueillir les besoins lors des entretiens utilisateurs. 2. **Décrire** — Identifier les acteurs, leurs actions et leurs interactions. 3. **Préciser** — Formaliser le comportement des fonctionnalités avec des diagrammes. Synthèse de ma démarche à partir du récit du stage et des documents UML originaux. ### Images et médias [Le logement côté étudiant : trouver une offre, candidater, échanger des documents et gérer sa location.]() Diagramme de cas d’utilisation reliant étudiant et administrateur à la recherche, aux candidatures, aux documents et à la gestion du logement. Crédit: Archives du projet StudentBank · export UML original, 2022. [L’autre côté du service : ce qu’un propriétaire peut publier, modifier et suivre.]() Cas d’utilisation du propriétaire et de l’administrateur pour créer, modifier, retirer et suivre une annonce. Crédit: Archives du projet StudentBank · export UML original, 2022. ## 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. ### Images et médias [La mobilité internationale prolonge le parcours vers les écoles, les formations et le suivi des candidatures.]() Diagramme de mobilité internationale avec pays, écoles, formations, candidatures, documents et actions administrateur. Crédit: Archives du projet StudentBank · export UML original, 2022. [Un modèle reliant personnes, documents, lieux et demandes. C’est un document de conception, pas un export du schéma de base de données.]() Diagramme de classes reliant utilisateurs, étudiants, administrateurs, fichiers, établissements, écoles, logements, candidatures et baux. Crédit: Archives du projet StudentBank · export UML original, 2022. ## 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 ### Images et médias [Version claire : présentation du compte et des cartes. Ouvrir pour voir la page entière.]() Extrait de la maquette claire sur ordinateur avec écran de compte sur téléphone et présentation des cartes. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. [Version sombre : le même contenu, avec d’autres fonds et visuels.]() Extrait de la maquette sombre sur ordinateur avec écran de compte et cartes bancaires. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. ## 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. ### Images et médias [Mobile, partie 1 : navigation, introduction et cartes.]() Haut de la maquette mobile : navigation compacte, aperçu du compte, introduction et cartes. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. [Mobile, partie 2 : logement et avantages étudiants.]() Milieu de la maquette mobile : logement et avantages étudiants. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. [Mobile, partie 3 : mobilité internationale et pied de page. Chaque extrait ouvre la maquette entière.]() Bas de la maquette mobile : mobilité internationale et pied de page légal. [SVG]() Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. ## 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 Les différentes couches de mon travail full-stack 1. **Interface** — Composants React et interactions côté utilisateur. 2. **API** — Routes Node.js, requêtes, réponses et gestion des erreurs. 3. **Données et identité** — Données MongoDB et parcours d’authentification. Vue d’ensemble de mes responsabilités pendant le stage, pas un schéma de déploiement retrouvé. ## 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. > Ces visuels sont des exports historiques du projet et contiennent du texte provisoire. Ils montrent les interfaces prévues, sans établir que tous les services financiers présentés ou toutes les fonctionnalités ont été lancés. ### Images et médias [Maquette de prise de rendez-vous. La branche archivée contient l’interface du formulaire ; elle ne permet pas d’établir qu’un service de réservation fonctionnait.]() Maquette sombre de prise de rendez-vous avec date, motif, coordonnées et bouton de validation. Crédit: Archives du projet StudentBank · export d’interface fourni, 2022. ## Liens - [Source · MobileTest]()