README

Form Creator

A web-based paper form designer with two creation paths: manually drag-and-drop elements onto a canvas, or import an image of a form and let AI convert it to an editable layout. The JSON schema is the source of truth — export to PDF when ready.

Features

Visual form designer with drag-and-drop palette, live canvas, and property inspector
8 element types: Text, Rectangle, Line, Checkbox, Radio, Table, Image, Signature
AI-assisted import: Upload a scan or photo of a paper form, convert to editable elements
PDF export: Generate print-ready PDFs that match the canvas layout exactly
Undo/redo with full history tracking
Grid snapping for precise element alignment
Multi-select and bulk operations
Project organization for managing multiple forms and assets
Light and dark themes with system preference detection

Screenshots

Designer (Light Mode)

Designer (Dark Mode)

Element Selection

Tech Stack

Layer	Technology
Frontend	Next.js 15 (App Router), TypeScript, Tailwind CSS, shadcn/ui
State	Zustand + zundo (undo/redo)
Drag & Drop	dnd-kit
GraphQL Client	urql
Backend	Go, gqlgen (schema-first GraphQL)
PDF Generation	gofpdf
Database	SQLite (dev), PostgreSQL (prod)
Testing	Vitest (frontend), Go testing (backend), Playwright (e2e)

Prerequisites

Node.js >= 20
pnpm >= 9
Go >= 1.24
Docker (for PostgreSQL in dev)
Task (Taskfile) for task orchestration

Quick Start

bash

# Clone the repository
git clone https://github.com/jonathanleahy/form-creator.git
cd form-creator

# Copy environment config
cp .env.example .env

# Install frontend dependencies
cd frontend && pnpm install && cd ..

# Install backend dependencies
cd backend && go mod download && cd ..

# Install e2e dependencies
cd e2e && pnpm install && cd ..

# Start development services (PostgreSQL via Docker)
docker compose up -d

# Run the backend (with hot reload)
cd backend && task dev &

# Run the frontend
cd frontend && pnpm dev

The frontend runs at http://localhost:3000 and the backend GraphQL API at http://localhost:8080.

Project Structure

shell

form-creator/
├── frontend/           # Next.js app
│   ├── src/
│   │   ├── app/        # App Router pages
│   │   ├── components/ # React components
│   │   └── lib/        # Types, stores, utilities
│   └── vitest.config.mts
├── backend/            # Go GraphQL server
│   ├── cmd/server/     # Entry point
│   └── internal/       # Business logic
│       ├── graph/      # GraphQL schema & resolvers
│       ├── repository/ # Database layer
│       └── service/    # Business services
├── e2e/                # Playwright end-to-end tests
│   ├── fixtures/       # Test fixtures
│   ├── pages/          # Page object models
│   └── tests/          # Test specs
├── docs/               # Documentation
└── Taskfile.yml        # Task runner config

Running Tests

bash

# Frontend unit tests
cd frontend && pnpm test

# Frontend tests in watch mode
cd frontend && pnpm test:watch

# Backend tests
cd backend && go test ./... -v

# E2E tests (mock mode - no backend required)
cd e2e && pnpm playwright test --project=mock

# E2E tests (integration mode - requires running backend)
cd e2e && pnpm playwright test --project=integration

Documentation

Architecture — System design and tech stack rationale
Requirements — User stories and acceptance criteria
JSON Schema — Form document schema reference
API Reference — GraphQL API documentation
TDD Guide — Testing workflow and conventions
User Guide — How to use the application

Development Workflow

This project follows test-driven development with an outside-in approach:

Write a failing Playwright e2e spec for the feature

Drop down to Vitest unit tests for each building block

Implement minimally to pass unit tests

Wire together until the e2e test passes

Refactor with all tests green

Feature branches use git worktrees for parallel development.

License

MIT