Form Builder SaaS

A modern, full-featured form builder application built with TanStack Start, React, and Appwrite. Create, share, and manage dynamic forms with an intuitive drag-and-drop interface.

🚀 Features

Authentication & Security

✅ Email/password authentication
✅ Protected admin routes
✅ Optional form authentication for participants
✅ Session management with secure cookies

Admin Dashboard

✅ Create, edit, duplicate, and delete forms
✅ Search forms by title
✅ Form list with creation dates and metadata
✅ Share form links with one click

Drag-and-Drop Form Builder

✅ 11 field types:
- Short Text (single-line input)
- Long Text (multi-line textarea)
- Checkbox (multiple choice)
- Dropdown/Select
- Radio buttons
- Date picker
- Number input
- File upload
- Rating (1-5 stars)
- Email input
- Section divider
✅ Drag-and-drop reordering with visual feedback
✅ Field customization (label, placeholder, required, options)
✅ Auto-save (500ms debounce)
✅ Real-time preview

Form Sharing & Submissions

✅ Unique form URLs (e.g., /form/{formId})
✅ Public form access with optional authentication
✅ Client-side and server-side validation
✅ Success confirmation page
✅ Responsive mobile-friendly forms

Submission Management

✅ View all submissions in table format
✅ Detailed submission view
✅ Export to CSV
✅ Export to JSON
✅ Delete submissions with confirmation
✅ Submission metadata (timestamp, participant email)

🛠️ Tech Stack

Framework: TanStack Start (React meta-framework)
Router: TanStack Router
State Management: TanStack Query
Backend: Appwrite (Database, Auth, Storage)
UI Components: shadcn/ui
Styling: Tailwind CSS v4
Drag & Drop: @dnd-kit
Form Handling: React Hook Form + Zod

📋 Prerequisites

Bun (v1.0+)
Appwrite account (or self-hosted instance)

⚙️ Installation & Setup

1. Clone the repository

git clone <repository-url>
cd form-builder-saas

2. Install dependencies

bun install

3. Configure environment variables

Copy .env.example to .env:

cp .env.example .env

Fill in your Appwrite credentials in .env:

APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
APPWRITE_API_KEY=your-api-key
APPWRITE_BUCKET_ID=imagine-project-bucket
APPWRITE_PROJECT_ID=your-project-id
VITE_INSTRUMENTATION_SCRIPT_SRC=  # Optional analytics

4. Deploy Appwrite Schema

The database schema is defined in appwrite.json. Deploy it to your Appwrite project:

# Install Appwrite CLI if you haven't already
npm install -g appwrite-cli

# Login to Appwrite
appwrite login

# Deploy the schema
appwrite deploy collection

This will create:

Forms collection (stores form metadata)
FormFields collection (stores individual form fields)
FormSubmissions collection (stores participant responses)
Storage bucket (for file uploads)

5. Start the development server

bun run dev

The app will be available at http://localhost:3000.

🧪 Testing

Manual Testing Checklist

Authentication Flow

Sign up with valid email/password
Sign in with existing account
Sign out successfully
Protected routes redirect to sign-in when not authenticated
After sign-in, user is redirected to dashboard

Admin Dashboard

View list of forms
Search forms by title
Create new form with title, description, and auth toggle
Edit form (navigates to form builder)
Duplicate form (creates copy with all fields)
Delete form (shows confirmation, removes form and data)
Copy form link to clipboard

Form Builder

Add fields by clicking field types
Drag and drop fields to reorder
Select field to open settings panel
Edit field label, placeholder, required toggle
Add/remove options for select/radio/checkbox fields
Delete field (shows on hover)
Auto-save updates (check by refreshing page)
Preview form (opens in new tab)
Back to dashboard navigation

Public Form Submission

Access form via /form/{formId} URL
Form shows authentication prompt if requireAuth is enabled
All 11 field types render correctly
Required fields show validation errors
Form submits successfully
Success message displays after submission
Form is responsive on mobile devices

Submissions Management

View submissions list for a form
Click "View" to see submission details
Export submissions to CSV
Export submissions to JSON
Delete submission with confirmation
Submission stats display correctly

Accessibility Testing

Keyboard navigation works throughout app
Focus states are visible
Form labels are properly associated
Error messages are announced
Color contrast meets WCAG 2.1 AA standards

Responsive Design Testing

Test on mobile (320px-767px)
Test on tablet (768px-1023px)
Test on desktop (1024px+)
Touch targets are at least 44x44px
Text is readable without zooming

🚀 Building for Production

Build the application

bun run build

This creates an optimized production build in the dist directory.

Preview the production build

bun run serve

Deploy

The application can be deployed to any Node.js hosting platform:

Vercel / Netlify / Cloudflare Pages

Connect your Git repository
Set environment variables
Deploy (platform will auto-detect TanStack Start)

Docker

docker build -t form-builder .
docker run -p 3000:3000 form-builder

Traditional Node.js Server

bun run build
bun run start

📝 Environment Variables Reference

Variable	Description	Required
`APPWRITE_ENDPOINT`	Appwrite API endpoint URL	Yes
`APPWRITE_API_KEY`	Appwrite API key with full permissions	Yes
`APPWRITE_BUCKET_ID`	Storage bucket ID for file uploads	Yes
`APPWRITE_PROJECT_ID`	Appwrite project ID	Yes
`VITE_INSTRUMENTATION_SCRIPT_SRC`	Analytics script URL (optional)	No

📊 Performance Optimization

Current Optimizations

Code Splitting: Routes are lazy-loaded
Auto-save Debouncing: Field updates debounced by 500ms
Query Caching: TanStack Query caches API responses
Optimistic Updates: UI updates immediately for smooth UX

Monitoring

Use browser DevTools Performance tab
Check Network tab for API response times
Monitor bundle size with bun run build --analyze

Tips for Production

Enable Appwrite CDN for faster API responses
Use a CDN for static assets
Enable compression on your hosting platform
Monitor error rates with Sentry or similar
Set up uptime monitoring

🏗️ Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # shadcn/ui components (read-only)
│   ├── auth/            # Authentication components
│   ├── dashboard/       # Dashboard components
│   ├── form-builder/    # Form builder components
│   └── submissions/     # Submission management components
├── hooks/               # Custom React hooks
├── lib/                 # Utilities and helpers
│   ├── field-types.ts   # Field type definitions
│   └── utils.ts         # General utilities
├── routes/              # TanStack Router routes
│   ├── _public/         # Public routes (home, forms)
│   ├── _protected/      # Protected routes (dashboard, builder, submissions)
│   └── _auth/           # Auth routes (sign-in, sign-up, sign-out)
├── server/              # Server-side code
│   ├── lib/             # Server utilities
│   │   ├── appwrite.ts  # Appwrite client setup
│   │   ├── db.ts        # Database helpers
│   │   └── appwrite.types.ts  # TypeScript types
│   └── functions/       # Server functions
│       ├── auth.ts      # Authentication logic
│       ├── forms.ts     # Form CRUD operations
│       ├── formFields.ts  # Field CRUD operations
│       └── submissions.ts  # Submission handling
└── styles.css           # Global styles (Tailwind)

🔒 Security Best Practices

Never expose API keys: Environment variables are server-only
Ownership verification: All CRUD operations verify user ownership
Input validation: Zod schemas validate all user input
SQL injection protection: Appwrite handles parameterized queries
XSS protection: React auto-escapes rendered content
CSRF protection: Session cookies use httpOnly and secure flags

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

TanStack for the amazing ecosystem
Appwrite for the backend infrastructure
shadcn/ui for beautiful UI components
@dnd-kit for drag-and-drop functionality

📞 Support

For issues and questions:

Open an issue on GitHub
Check existing issues for solutions
Review the documentation

Built with ❤️ using modern web technologies

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.vscode		.vscode
public		public
src		src
.cta.json		.cta.json
.cursorrules		.cursorrules
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
.prettierignore		.prettierignore
Dockerfile		Dockerfile
README.md		README.md
appwrite.json		appwrite.json
bun.lock		bun.lock
components.json		components.json
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
pm2.config.cjs		pm2.config.cjs
prettier.config.js		prettier.config.js
server.ts		server.ts
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

Form Builder SaaS

🚀 Features

Authentication & Security

Admin Dashboard

Drag-and-Drop Form Builder

Form Sharing & Submissions

Submission Management

🛠️ Tech Stack

📋 Prerequisites

⚙️ Installation & Setup

1. Clone the repository

2. Install dependencies

3. Configure environment variables

4. Deploy Appwrite Schema

5. Start the development server

🧪 Testing

Manual Testing Checklist

Authentication Flow

Admin Dashboard

Form Builder

Public Form Submission

Submissions Management

Accessibility Testing

Responsive Design Testing

🚀 Building for Production

Build the application

Preview the production build

Deploy

Vercel / Netlify / Cloudflare Pages

Docker

Traditional Node.js Server

📝 Environment Variables Reference

📊 Performance Optimization

Current Optimizations

Monitoring

Tips for Production

🏗️ Project Structure

🔒 Security Best Practices

🤝 Contributing

📄 License

🙏 Acknowledgments

📞 Support

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages