OpenClassrooms – Projets issus de la formation
Contexte
Dans le cadre de ma reconversion professionnelle vers le développement web, j’ai suivi la formation Concepteur développeur d’application JavaScript/React chez OpenClassrooms. Cette formation m’a permis d’acquérir des compétences solides en front-end moderne (React, TypeScript, tests, accessibilité), tout en ouvrant la voie vers le back-end (bases de données, API REST, et l’exploration de technologies comme PHP/Symfony).
L’objectif était de concrétiser ces apprentissages à travers des projets variés, allant du site statique à l’application fullstack, en passant par des outils interactifs et des dashboards analytiques. Ces projets reflètent ma capacité à :
- Concevoir des interfaces responsive et accessibles (HTML/CSS, Sass, React).
- Structurer des applications modulaires et maintenables (MVC, patterns de conception, gestion d’état avec Redux).
- Développer des fonctionnalités dynamiques (API REST, formulaires, animations, visualisations de données).
- Garantir la qualité du code (tests unitaires/end-to-end avec Jest/Vitest, CI/CD via GitHub Actions).
- Optimiser les performances et l’accessibilité (Green Code, WCAG).
Projets réalisés
Le parcours complet donne accès à la certification dès lors que les 14 projets sont validés.
1. Démarrage de la formation
Description :
Projet d’intégration et de cadrage visant à poser les fondations de la formation et de la future posture professionnelle. Ce projet a permis de définir les objectifs de carrière, de planifier le calendrier des livrables et des soutenances en autonomie, et de s’approprier les outils de collaboration avec le mentorat. Il a également intégré une initiation aux enjeux de l’Intelligence Artificielle (IA), une introduction aux mécanismes d’apprentissage du cerveau, ainsi que la mise en place d’une routine de veille informationnelle.
Compétences clefs :
- Cadrage et autonomie : Définition d’objectifs professionnels clairs et planification stratégique d’un calendrier de projet.
- Veille technologique : Conception et mise en place d’un tableau de bord de veille technique pour suivre les évolutions de l’écosystème JavaScript / React.
- Collaboration professionnelle : Prise en main d’outils collaboratifs et structuration des sessions de bilan avec un mentor.
2. Booki
Description :
Développement de l’interface responsive et pixel-perfect de la page d’accueil de la start-up Booki, permettant aux usagers de trouver des hébergements et des activités dans la ville de leur choix. À partir de maquettes Figma (Desktop, Tablette et Mobile) et d’une note de spécifications techniques, l’intégration a été entièrement codée de zéro sans s’appuyer sur les générateurs de code automatique de Figma, afin de garantir un code propre, léger et respectueux des principes du Green Code. Le positionnement et la flexibilité de l’interface reposent intégralement sur l’usage de Flexbox.
Compétences clefs :
- Intégration sémantique et conformité : Analyse, découpe de maquettes complexes et traduction en HTML5 sémantique, entièrement validé et conforme aux standards du W3C.
- Mise en page responsive et fluide : Conception d’une interface s’adaptant parfaitement aux différentes tailles d’écrans en utilisant Flexbox et des unités de mesure relatives.
- Qualité du code et Green Code : Écriture d’un code CSS3 structuré, optimisé et exempt de propriétés superflues afin de limiter le poids de la page et d’optimiser les performances.
- Soutenance technique : Présentation et argumentation des choix d’architecture CSS devant un évaluateur simulant une situation professionnelle (direction technique).
Liens :
3. Ohmyfood
Description :
Développement en “mobile-first” du site d’une start-up parisienne répertoriant les menus de restaurants gastronomiques. L’objectif principal était de fidéliser une clientèle exigeante en fluidifiant l’expérience utilisateur grâce à des animations CSS soignées. L’intégration s’est appuyée sur des maquettes et un prototype Figma pour mobile et desktop. Le projet a été réalisé en utilisant le préprocesseur SASS pour structurer et optimiser le code CSS, et versionné avec Git/GitHub.
Compétences clefs :
- Animations CSS avancées : Conception et mise en œuvre d’effets graphiques fluides pour enrichir l’interactivité, incluant un loader de page au démarrage, des effets de survol sur les boutons et les sélecteurs de plats, et l’animation de favoris (cœurs).
- Intégration Mobile-First et Sémantique : Développement de l’interface en priorité pour les terminaux mobiles avant adaptation aux écrans plus larges, en assurant la cohérence graphique et la sémantique HTML.
- Architecture CSS avec SASS : Organisation du code en modules maintenables et réutilisables (variables, mixins, nesting) pour un projet structuré.
- Gestion de versions : Utilisation rigoureuse de Git pour le suivi des modifications et hébergement du dépôt sur GitHub.
- Soutenance technique : Présentation et justification détaillée du fonctionnement des animations et des choix d’organisation du code devant un évaluateur technique.
Liens :
4. GameOn
Description :
Première immersion dans le développement logique avec JavaScript Vanilla (pur). Reprise et finalisation du code Front-End d’une landing page promotionnelle pour l’entreprise GameOn, organisatrice de concours de jeux vidéo. L’objectif était de rendre le formulaire d’inscription dynamique et pleinement fonctionnel en s’appuyant sur un système d’issues GitHub laissées par l’équipe, tout en validant les spécifications ergonomiques imposées par l’équipe d’assurance qualité (QA).
Compétences clefs :
- Programmation JavaScript Vanilla : Prise en main des fondamentaux du langage (variables, conditions, boucles, fonctions) sans dépendance ni framework tiers.
- Manipulation du DOM & Événements : Implémentation des fonctionnalités d’ouverture, de fermeture et d’interaction de la modale d’inscription en interceptant les événements utilisateur (clics, saisies).
- Validation dynamique de formulaire : Collecte et vérification rigoureuse des données saisies (champs requis, formats e-mail, cohérence des nombres, cases à cocher) avec affichage de messages d’erreur ciblés et pertinents en cas d’invalidité.
- Workflow collaboratif (Git/GitHub) : Travail en autonomie à partir d’un fork de dépôt, traitement d’issues techniques et livraison d’un code documenté.
- Soutenance technique & Revue de code : Présentation de la logique de validation, justification des choix algorithmiques et démonstration des tests manuels lors d’une session de revue de code avec la direction technique.
Liens :
5. Test – Langages du Web
Description :
Projet pratique de validation des acquis techniques sous forme de mini-défi, visant à consolider la maîtrise de la syntaxe fondamentale du développement web (HTML5, CSS3, JavaScript). À travers une série de 10 exercices interactifs hébergés sur GitHub, ce projet a permis d’évaluer et de valider les compétences techniques fondamentales (manipulation du DOM, algorithmie de base, Flexbox, SASS et Responsive Design) nécessaires pour aborder les projets d’ingénierie et d’architecture logicielle plus complexes du parcours.
Compétences clefs :
- Maîtrise de la syntaxe Web (HTML/CSS/JS) : Écriture et résolution de problématiques concrètes d’intégration et de logique algorithmique en JavaScript pur.
- Auto-évaluation et Qualité : Identification autonome des forces techniques et des axes d’amélioration sur les technologies fondamentales du Front-End.
- Utilisation avancée de GitHub : Résolution d’exercices et documentation du travail validé par le biais de captures de tests directement sur la plateforme de versionnage.
- Bilan technique et mentorat : Débriefing orienté amélioration continue avec un mentor accompagnateur pour valider la conformité des réponses et des bonnes pratiques de développement.
Liens :
6. FishEye
Description :
Développement du prototype fonctionnel et dynamique de la plateforme FishEye, un site web permettant aux photographes indépendants de présenter leurs travaux. À partir d’un échantillon de données au format JSON, l’application génère dynamiquement la page d’accueil ainsi que les galeries personnalisées de chaque artiste (incluant une modale de contact, un système de gestion des likes et une Lightbox interactive prenant en charge photos et vidéos). Ce projet plaçait l’accessibilité numérique (normes WCAG / RGAA) et la robustesse architecturale au centre des exigences techniques.
Compétences clefs :
- Accessibilité web rigoureuse (WCAG/RGAA) : Structuration en HTML5 sémantique, intégration d’attributs ARIA, gestion stricte du focus pour garantir une navigation intégrale au clavier et une compatibilité optimale avec les lecteurs d’écran. Conformité validée via l’outil AChecker.
- Architecture logicielle & Design Patterns : Mise en œuvre du patron de conception Factory Method (Design Pattern Usine) en JavaScript pour instancier de manière modulaire les différents types de médias (Photos vs Vidéos).
- Ingénierie JavaScript & Qualité de code : Écriture d’un code découplé, maintenable et documenté, validé par l’analyseur statique ESLint. Récupération asynchrone et manipulation dynamique des données JSON pour l’affichage du DOM.
- Automatisation & CI/CD : Configuration d’un workflow automatisé avec GitHub Actions pour assurer le déploiement continu (CD) de la branche principale sur GitHub Pages.
- Soutenance & Démonstration professionnelle : Présentation sur diapositives et démonstration technique en direct (navigation exclusive au clavier) simulant une validation de livrable devant une direction de projet.
Liens :
7. Les petits plats
Description :
Mission en freelance de 3 mois pour l’entreprise « Les petits plats » visant à concevoir un moteur de recherche de recettes de cuisine ultra-performant, fluide et quasi-instantané. À partir d’un échantillon JSON de 50 recettes et de maquettes Figma, l’objectif consistait à implémenter l’interface utilisateur (via un framework CSS) et à développer deux architectures logiques distinctes pour la recherche principale. Ces deux versions ont été soumises à des tests de charge et de performance (benchmarking) afin de retenir l’option la plus rapide et la plus éco-responsable (Green Code).
Compétences clefs :
- Analyse algorithmique & Modélisation : Conception d’un algorigramme logique formalisant le système de recherche et de filtrage (par mots-clés et par tags), documenté au sein d’une fiche d’investigation de fonctionnalité au format PDF.
- Développement algorithmique comparatif (Git Branching) : Implémentation complète de deux solutions distinctes sur deux branches Git séparées (utilisation des boucles natives du langage vs. Approche en programmation fonctionnelle).
- Analyse de performance & Benchmarking : Évaluation quantitative des scripts à l’aide de l’outil Jsben.ch pour mesurer et comparer le nombre d’opérations par seconde afin de justifier scientifiquement l’algorithme retenu.
- Sécurisation des données & Éco-conception : Neutralisation des risques d’injections de balises HTML (failles XSS) dans les champs de saisie et découpage modulaire du code JavaScript en fonctions réutilisables pour limiter l’empreinte carbone de l’application (Green Code).
- Soutenance & Argumentation technique : Présentation et défense des choix d’implémentation et de la recommandation finale face au Lead Developer.
Liens :
8. Test – Algorithmes en JavaScript
Description :
Deuxième projet d’évaluation et de consolidation des acquis sous forme d’atelier pratique, axé spécifiquement sur la logique algorithmique et les paradigmes de programmation en JavaScript. À travers une série de 10 exercices interactifs hébergés et versionnés sur GitHub, ce projet a permis de valider la maîtrise des concepts clés du langage (programmation événementielle, manipulation avancée des tableaux, structures de contrôle complexes) ainsi que l’application des bonnes pratiques d’accessibilité et de sémantique HTML appliquées à la logique métier.
Compétences clefs :
- Paradigmes de programmation JavaScript : Écriture de scripts logiques et algorithmiques structurés en exploitant les paradigmes de programmation adaptés (impératif, fonctionnel).
- Résolution de problèmes complexes : Conceptualisation et implémentation de solutions algorithmiques pour répondre à des contraintes de logique métier interactives.
- Validation technique sur GitHub : Exécution de tests, résolution des anomalies de logique et documentation de la réussite des exercices par des comptes-rendus visuels.
- Amélioration continue & Mentorat : Analyse des axes d’optimisation du code et revue des patterns algorithmiques lors d’une session de débriefing de compétences avec le mentor accompagnateur.
Liens :
9. Billed
Description :
Intervention technique en renfort au sein de la feature team « note de frais » pour l’application SaaS Billed, destinée aux équipes RH. La mission consistait à reprendre une base de code interrompue afin de traquer et corriger des bugs fonctionnels bloquants à l’aide des outils de débogage avancés. L’objectif principal était de fiabiliser intégralement l’application avant sa mise en production en implémentant une suite complète de tests automatisés (unitaires et d’intégration) et en formalisant une stratégie de tests fonctionnels globaux.
Compétences clefs :
- Débogage technique avancé : Utilisation intensive du Chrome Debugger pour analyser la pile d’exécution, isoler l’origine des dysfonctionnements recensés sur le tableau Kanban et appliquer les correctifs nécessaires.
- Tests unitaires et d’intégration automatisés : Écriture de scripts de tests robustes en JavaScript avec le framework Jest pour valider de manière isolée et combinée les couches d’interface utilisateur (UI) et de logique métier (Containers).
- Analyse de couverture de code (Code Coverage) : Optimisation qualitative de la suite de tests afin d’atteindre et de dépasser les taux d’exigence de couverture globale requis par la direction technique.
- Ingénierie qualité & Tests E2E manuels : Rédaction d’un plan de test complet End-to-End (E2E) formalisant l’intégralité des scénarios et des parcours utilisateur de la plateforme (profil employé).
- Intégration continue (CI) : Automatisation de l’exécution de la suite de tests Jest à chaque modification du code via la mise en place d’un workflow d’intégration continue avec GitHub Actions.
Liens :
10. Learn@Home
Description :
Cadrage de projet et modélisation technique pour l’association Learn@Home, une structure de soutien scolaire mettant en relation des élèves en difficulté et des tuteurs bénévoles. L’objectif était de formaliser l’expression des besoins et de concevoir la structure fonctionnelle de leur future plateforme web en adoptant une méthodologie agile (Scrum). Le périmètre englobait la conception complète du parcours utilisateur, incluant un tableau de bord, un chat, un calendrier partagé et un gestionnaire de tâches.
Compétences clefs :
- Ingénierie des besoins & Spécifications fonctionnelles : Analyse approfondie des notes clients pour rédiger des User Stories (US) claires et standardisées, complétées par des critères d’acceptation rigoureux et un découpage précis des tâches sous-jacentes.
- Modélisation fonctionnelle : Création de diagrammes de cas d’usage via l’outil Draw.io pour cartographier et structurer logiquement les interactions des deux acteurs clés de la plateforme (Élèves et Bénévoles).
- Prototypage UI/UX (Desktop & Mobile) : Conception des maquettes fonctionnelles et graphiques adaptatives (Responsive Design) pour l’intégralité des écrans, réalisées avec la solution open-source Penpot.
- Gestion de projet Agile & Planification : Structuration de la feuille de route du projet au travers d’un tableau Kanban GitHub, catégorisant les fonctionnalités par blocs logiques et sous-fonctionnalités (colonne “ANALYZE”).
- Posture de Business Analyst & Soutenance : Présentation des arbitrages fonctionnels et démonstration du flux de navigation (user flow) lors d’une simulation de comité de projet devant le client final.
Liens :
11. Kasa
Description :
Développement de la nouvelle plateforme web de Kasa, l’un des leaders de la location d’appartements entre particuliers en France, dans le cadre d’une refonte complète de leur infrastructure technique (legacy ASP.NET vers une stack moderne JavaScript/React). À partir de maquettes Figma responsives et d’un jeu de données extrait au format JSON, le projet consistait à concevoir une application monopage (SPA) fluide, modulaire et hautement interactive, intégrant une logique d’affichage dynamique pour les fiches de logements.
Compétences clefs :
- Architecture de composants réutilisables (React) : Initialisation du projet (via Vite) et structuration d’une interface logicielle découpée en composants atomiques et modulaires. Gestion rigoureuse du flux des données via les props et de l’état local (hooks comme
useState). - Routage dynamique (React Router) : Implémentation du système de navigation de l’application sans rechargement de page. Configuration de routes dynamiques (ex: fiches de logements via identifiants uniques) et redirection personnalisée vers une page d’erreur 404 dédiée pour les URL inconnues.
- Logique métier interactive : Développement de modules complexes en JavaScript pur, incluant un carrousel d’images intelligent (Gallery interactive avec bouclage infini et masquage des commandes si média unique) et des menus déroulants dynamiques (Collapse avec gestion d’état indépendant).
- Stylisation avancée & Animations (SASS) : Intégration rigoureuse des maquettes et implémentation d’animations CSS fluides (transitions d’ouverture/fermeture des menus déroulants) structurées selon la méthodologie SASS.
- Code Review & Posture Professionnelle : Présentation de l’architecture du code source et défense des choix d’ingénierie logicielle lors d’une soutenance de validation technique simulant un livrable devant la CTO.
Liens :
12. SportSee
Description :
Développement de la nouvelle version de la page profil utilisateur pour SportSee, une startup dédiée au coaching sportif. Ce tableau de bord d’analytics de pointe centralise et modélise les données d’activité physique des utilisateurs (calories brûlées, score quotidien, durée des sessions, type d’activité). Le projet consistait à bâtir une interface micro-front-end hautement interactive intégrant des graphiques complexes et à concevoir une architecture logicielle robuste capable de basculer de manière transparente entre des données simulées (mockées) et une API Node.js fonctionnelle.
Compétences clefs :
- Visualisation de données avancée (Data Viz) : Prise en main et intégration de la bibliothèque Recharts (basée sur D3) pour concevoir des éléments graphiques sur mesure et interactifs (courbes de performance, radars d’aptitudes, diagrammes en barres et jauges de score), fidèles aux exigences géométriques des maquettes Figma.
- Conception de services HTTP & Consommation d’API : Création d’une couche service isolée (en dehors du cycle de vie direct des composants React) en utilisant l’API Fetch pour exécuter les appels asynchrones et gérer le cycle de vie des promesses logicielles.
- Normalisation & Design Pattern de Design de Données : Implémentation d’un système de formatage et de modélisation (classes de modélisation ou Design Pattern Factory) permettant de standardiser et de nettoyer les schémas de données hétérogènes de l’API avant leur injection dans les composants de vue.
- Stratégie de Mocking & Commutation d’environnement : Création d’un jeu de données statiques sous TypeScript et mise en œuvre d’un commutateur de configuration globale (switch) permettant à l’application de s’exécuter de façon autonome en mode déconnecté (données mockées) ou connectée (données réelles de l’API).
- Rigueur de production & Documentation : Structuration de l’application (initialisée sous Vite), sécurisation des typages de données entrantes, et documentation technique du projet avec JSDoc et la rédaction d’un fichier README clair.
Liens :
- Repo GitHub
- Hébergement Vercel – seules les pages
/user/12et/user/18ont été développées dans le cadre de cette évaluation
13. Argent Bank
Description :
Développement de la phase initiale de l’application web pour la nouvelle enseigne bancaire Argent Bank. Ce projet s’est articulé autour de deux enjeux majeurs : d’une part, l’intégration complète d’un système d’authentification et de gestion de profil utilisateur sécurisé en React, reposant sur une gestion d’état global centralisée ; d’autre part, un travail d’architecture logicielle visant à modéliser et documenter les futurs points d’accès (endpoints) de l’API pour le système de gestion des transactions.
Compétences clefs :
- Gestion d’état global (Redux / Redux Toolkit) : Configuration complète d’un store Redux centralisé pour maintenir la coherence de l’état applicatif (connexion, jeton d’authentification, informations du profil). Implémentation des reducers, des actions et des requêtes asynchrones via les slices et thunks.
- Authentification & Sécurisation (JWT) : Interconnexion avec une API REST pour l’authentification des utilisateurs via l’envoi de requêtes sécurisées par jetons (JSON Web Tokens). Mise en place de gardes de routes (protected routes) pour restreindre l’accès à la page de profil uniquement aux sessions authentifiées.
- Intégration d’API & Persistance : Développement des interfaces et formulaires dynamiques permettant à l’utilisateur de consulter ses comptes bancaires et de modifier son pseudonyme en temps réel, avec persistance immédiate des données dans la base de données via des requêtes HTTP (POST/PUT).
- Modélisation d’API REST (Swagger / OpenAPI) : Rédaction et structuration d’une spécification technique d’API au format YAML en respectant les normes Swagger. Modélisation complète des futures fonctionnalités de transactions (visualisation, ajout, édition, suppression) avec définition des verbes HTTP, des routes, des paramètres et des codes de réponses d’erreurs (ex: 401, 404).
- Code Review & Soutenance Technique : Présentation et argumentation des choix d’architecture logicielle, du flux d’authentification et de la proposition d’API lors d’une session de code review devant le VP Engineering de la banque.
Liens :
14. HRnet
Description :
Projet de fin d’études axé sur la modernisation d’une infrastructure logicielle legacy et la réduction de la dette technique pour la grande société financière WealthHealth. L’objectif principal consistait à effectuer la refonte totale de leur application interne de gestion des ressources humaines (HRnet), en migrant d’une stack obsolète basée sur jQuery vers une architecture moderne 100 % React. La mission exigeait également d’isoler un composant d’interface utilisateur critique, de le réécrire en programmation fonctionnelle, et de le publier de manière autonome sous forme de package open-source.
Compétences clefs :
- Modernisation d’architecture & Refactoring (Migration jQuery vers React) : Conversion intégrale d’une application multipage jQuery en une Single Page Application (SPA) sous React, structurée selon un paradigme fonctionnel (utilisation exclusive de Hooks et élimination complète des classes et manipulations directes du DOM).
- Création & Publication de packages NPM / GitHub Packages : Isolement fonctionnel d’un composant d’interface utilisateur (sélecteur de date, modale ou tableau de données) pour le transformer en une bibliothèque React autonome et ultra-légère. Configuration, build et publication réussie du package sur le registre public NPM.
- Modélisation, Typage & Outillage Moderne (TypeScript & TanStack) : Sécurisation et fiabilisation du code source de l’application via l’implémentation de TypeScript et intégration de l’écosystème moderne (Vite, gestion d’état avancée et requêtes gérées via TanStack / React Query).
- Audit, Analyse de performance & Benchmarking (Lighthouse) : Réalisation de tests de charge quantifiables à l’aide des outils d’audit Google Lighthouse avant et après la refonte. Comparaison chiffrée des temps de rendu, du poids des bundles de production et des requêtes réseau pour justifier scientifiquement les gains de performance.
- Automatisation & CI/CD avancée : Conception et mise en œuvre de workflows automatisés avec GitHub Actions pour tester, builder et déployer automatiquement l’application sur un environnement de production.
- Clôture de parcours & Soutenance de fin d’études : Rédaction d’une documentation technique claire (fichiers README, typages et documentation d’utilisation des composants) et soutenance devant un jury pour valider la réussite de la transition logicielle.
Liens :
Participation et apprentissages
Ces projets ont marqué une étape clef dans ma reconversion :
- Transition du front-end au fullstack : Après avoir maîtrisé React et le développement front-end, j’ai approfondi le back-end avec PHP/Symfony et les bases de données (PostgreSQL), en travaillant sur un projet personnel combinant ces technologies.
- Approche agile et collaborative : Travail en mode projet avec des livrables concrets, des revues de code et des itérations pour améliorer la qualité.
- Structuration de l’information : Mon expérience en audit financier m’a aidé à concevoir des bases de données et des flux de données cohérents.
- Résolution de problèmes : Analyse des performances, optimisation du code et réduction de la dette technique.
- Éthique et accessibilité : Application des bonnes pratiques (Green Code, WCAG) pour des applications performantes et inclusives.