A comprehensive form builder and management platform built for
Yıldız Technical University - SKY LAB
Create, manage, and analyze forms with advanced features like conditional logic, drag-and-drop editing, reusable component groups, and detailed response analytics.
- 12 field types - Short text, long text, toggle, dropdown, multi-choice, date picker, time picker, file upload, link, slider, matrix, separator, and more
- Drag-and-drop reordering with smooth animations (dnd-kit)
- Rich text editor for form descriptions (TipTap)
- Conditional logic - Show or hide fields based on user responses
- Form linking - Link fields to other forms for nested submissions
- Live preview - See your form as you build it
- Auto-save drafts - Editor changes are automatically saved as drafts (debounced, retried on failure, and flushed on tab close so nothing is lost); restore or discard on next session
- Undo system - Debounced history tracking with one-click undo
- Session auto-fill - Name and email fields are automatically populated from the user's session
- Save commonly used field sets as reusable templates
- Import component groups into any form
- Manage and update groups from a dedicated panel
- Group editor history - Debounced undo/redo stack mirroring the form editor
- Component group sharing - Generate an expiring token link for any group; recipients land on a public preview page and can clone the group into their own library with one click
- Response sharing - Send a tokenized, read-only response preview to people outside the admin panel; revoke the active token at any time
- Form link copying - Share the public form URL straight from the editor with a single action
- Bulk collaborator adding - Add multiple collaborators to a form or group at once instead of one by one
- All share links are gated by an auth landing page so unauthenticated visitors are prompted to sign in before viewing
- Auto-save for respondents - Logged-in users' in-progress responses are automatically saved as drafts, with the latest change flushed on tab close and writes serialized + retried for reliability
- Draft restore prompt - On revisit, saved answers are auto-loaded with an option to discard and start fresh
- Last saved indicator - Timestamp shown near the submit button
- View, filter, and search responses with pagination
- Approval workflow - Approve, reject, or leave responses pending with notes
- Archive responses to keep your workspace clean
- Export to Excel for offline analysis
- File preview for uploaded attachments
- At-a-glance statistics: total forms, responses, and component groups
- Weekly trend charts for form creation and response activity
- Recent forms with quick-action shortcuts
- Time-of-day greeting for a personal touch
- Anonymous response collection
- Allow or restrict multiple responses per user
- Enable manual review before acceptance
- Publish / unpublish forms on demand
- SEO metadata (title & description) for shared form links
- Rebuilt from scratch with a unified design language and an animated background layer
- Hero - Side-by-side YAML schema preview and the rendered form it produces, with a magnetic background logo that tracks the cursor
- Features - Six interactive feature rows, each paired with a live in-page demo (form builder, conditional logic, response management, component groups, dashboard, drafts)
- Flow - Scroll-driven five-step pipeline showing the admin / respondent journey
- Subtle spotlight, scroll-reveal, and reduced-motion-aware Framer Motion animations throughout
- Built-in "How to Use" guide with 12 interactive tutorial sections
- Covers form creation, editing, conditional logic, response management, and more
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI Library | React 19 |
| Authentication | NextAuth.js v5 + Keycloak |
| State / Data | TanStack React Query v5 |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion |
| Rich Text | TipTap |
| Drag & Drop | dnd-kit |
| Charts | Recharts |
| Icons | Lucide React |
| Sanitization | DOMPurify |
| Route | Description |
|---|---|
/ |
Landing page |
/[id] |
Fill out a published form |
/component-groups/[groupId] |
Tokenized component group preview (clone-to-library) |
/responses/[responseId] |
Tokenized read-only response preview |
| Route | Description |
|---|---|
/admin |
Dashboard |
/admin/forms |
All forms list |
/admin/forms/new-form |
Create a new form |
/admin/forms/[formId] |
Form overview & analytics |
/admin/forms/[formId]/edit |
Form editor |
/admin/forms/[formId]/responses |
Response list |
/admin/forms/[formId]/responses/[responseId] |
Response detail |
/admin/component-groups |
Component groups list |
/admin/component-groups/new-group |
Create component group |
/admin/component-groups/[groupId] |
Group detail |
/admin/how-to-use |
Documentation |
| # | Type | Description |
|---|---|---|
| 1 | Short Text | Single-line input with session auto-fill |
| 2 | Long Text | Multi-line textarea |
| 3 | Toggle | Boolean yes/no switch |
| 4 | Combobox | Dropdown select with custom option support |
| 5 | Multi Choice | Multiple selection with checkboxes |
| 6 | Date Picker | Calendar-based date selection |
| 7 | Time Picker | Time selection input |
| 8 | File Upload | File attachment with size & type restrictions |
| 9 | Link | URL input with validation |
| 10 | Slider | Numeric range selector with min/max/step |
| 11 | Matrix | Grid/table for survey-style rating questions |
| 12 | Separator | Section divider with title & description |
Each field type supports:
- Required / optional validation (except separator)
- Custom placeholder text
- Conditional display logic
- Linking to other forms
Transactional email templates live in mail-templates/ and are authored with React Email (@react-email/components) + Tailwind, matching the platform's dark visual language:
| Template | Purpose |
|---|---|
FormSubmission.jsx |
Sent when a form receives a new submission |
PendingResponses.jsx |
Reminder for responses awaiting review |
StatusChanged.jsx |
Notifies a respondent when their status changes |
ℹ️ These templates are not imported by the Next.js app. They are rendered and dispatched by a separate notification service — the markup embeds Go templating directives (e.g.
{{if eq .status \approved`}}`) that the service fills in at send time. They are version-controlled here so the email design stays in sync with the rest of the product and doesn't get lost.
- Node.js 18.17 or later
- npm, yarn, or pnpm
- Access to a Keycloak instance (for authentication)
- A running SKY LAB Forms API backend
# Clone the repository
git clone https://github.com/skylab-kulubu/forms-frontend.git
cd forms-frontend
# Install dependencies
npm installCreate a .env.local file in the project root:
| Variable | Description |
|---|---|
NEXT_PUBLIC_API_URL |
Backend API base URL |
NEXT_PUBLIC_KEYCLOAK_ISSUER |
Keycloak realm URL (public) |
KEYCLOAK_CLIENT_ID |
OAuth client ID |
KEYCLOAK_CLIENT_SECRET |
OAuth client secret |
KEYCLOAK_ISSUER |
Keycloak realm URL (server-side) |
AUTH_SECRET |
NextAuth encryption secret |
# Development
npm run dev
# Production build
npm run build
npm startThe app will be available at http://localhost:3000.
See CONTRIBUTING.md for project structure, architecture details, and contribution guidelines.
This project is developed and maintained by SKY LAB - Yıldız Technical University Computer Science Club.