Stoneforms - Beautiful Forms with Powerful CRM
A modern form builder with built-in CRM capabilities, built with Next.js 14, TypeScript, Tailwind CSS, and Supabase.
🚀 Features
Form Builder
- ✅ Conversational one-question-at-a-time interface
- ✅ 8+ question types (text, email, number, multiple choice, rating, etc.)
- ✅ Drag-and-drop question reordering
- ✅ Custom themes and branding
- ✅ Conditional logic and branching
- ✅ URL parameters and hidden fields
- ✅ Multiple embed options
CRM Integration
- ✅ Automatic contact creation from submissions
- ✅ Deal pipeline management
- ✅ Contact properties and custom fields
- ✅ Lead scoring and segmentation
- ✅ Activity tracking
Analytics & Automation
- ✅ Real-time analytics dashboard
- ✅ Question-by-question drop-off analysis
- ✅ Webhook integrations
- ✅ Automated workflows
- ✅ Email notifications
🛠️ Tech Stack
- Frontend: Next.js 14 (App Router), React 18, TypeScript
- Styling: Tailwind CSS, Shadcn/ui components
- Database: PostgreSQL via Supabase
- Authentication: Supabase Auth
- Storage: Supabase Storage
- Drag & Drop: @dnd-kit
- Charts: Recharts
- State Management: Zustand
📋 Prerequisites
Before you begin, ensure you have:
- Node.js 18+ installed
- npm or yarn package manager
- A Supabase account (free tier is fine)
🚀 Quick Start
1. Clone and Install
cd stoneforms
npm install
2. Set Up Supabase
- Go to supabase.com and create a new project
- Wait for the database to be provisioned (2-3 minutes)
- Go to Project Settings > API
- Copy your project URL and anon key
3. Configure Environment Variables
Create a .env.local file in the root directory:
cp .env.example .env.local
Edit .env.local and add your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
NEXT_PUBLIC_SITE_URL=http://localhost:3000
4. Initialize the Database
- Go to your Supabase project dashboard
- Click on "SQL Editor" in the left sidebar
- Click "New Query"
- Copy the contents of
database/schema.sql
- Paste into the SQL editor and click "Run"
This will create all necessary tables, indexes, and policies.
5. Run the Development Server
npm run dev
Open http://localhost:3000 in your browser.
📁 Project Structure
stoneforms/
├── app/ # Next.js app directory
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/ # React components
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions
│ ├── supabase.ts # Supabase client
│ └── utils.ts # Helper functions
├── types/ # TypeScript type definitions
│ └── index.ts # Core types (Form, Submission, Contact, etc.)
├── database/ # Database schemas
│ └── schema.sql # PostgreSQL schema
└── public/ # Static assets
🎯 Roadmap - Week 1
Day 1 ✅ (Completed)
Day 2 (Form Builder)
Day 3 (Form Player)
Day 4 (Submissions)
Day 5 (CRM)
Day 6 (Integrations)
Day 7 (Polish)
🔐 Security
- Row Level Security (RLS) enabled on all tables
- Authentication required for all sensitive operations
- HTTPS enforced in production
- Environment variables for secrets
- Input validation and sanitization
📝 Database Schema
Key tables:
workspaces - Multi-tenant workspace managementforms - Form definitions with questions and logicsubmissions - Form responses with answerscontacts - CRM contact recordsdeals - Sales pipeline dealspipelines - Customizable sales stageswebhooks - Integration endpointsworkflows - Automation rules
🤝 Contributing
This is a solo project sprint, but contributions and feedback are welcome!
📄 License
MIT License - feel free to use this for your own projects.
🙏 Acknowledgments
- Inspired by Typeform's beautiful UX
- Built with amazing open-source tools
- Powered by Supabase
Let's build something amazing! 🚀
Updated Thu 19 Feb 2026 16:55:41 GMT
Deployed Thu 19 Mar 2026 10:10:26 GMT
