🚀 NITRR Form Builder

---

Create modern, shareable forms with AI — built for NIT Raipur by the Innovation Cell.

---

✨ Features

• 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.

---

🛠️ Tech Stack

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

---

📁 Folder Structure (Detailed)

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!

---

🚀 Quick Start

1. Clone and Install

git clone https://github.com/codeforlifeee/FormBuilder_NITRR.git
cd test-project
npm install

2. Setup Environment

Create 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=/dashboard

3. Setup Database

npm run db:push
# or
npx drizzle-kit push

4. Start Development

npm run dev

Visit http://localhost:3000

---

🌈 Usage Guide

Creating Forms:

1. Login/signup via Clerk (supports SSO, email, social)
2. Click Create New Form
3. Use AI-powered input: type “Create an event registration form for Webinar with fields for Name, Email, Phone, Department”
4. Edit any fields visually (drag/drop, reorder, add/remove)
5. 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

---

🧩 Key Components & Customization

• 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)

---

📦 Project Structure Visual (Sample)

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
└── ...

---

📝 Environment Variables Reference

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

---

📜 API Endpoints

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

---

🧪 Database Schema Overview

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)
);

---

📸 Screenshots

(Replace these with real screenshots as your app deploys!)

• Landing Page
• Dashboard
• Form Editor
• Mobile Experience

---

✨ Roadmap

• Advanced Analytics & charts
• Form Templates & presets
• Team/Multi-user editing
• File uploads, advanced validations
• Webhooks, notifications
• Custom theme builder

---

🤝 Contributing

• 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 Team

Project By: Innovation Cell, NIT Raipur Organization: Innovation Cell, NIT Raipur

---

📄 License

MIT License – see LICENSE file for details.

---

📬 Contact & Support

• 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