Formlytics

Overview

Formlytics is a modern, product-first SaaS form builder positioned as a clean alternative to Google Forms. Built with a minimal black-and-white design language, it focuses on simplicity and speed while delivering powerful form creation, quiz building, and response collection capabilities.

The platform embodies a "build fast, deploy faster" philosophy with no distractions—just a serious tool for serious work.

Architecture

Built on Next.js 14 App Router with a full-stack TypeScript architecture. The backend leverages MongoDB with Prisma ORM for flexible schema management and efficient queries. Authentication is handled through NextAuth.js v4 with Prisma Adapter for seamless user management.

State management uses Zustand for lightweight, performant client-side state, while Zod provides TypeScript-first schema validation across the application.

Key Features

Form & Quiz Builder

• Drag-and-drop interface powered by dnd-kit for intuitive form creation
• Multiple question types: text, multiple choice, checkboxes, dropdowns, file uploads
• Quiz mode with scoring and correct answer validation
• Conditional logic for dynamic form flows

Clean Dashboard

• Minimal, distraction-free workspace
• Quick access to all forms and responses
• Real-time response notifications
• Form templates for rapid deployment

Analytics & Insights

• Recharts-powered visualizations for response analytics
• Response trends and completion rates
• Individual response drill-down
• Export capabilities for data analysis

Sharing & Collection

• One-click shareable links
• Embeddable forms for websites
• Response limits and deadline settings
• Anonymous and authenticated submission modes

Tech Stack

Core Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Library: React 18

Backend & Database

• Database: MongoDB (NoSQL)
• ORM: Prisma
• Authentication: NextAuth.js v4 with Prisma Adapter

Styling & UI

• CSS Framework: Tailwind CSS
• UI Primitives: Radix UI (accessible components)
• Animations: Framer Motion
• Icons: Lucide React
• Data Visualization: Recharts

State & Validation

• State Management: Zustand
• Schema Validation: Zod
• Utilities: clsx & tailwind-merge

Additional Tools

• File Uploads: UploadThing
• Drag & Drop: dnd-kit
• Date Handling: date-fns
• Security: bcryptjs (password hashing)