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 with debounced caching; 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
- Auto-save for respondents - Logged-in users' in-progress responses are automatically saved as drafts
- 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
- Animated hero section with live statistics (8 teams, 50+ members, 30+ projects)
- Team showcase bento grid
- "How We Work" section, FAQ, and scrolling component marquee
- Fully responsive design with Framer Motion animations
- 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 |
| 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
- 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.