Projet front-end
Formulaire dynamique en React
Application React qui génère des formulaires dynamiques à partir de schémas JSON, avec navigation par Drawer latéral et catégorisation personnalisée.
Présentation du projet
Ce projet implémente un formulaire dynamique en React en utilisant JSONForms, Ant Design et ProLayout. L'objectif est de générer automatiquement des formulaires à partir de schémas JSON, tout en offrant une expérience utilisateur claire et structurée.
Au lieu d'utiliser des onglets classiques, l'interface présente une catégorisation dans un Drawer latéral : les utilisateurs peuvent naviguer entre différentes sections du formulaire en sélectionnant des catégories avec des icônes personnalisées.
Fonctionnalités principales
- Formulaires dynamiques : génération des champs à partir de JSON Schema avec JSONForms.
- Navigation latérale : Drawer qui remplace les onglets traditionnels pour parcourir les sections.
-
Deux grands ensembles de formulaires :
- Vos Informations Personnelles (3 sous-catégories)
- Votre Parcours Professionnel (2 sous-catégories)
- Custom Renderer JSONForms : rendu personnalisé qui affiche les bons formulaires selon la catégorie sélectionnée dans le Drawer.
- Icônes personnalisées : chaque catégorie du Drawer possède son icône pour améliorer la lisibilité.
Outils et technologies utilisés
- React (composants fonctionnels, hooks)
- TypeScript (typage des props et des schémas)
- JSONForms (génération de formulaires depuis JSON Schema)
- Ant Design (UI components)
- ProLayout (structure globale et layout)
Ce que j'ai appris
- Utiliser JSONForms pour construire des formulaires dynamiques sans écrire chaque champ "à la main".
- Créer un Custom Renderer pour adapter l'affichage aux besoins du projet.
- Organiser une application React autour de plusieurs sections logiques (informations personnelles, parcours professionnel…).
- Intégrer plusieurs librairies UI (Ant Design, ProLayout) dans un même projet de manière cohérente.