FormaFlow - Intuitive Form Builder
A complete, schema-driven form builder application with a high-fidelity drag-and-drop interface.
Check it out
Roles: Lead Architect & Developer
Client: Personal Project
ReactFramer MotionTailwind CSS@dnd-kitReact Hook FormVitest
Overview
This project represents a deep dive into modern frontend architecture and creating polished, user-centric interfaces. It features a drag-and-drop builder, an inline editor with real-time preview, and a dynamic form renderer capable of handling nested conditional logic.
Tech Stack
- React
- Framer Motion
- Tailwind CSS
- @dnd-kit
- React Hook Form
- Vitest
Features
- Drag-and-Drop BuilderEasily construct complex form layouts with an intuitive drag-and-drop interface.
- Real-time Preview & Auto-SaveSee your changes live with an inline editor that provides instant feedback and saves progress automatically.
- Conditional Logic RendererCreate dynamic forms that show or hide fields based on nested user input and complex rules.
- Schema-Driven DesignForms are generated and validated based on a predefined schema, ensuring data integrity.