Form Builder

A comprehensive form builder application built with Next.js, TypeScript, and PostgreSQL.

Features

• Dynamic Form Creation: Create forms with various field types (text, select, checkbox, date).
• Flexible Validation: Configure validation rules for each field.
• Form Submissions: Submit and view form responses with built-in validation.
• Database Persistence: Store all data in a PostgreSQL database.
• Responsive Design: Optimized for both desktop and mobile devices.

Getting Started

Prerequisites

• Node.js 18+
• Supabase account and project
• Clerk account for authentication

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd form-builder

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

   Edit .env.local and add your configuration:

   # Supabase Configuration
   NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
   CLERK_SECRET_KEY=your-clerk-secret-key
   

4. Set up the database: Run the SQL migration scripts in your Supabase SQL editor:

   • First run scripts/supabase-migration.sql to create the base tables
   • Then run scripts/003-simple-auth.sql to set up authentication and sharing

5. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser to view the application.

Project Structure

├── app/                    # Next.js App Router pages
│   ├── api/                # API routes
│   │   └── forms/          # Form-related API endpoints
│   ├── create/             # Form creation page
│   ├── forms/              # Form viewing and management pages
│   ├── sign-in/            # Authentication pages
│   ├── sign-up/            # User registration
│   ├── submit/             # Public form submission pages
│   ├── fonts/              # Custom fonts
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout with authentication
│   └── page.tsx            # Home page
├── components/             # React components
│   ├── ui/                 # shadcn/ui components
│   ├── form-builder.tsx    # Form creation interface
│   ├── form-renderer.tsx   # Form display and submission
│   └── submissions-viewer.tsx  # View form submissions
├── lib/                    # Utility functions
│   ├── supabase/           # Supabase configuration
│   │   ├── client.ts       # Client-side Supabase client
│   │   ├── server.ts       # Server-side Supabase client
│   │   └── types.ts        # Generated database types
│   ├── types.ts            # TypeScript type definitions
│   ├── db.ts               # Database connection (legacy)
│   ├── utils.ts            # Utility functions
│   └── validation.ts       # Form validation logic
├── scripts/                # Database migration scripts
│   ├── supabase-migration.sql      # Main Supabase migration
│   ├── 002-add-authentication.sql  # Authentication setup
│   ├── 003-simple-auth.sql         # Simplified auth with share IDs
│   └── update-existing-tables.sql  # Schema updates
├── middleware.ts           # Clerk authentication middleware
└── public/                 # Static assets

Field Types

• Text Input: Supports minimum and maximum length validation.
• Dropdown Select: Configurable options.
• Checkbox: Provides boolean true/false values.
• Date Picker: Supports constraints for past or future dates.

API Endpoints

• GET /api/forms - List all forms for authenticated user.
• POST /api/forms - Create a new form (requires authentication).
• GET /api/forms/[id] - Retrieve a specific form (requires authentication).
• GET /api/forms/[id]/public - Retrieve a public form by share ID (no authentication).
• GET /api/forms/[id]/submissions - Retrieve form submissions (requires authentication).
• POST /api/forms/[id]/submissions - Submit form data (public endpoint).

Database Schema

Forms Table

• id - UUID primary key.
• name - Form name.
• description - Optional description.
• user_id - Foreign key linking to authenticated user.
• share_id - Unique identifier for public sharing.
• created_at - Creation timestamp.
• updated_at - Last update timestamp.

Form Fields Table

• id - UUID primary key.
• form_id - Foreign key linking to the forms table.
• name - Field name (used for data keys).
• label - Display label for the field.
• type - Field type (text, dropdown, checkbox, date).
• required - Whether the field is required.
• validation_config - JSON containing validation rules.
• field_config - JSON containing field-specific configuration.
• field_order - Order of the field in the form.

Form Submissions Table

• id - UUID primary key.
• form_id - Foreign key linking to the forms table.
• data - JSON containing the form submission.
• created_at - Submission timestamp.

Contributing

To add new field types:

1. Update the FormField type in lib/types.ts.
2. Incorporate rendering logic in components/form-renderer.tsx.
3. Implement validation logic in lib/validation.ts.
4. Create configuration UI in components/form-builder.tsx.

License

MIT License