Skip to content

Latest commit

 

History

81 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FormFlow

A modern full-stack form builder built with React and Supabase, enabling users to create, publish, and manage dynamic forms with flexible field configurations and response management.

🌐 Live Demo

View Live Demo


🚀 Features

  • Dynamic form builder with multiple field types
  • Drag-and-drop field reordering
  • Live form preview
  • Draft and publish workflow
  • Full CRUD operations for forms, fields, and responses
  • Public form submission
  • Secure anonymous access
  • Responses dashboard with dynamic field mapping
  • Responsive user interface

🛠 Tech Stack

Frontend

  • React
  • JavaScript
  • React Router
  • TanStack React Query
  • Context API
  • React Hook Form

Backend

  • Supabase
  • PostgreSQL
  • Supabase Authentication
  • Row Level Security (RLS)

✨ Project Highlights

  • Built a dynamic form builder supporting multiple field types with drag-and-drop interactions.
  • Designed a scalable database schema using JSON-based field configurations and flexible response storage.
  • Implemented full CRUD functionality for forms, fields, and responses using Supabase.
  • Managed complex client-side state using Context API and useReducer.
  • Managed server state with TanStack React Query, including caching, synchronization, and background updates.
  • Implemented a draft/publish workflow with dirty state tracking.
  • Developed secure public form submission with backend validation.

📦 Installation

git clone https://github.com/Ali-jalili/FormFlow.git

cd FormFlow

pnpm install
pnpm dev

🔐 Environment Variables

Create a .env file in the project root and add:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

🚀 Future Improvements

  • Form templates
  • Conditional fields and branching logic
  • File upload fields
  • Email notifications
  • Form analytics
  • Export responses (CSV / Excel)
  • Unit and integration testing

👨‍💻 Author

Ali Jalili

About

Full-stack online form builder with drag-and-drop fields, live preview, and draft/publish workflow. Built with React, Supabase, and TanStack React Query.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages