Create modern, shareable forms with AI — built for NIT Raipur by the Innovation Cell.
- AI-Powered Form Generation: Describe forms in natural language, generate the structure instantly.
- Modern UI/UX: Fast, clean design with responsive layouts, smooth animations, and accessibility best practices.
- Authentication: Powered by Clerk for secure user management.
- Analytics & Management: View responses, track performance, manage your forms in a dashboard.
- Collaboration Ready: Easy sharing, live links, and data export in CSV/JSON.
- Customizable Themes: Switch between themes (light/dark/custom).
- Mobile-Optimized: Looks perfect on mobile, tablet, and desktop.
- Production-Grade Stack: Next.js 14, Tailwind CSS, PostgreSQL (Neon), Drizzle ORM, Clerk, Google Gemini AI.
| Layer | Tools / Services |
|---|---|
| Frontend | Next.js 14, React 18, Tailwind CSS, Shadcn UI, DaisyUI |
| Auth | Clerk |
| Backend | Node.js (API routes), Drizzle ORM |
| Database | PostgreSQL (Neon Serverless DB) |
| Analytics | Custom-built dashboard, Radix UI, Lucide icons |
| AI | Google Gemini API (Generative AI for form creation) |
| Deployment | Vercel (recommended), supports .env and seamless git integration |
test-project/
│
├── app/ # Main app folder, Next.js routing structure
│ ├── (auth)/ # Clerk auth pages (sign in, sign up)
│ ├── _components/ # Global shared components (e.g., Header, Hero)
│ ├── _data/ # Static app data and default themes
│ ├── api/ # API endpoints (forms, submit-response, etc.)
│ ├── configs/ # DB/AI configs, Drizzle schema, AI modals
│ ├── dashboard/ # User dashboard, main form management UI
│ │ ├── _components/ # Dashboard-specific components (SideNav, FormList, etc.)
│ │ ├── responses/ # Responses management pages
│ ├── edit-form/ # Form editing interface (dynamic by [formId])
│ │ ├── _components/ # Editor UI logic, form controls
│ ├── nitrr-form/ # Public form view ([formid] for live links)
│ ├── globals.css # Global Tailwind CSS + theming (themes, custom utilities)
│ ├── layout.js # App-wide layout provider and meta tags
│ ├── page.js # Home page (landing)
│
├── components/ # Reusable UI components (button, input, dialog, etc.)
│ └── ui/ # Shadcn-styled basic UI primitives
├── lib/ # Utility functions for classNames, helpers
│ └── utils.js # cn() etc.
├── public/ # Static assets (favicons, images, OG tags)
├── package.json # NPM dependencies, scripts, engines
├── tailwind.config.js # Tailwind/daisy/shadcn + colors/theme plugins
├── .env.local.example # Example environment variables file
└── README.md # You're reading it!
git clone https://github.com/codeforlifeee/FormBuilder_NITRR.git
cd test-project
npm installCreate a .env.local in root. See .env.local.example for all variables.
# PostgreSQL Neon DB
NEXT_PUBLIC_DATABASE_URL_CONFIG=your_neon_db_url
# Clerk Auth
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Google Gemini AI
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key
# Optional Clerk URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboardnpm run db:push
# or
npx drizzle-kit pushnpm run devVisit http://localhost:3000
Creating Forms:
- Login/signup via Clerk (supports SSO, email, social)
- Click
Create New Form - Use AI-powered input: type “Create an event registration form for Webinar with fields for Name, Email, Phone, Department”
- Edit any fields visually (drag/drop, reorder, add/remove)
- Save, share the form link, view analytics
Managing Responses:
- See all submitted responses in dashboard
- Export as CSV/JSON
- View summary stats, analytics
Live Sharing:
- Copy form link, distribute to NITRR community
- Anyone can fill out without needing an account
- Themes: Add or edit themes in
app/_data/Themes.jsx - AI Config: Tune model or prompt in
app/configs/AiModals.js - UI: All base UI in
components/ui(button.jsx,input.jsx,dialog.jsx, etc.) - API: Custom routes in
app/api/forms/[id](CRUD),app/api/submit-response(POST)
app/
├── _components/
│ ├── Header.jsx
│ ├── Hero.jsx
│ └── ...
├── dashboard/
│ ├── _components/
│ │ ├── SideNav.jsx
│ │ ├── FormList.jsx
│ │ ├── FormListItem.jsx
│ │ └── ...
│ ├── layout.jsx
│ └── page.jsx
├── edit-form/
│ ├── [formId]/
│ │ └── page.jsx
│ └── _components/
│ ├── Controller.jsx
│ ├── FormUi.jsx
│ └── FieldEdit.jsx
├── nitrr-form/
│ └── [formid]/page.jsx
└── ...
| Variable | Description |
|---|---|
| NEXT_PUBLIC_DATABASE_URL_CONFIG | Neon Postgres connection string |
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Clerk public key for front-end |
| CLERK_SECRET_KEY | Clerk back-end secret |
| NEXT_PUBLIC_GEMINI_API_KEY | Google Gemini API Key for AI forms |
GET /api/forms # List all forms (user)
POST /api/forms # Create new form
GET /api/forms/[id] # Get specific form (single)
PUT /api/forms/[id] # Update form
DELETE/api/forms/[id] # Delete form
POST /api/submit-response # Submit user response
CREATE TABLE jsonForms (
id SERIAL PRIMARY KEY,
jsonform TEXT NOT NULL,
createdBy VARCHAR(255) NOT NULL,
createdAt VARCHAR(255) NOT NULL,
updatedAt VARCHAR(255),
theme VARCHAR(100) DEFAULT 'light'
);
CREATE TABLE userResponses (
id SERIAL PRIMARY KEY,
jsonResponse TEXT NOT NULL,
createdBy VARCHAR(255) DEFAULT 'anonymous',
createdAt VARCHAR(255) NOT NULL,
formId INTEGER REFERENCES jsonForms(id)
);(Replace these with real screenshots as your app deploys!)
- Landing Page
- Dashboard
- Form Editor
- Mobile Experience
- Advanced Analytics & charts
- Form Templates & presets
- Team/Multi-user editing
- File uploads, advanced validations
- Webhooks, notifications
- Custom theme builder
- Fork this repo, create a new branch, submit a pull request!
- For major changes, open a GitHub Issue to discuss your proposal first.
- See CONTRIBUTING.md for guidelines.
Project By: Innovation Cell, NIT Raipur Organization: Innovation Cell, NIT Raipur
MIT License – see LICENSE file for details.
- Issues: Submit here
- Email: tejas.k.surya@gmail.com
- Community: Coming soon!
Made with ❤️ at NIT Raipur — Powering the future of college forms with AI