A modern, feature-rich form builder application that allows users to create, share, and analyze forms with real-time polling capabilities.
Create beautiful, responsive forms with a variety of field types:
- Text Fields - Customizable with different styles (bold, italic, underline) and font sizes
- Text Inputs - Support for text, textarea, email, and number inputs
- Options - Multiple choice and multi-select questions
- Rating Groups - Star ratings with customizable labels
- File Uploads - Support for PDF, PPT, XLSX, JPEG, and PNG files
- Images - Add visual elements to your forms
Create real-time polls with instant analytics:
- WebSocket-powered live updates
- Share polls via unique links
- View response percentages in real-time
- Perfect for presentations and quick consensus gathering
Comprehensive dashboard to manage all your forms:
- View form statistics (forms created, responses received)
- Access your published forms
- Continue working on draft forms
- Browse globally shared forms
Automatically export form responses to Google Sheets:
- Seamless integration with Google Drive
- Auto-formatted spreadsheets with headers
- Real-time response syncing
Never lose your work with Redis-powered drafts:
- Auto-save your forms while creating
- Resume editing from any device
- View draft statistics before publishing
Collect and analyze responses:
- Track user submissions
- View response data per field
- Support for authenticated responses
Customize your form behavior:
- Set response limits
- Add custom response messages
- Tag your forms for organization
- Configure star ratings
- Next.js 14 - React framework with App Router
- React 18 - UI library
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Framer Motion - Smooth animations
- Recoil - State management
- Radix UI - Accessible component primitives
- Next.js API Routes - Serverless API endpoints
- Prisma - Type-safe database ORM
- PostgreSQL - Primary database
- Redis (Valkey) - Draft storage and caching
- NextAuth.js - Authentication
- Socket.io - WebSocket server for live polling
- Express - WebSocket server framework
- Google APIs - Sheets and Drive integration
- Vercel Blob - File storage
- Node.js 18+
- pnpm (recommended) or npm
- PostgreSQL database
- Redis instance
Create a .env file with the following variables:
# Database
POSTGRES_PRISMA_URL="your-postgres-connection-string"
POSTGRES_URL_NON_POOLING="your-postgres-direct-connection-string"
# Authentication
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-nextauth-secret"
# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
# Google Sheets
SHEET_PRIVATE_KEY="your-google-service-account-private-key"
SHEET_CLIENT_EMAIL="your-google-service-account-email"
# Redis
REDIS_URL="your-redis-connection-string"- Clone the repository:
git clone https://github.com/yourusername/formik.git
cd formik- Install dependencies:
pnpm install- Generate Prisma client:
pnpm prisma generate- Run database migrations:
pnpm prisma db push- Start the development server:
pnpm dev- (Optional) Start the WebSocket server for live polling:
cd websocket
pnpm install
pnpm devOpen http://localhost:3000 to view the application.
formik/
├── app/ # Next.js App Router pages
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # User dashboard
│ │ ├── drafts/ # Draft forms
│ │ ├── global/ # Public forms
│ │ ├── liveform/ # Live polling
│ │ └── myforms/ # User's forms
│ └── form/ # Form pages
│ ├── create/ # Form builder
│ └── [formId]/ # Form viewer
├── actions/ # Server actions
├── classes/ # Manager classes
├── components/ # React components
├── lib/ # Utility functions
├── prisma/ # Database schema
├── recoil/ # State atoms
├── types/ # TypeScript types
└── websocket/ # Socket.io server
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
Key models:
- User - Authenticated users
- Form - Form definitions with settings and tags
- Field - Form fields with type-specific properties
- Option - Choices for option fields
- Response - User form submissions
- RatingMapping - Rating group configurations
- GoogleSheet - Linked Google Sheets
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and not licensed for public distribution.
Sparsh Singh - @bigSparsh
Built with ❤️ using Next.js and modern web technologies.