📝 Form Builder - Frontend

Modern drag-and-drop form builder SPA built with React 19, TypeScript, and Vite

A single-page application for building forms, managing submissions with generating dynamic reports and autofilled form with unique data type feature — all connected to a Laravel backend API.

Quick Start · Features · Project Structure · Configuration · Scripts · Troubleshooting

---

user : builder@kdigital.technology
password : password

Features

Feature	Description
Public Form Submission	Users fill out forms at /form/{slug} — no login required
Admin Dashboard	Manage forms, view submissions, generate reports from a single panel
Drag-and-Drop Builder	Visual field editor with 13+ field types powered by @dnd-kit
Auto-Fill	Automatically populate fields from previous submissions
Dynamic Reports	Chart-based analytics with Chart.js — bar, pie, line, and more
Export	Download submissions as CSV, Excel (XLSX), or PDF
Rich Text Editor	@tiptap powered WYSIWYG field type
Signature Capture	react-signature-canvas for handwritten signature fields
Responsive	Fully functional on mobile and desktop
Bot Protection	Cloudflare Turnstile on login and form submission

Quick Start

Prerequisites

Tool	Version
Node.js	18+
npm	9+
PHP	8.3+ (for backend)
Composer	2.x (for backend)
MySQL	5.7+ / MariaDB 10.3+

1. Backend Setup (Required First)

The frontend is a SPA — all data comes from the Laravel backend API. You must set it up first.

cd ../backend

composer install
cp .env.example .env
php artisan key:generate

Edit backend/.env and configure your database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=form_builder
DB_USERNAME=your_user
DB_PASSWORD=your_password

Run migrations and seeders (creates the default admin user and a sample form):

php artisan migrate:fresh --seed

Turnstile is required for bot protection. For development, use Cloudflare's test keys:

# In backend/.env
TURNSTILE_SITE_KEY=1x00000000000000000000AA
TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA

For production, get real keys at Cloudflare Turnstile Dashboard.

Start the backend server:

php artisan serve
# API available at http://localhost:8000

2. Frontend Setup

cd frontend

npm install
cp .env.example .env

Edit frontend/.env:

# API URL — for local dev, the Vite proxy handles this
# (requests to /api and /storage are proxied to http://localhost:8000)
VITE_API_URL=/api

# Cloudflare Turnstile site key (use test key for development)
VITE_TURNSTILE_SITE_KEY=1x00000000000000000000AA

# App name shown in browser tab
VITE_APP_NAME="Form Builder"

Start the development server:

npm run dev
# Frontend available at http://localhost:5173

3. Log In

Go to http://localhost:5173:

Field	Value
Email	admin@dgb.local
Password	password

---

How It Connects to the Backend

The Vite dev server proxies API requests so both frontend and backend run seamlessly in development:

┌──────────────────┐        ┌──────────────────────┐        ┌──────────────────┐
│  Browser         │───────>│  Vite Dev Server     │───────>│  Laravel API     │
│  localhost:5173  │<───────│  (Proxy)             │<───────│  localhost:8000  │
└──────────────────┘        └──────────────────────┘        └──────────────────┘
   /api/* → proxied             /api, /storage                REST API
   /storage/* → proxied         forwarded                     + Storage

Configured in vite.config.ts:

server: {
  proxy: {
    '/api': { target: 'http://localhost:8000', changeOrigin: true },
    '/storage': { target: 'http://localhost:8000', changeOrigin: true },
  },
}

For production, set VITE_API_URL to the full backend URL, rebuild, and serve the dist/ folder:

VITE_API_URL=https://your-api-domain.com/api

npm run build    # Output goes to dist/

Serve dist/ with any static file server (Nginx, Apache, etc.). Ensure the backend CORS FRONTEND_URL matches your production domain.

---

Project Structure

frontend/
├── public/                  # Static assets (favicon, etc.)
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/               # Page-level components
│   │   ├── LandingPage.tsx  # Public landing page
│   │   ├── LoginPage.tsx    # Admin login
│   │   ├── DashboardPage.tsx
│   │   ├── SubmissionPage.tsx  # Public form submission
│   │   ├── SettingsPage.tsx
│   │   ├── ProfilePage.tsx
│   │   ├── AdminUsersPage.tsx
│   │   ├── FormDashboardPage.tsx
│   │   └── form/            # Form-related pages
│   │       ├── FormBuilderPage.tsx
│   │       ├── FormSubmissionsPage.tsx
│   │       ├── FormReportsPage.tsx
│   │       ├── FormTitlePage.tsx
│   │       └── FormDashboardListPage.tsx
│   ├── services/            # API service layer (axios)
│   ├── hooks/               # Custom React hooks
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Utility functions
│   ├── config/              # App configuration
│   ├── layouts/             # Layout components
│   ├── assets/              # Images, fonts, etc.
│   ├── test/                # Test setup and utilities
│   ├── App.tsx              # Root component with routing
│   ├── App.css              # Global styles
│   ├── index.css            # TailwindCSS imports
│   └── main.tsx             # Entry point
├── .env                     # Environment variables
├── .env.example             # Environment template
├── index.html               # HTML entry point
├── vite.config.ts           # Vite + Vitest configuration
├── tsconfig.json            # TypeScript configuration
├── eslint.config.js         # ESLint configuration
└── package.json             # Dependencies and scripts

---

Key Dependencies

Package	Purpose
React 19	UI framework
TypeScript	Type safety
Vite	Build tool and dev server with HMR
TailwindCSS 4	Utility-first CSS framework
react-router-dom	Client-side routing (SPA)
axios	HTTP client for API calls
@dnd-kit	Drag-and-drop for Form Builder
@tiptap	Rich text editor field type
Chart.js + react-chartjs-2	Dynamic report charts
jsPDF + autotable + html2canvas	PDF export generation
react-signature-canvas	Signature capture field
Vitest + Testing Library	Unit and integration tests

---

Configuration

Environment Variables

Variable	Description	Default
VITE_API_URL	Backend API base URL	/api (uses Vite proxy in dev)
VITE_TURNSTILE_SITE_KEY	Cloudflare Turnstile site key	1x00000000000000000000AA (test key)
VITE_APP_NAME	App display name in browser tab	"Kopega Poltekpar Palembang APP"

Backend Variables (in backend/.env)

Variable	Description	Default
DB_CONNECTION	Database driver	mysql
DB_HOST	Database host	127.0.0.1
DB_PORT	Database port	3306
DB_DATABASE	Database name	form_builder
DB_USERNAME	Database user	—
DB_PASSWORD	Database password	—
TURNSTILE_SITE_KEY	Turnstile site key (must match frontend)	—
TURNSTILE_SECRET_KEY	Turnstile secret key	—
FRONTEND_URL	Frontend URL for CORS	http://localhost:5173

See .env.example for all supported parameters.

---

Available Scripts

Command	Description
npm run dev	Start dev server with HMR at localhost:5173
npm run build	Type-check and build for production (dist/)
npm run preview	Preview the production build locally
npm run lint	Run ESLint checks
npm run test	Run tests in watch mode