Borax Forms 🎨✨

A beautiful, minimalist form builder that makes form filling fun and engaging. Built with Next.js, TypeScript, and modern web technologies.

100% Free & Open Source - Made with ❤️ to provide value to the community.

🌟 Features

• Beautiful Form Builder: Intuitive interface with live preview
• Engaging Form Experience: Smooth animations and micro-interactions
• 9 Professional Templates: Ready-to-use forms for any use case
• Real-time Analytics: Track responses and form performance
• Responsive Design: Works perfectly on all devices
• Authentication: Secure user management with Clerk
• File Upload Support: Accept files, images, and documents

🚀 Tech Stack

• Frontend: Next.js 15, TypeScript, Tailwind CSS
• Backend: Next.js API Routes, Prisma ORM
• Database: PostgreSQL (Supabase)
• Authentication: Clerk
• Animations: Framer Motion
• UI Components: Radix UI, Lucide React

🛠️ Setup Instructions

Prerequisites

• Node.js 18+
• PostgreSQL database
• Clerk account for authentication
• DodoPayments account for payments

1. Clone and Install

```bash git clone cd borax-forms npm install ```

2. Environment Variables

Create a `.env.local` file in the root directory:

```env

Clerk Authentication

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key 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 CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret

Database

DATABASE_URL="postgresql://username:password@localhost:5432/borax_forms"

DodoPayments

DODO_PAYMENTS_API_KEY=your_dodo_payments_api_key DODO_PAYMENTS_WEBHOOK_SECRET=your_webhook_secret

App Configuration

NEXT_PUBLIC_APP_URL=http://localhost:3000 ```

3. Database Setup

```bash

Generate Prisma client

npx prisma generate

Run database migrations

npx prisma db push

(Optional) Seed the database

npx prisma db seed ```

4. Clerk Setup

1. Create a new Clerk application at clerk.com
2. Add your domain to allowed origins
3. Set up webhook endpoint: `/api/webhooks/clerk`
4. Copy your API keys to `.env.local`

5. DodoPayments Setup

1. Create a DodoPayments account at dodopayments.com
2. Set up webhook endpoint: `/api/webhooks/dodopayments`
3. Copy your API keys to `.env.local`

6. Run the Application

```bash npm run dev ```

Visit http://localhost:3000 to see your application!

📁 Project Structure

``` borax-forms/ ├── src/ │ ├── app/ # Next.js App Router │ │ ├── api/ # API routes │ │ ├── dashboard/ # User dashboard │ │ ├── forms/ # Form builder pages │ │ ├── f/ # Public form pages │ │ └── pricing/ # Pricing page │ ├── components/ # React components │ │ ├── form-builder/ # Form builder components │ │ ├── form-renderer/ # Form display components │ │ └── ui/ # Reusable UI components │ └── lib/ # Utility functions ├── prisma/ # Database schema └── public/ # Static assets ```

🎨 Design Philosophy

Borax Forms is built with a focus on:

• Minimalism: Clean, uncluttered interfaces
• Timelessness: Design that won't look outdated
• Fun: Making form filling enjoyable, not boring
• Accessibility: Usable by everyone
• Performance: Fast loading and smooth interactions

💳 Credit System

The app uses a credit-based pricing model:

• Each form response costs 1 credit
• Credits are purchased in packages
• Credits never expire
• No monthly subscriptions

🔧 Development

Adding New Question Types

1. Add the type to the `Question` interface in `FormBuilder.tsx`
2. Add the type icon and label to `QuestionTypeSelector.tsx`
3. Implement the input component in `QuestionRenderer.tsx`
4. Add the preview in `FormPreview.tsx`

Customizing Themes

Themes are stored as JSON in the database and applied via CSS classes. You can add new themes by:

1. Adding theme styles to `globals.css`
2. Creating theme selection in the form builder
3. Applying theme classes in the form renderer

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

📝 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you have any questions or need help, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue with detailed information

---

Made with ❤️ and lots of ☕ by the Borax Forms team