Form Builder – Application Web de création de formulaires

Un builder de formulaires moderne et extensible avec glisser-déposer, architecture de plugins, validations flexibles, thèmes personnalisables et support multi-pages.

Objectifs du projet

• Offrir une expérience intuitive de création de formulaires.

• Permettre l’extension facile via un système de plugins pour les champs.

• Assurer une validation avancée et personnalisable.

• Fournir un rendu professionnel grâce à des thèmes et styles modulables.

Fonctionnalités principales

• Drag & Drop des champs avec réorganisation, duplication et suppression.

• Inspecteur latéral pour configurer chaque champ.

• Validations dynamiques basées sur React Hook Form.

• Multi-pages et logique conditionnelle par champ.

• Thèmes prédéfinis et styles personnalisables.

• Architecture plugin pour créer facilement de nouveaux champs.

Stack technique

• Frontend : React 19, TypeScript, Vite 6, Tailwind CSS 4, Radix UI

• Libs clés : dnd-kit, react-hook-form, Zustand, TanStack Query

• Architecture :

  • Components/UI → interface et builder

  • Form-plugins → champs (text, email, date, etc.)

  • Zustand store → gestion d’état

  • Registry → enregistrement des plugins

  • Validation → règles prédéfinies et personnalisées

Architecture des plugins

Chaque champ est un plugin qui définit :

• Type & métadonnées (ex. text, email, dropdown…)

• Valeurs par défaut

• Règles de validation RHF

• Composants Builder (aperçu, inspecteur)

• Composant Renderer (affichage final)

Ajout d’un nouveau champ = 1 classe plugin + 3 composants UI.

Thèmes & styles

• Thèmes prêts à l’emploi : modern-slate, ocean-breeze, sunset-glow, etc.

• Personnalisation des couleurs, bordures et typographies.

Gestion d’état & persistance

• Zustand pour stocker et modifier le FormConfig (pages, champs, styles, thème…).

• LocalStorage pour restaurer automatiquement la dernière configuration.

Prochaines évolutions

• Export/Import JSON des formulaires.

• UI pour logique conditionnelle avancée.

• Templates prêts à l’emploi.

• Éditeur visuel de thèmes.

• Internationalisation (i18n).

Liens & ressources

• Inspiration : Form Craft

• Code source : awssam/form-builder

Positionnement portfolio :
Ce projet démontre ta capacité à :

• Concevoir une architecture modulaire évolutive.

• Utiliser un écosystème React moderne.

• Gérer un state complexe et des fonctionnalités avancées (plugins, validations).

• Offrir une UX professionnelle et configurable.