FormForge 🚀

Empower anyone to publish professional-grade forms without writing code

FormForge is a modern, accessible form builder platform that enables users to create, customize, and deploy forms with ease. Built with React, TypeScript, and a powerful GraphQL API.

🎯 Vision

FormForge aims to democratize form creation by providing an intuitive drag-and-drop interface, real-time preview, and seamless deployment options - all while maintaining professional standards for accessibility, security, and performance.

✨ Key Features (v0.1 MVP)

• Drag & Drop Builder: Intuitive canvas for form construction
• Live Preview: WYSIWYG editing experience
• Field Types: Text, Email, Number, Textarea, Select, Radio, Checkbox, File Upload
• Themes: Light/Dark mode with customizable branding
• Publishing: One-click deployment with embeddable widgets
• Data Export: CSV/XLSX export capabilities
• Responsive: Mobile-first design approach
• Accessible: WCAG 2.1 AA compliant

🏗️ Architecture

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│   Editor    │────▶│  GraphQL API │────▶│ PostgreSQL  │
│  (Next.js)  │     │ (PostGraphile)│     │    (RDS)    │
└─────────────┘     └──────────────┘     └─────────────┘
       │                    │                     │
       ▼                    ▼                     ▼
┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Renderer   │     │     Auth     │     │  S3 Storage │
│   (React)   │     │   (Clerk)    │     │  (Uploads)  │
└─────────────┘     └──────────────┘     └─────────────┘

🚀 Quick Start

Prerequisites

• Node.js >= 18.0.0
• pnpm >= 8.0.0
• PostgreSQL >= 15
• AWS Account (for S3 storage)

Installation

# Clone the repository
git clone https://github.com/your-org/formforge.git
cd formforge

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local

# Run database migrations
pnpm run db:migrate

# Start development servers
pnpm run dev

Development URLs

• Editor: http://localhost:3000
• API: http://localhost:4000/graphql
• Storybook: http://localhost:6006

📦 Monorepo Structure

formforge/
├── packages/
│   ├── editor/          # Next.js form builder application
│   ├── renderer/        # Embeddable form renderer
│   └── api/            # GraphQL API server
├── terraform/          # Infrastructure as Code
├── .github/           # CI/CD workflows
└── docs/              # Documentation

🧪 Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Generate coverage report
pnpm test:coverage

# Run E2E tests
pnpm test:e2e

🔧 Tech Stack

• Frontend: React 18, Next.js 14, TypeScript, Tailwind CSS 3.x
• State Management: Zustand
• Drag & Drop: dnd-kit
• Forms: react-hook-form, Zod
• API: GraphQL, PostGraphile
• Database: PostgreSQL 15
• Auth: Clerk
• File Storage: AWS S3
• Deployment: AWS ECS Fargate
• CI/CD: GitHub Actions
• Monitoring: Datadog, Sentry

🛡️ Security

• Passwordless authentication via magic links
• Multi-tenant data isolation with RLS
• HTTPS enforced with HSTS
• Input validation and sanitization
• Rate limiting on public endpoints

📈 Performance Targets

• First Contentful Paint: < 1.8s
• Time to Interactive: < 3.5s
• Lighthouse Score: > 90
• API Response Time: p95 < 300ms
• Bundle Size: < 150kB (gzipped)

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ by the FormForge Team

---

Status: 🚧 Under active development (v0.1 MVP)