BudForm - Typeform Alternative

A modern, conversational form builder built with Next.js, TypeScript, and React. Features a beautiful UI/UX similar to Typeform with additional innovative components like AI-powered chat interfaces.

🚀 Features

Implemented Components

✅ Text Inputs

• Short Text - Single line input with character limits
• Long Text - Multi-line textarea with auto-resize
• Email - Email validation with domain restrictions
• Website - URL validation with protocol checks

✅ Numeric Input

• Number input with min/max constraints
• Optional decimal and negative number support
• Prefix/suffix formatting

✅ Choice Components

• Multiple Choice - Single/multiple selection with "Other" option
• Yes/No - Binary choice with keyboard shortcuts
• Rating - Star/heart/thumb ratings with customizable scale

✅ Special Components

• Chat Interface - AI-powered conversational forms with:
  • Real-time streaming responses
  • Message history
  • Typing indicators
  • File upload support
  • Voice input capability
  • Flexible completion criteria

Core Features

✅ Form Management

• Zustand state management
• Form progress tracking
• Response validation
• Auto-save capability

✅ User Experience

• Smooth animations with Framer Motion
• Keyboard navigation (Enter, Tab, Arrow keys)
• One question at a time display
• Progress indicators
• Mobile-responsive design

✅ Developer Experience

• Full TypeScript support
• Comprehensive test coverage
• Modular component architecture
• JSON-based form configuration

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State: Zustand
• Animations: Framer Motion
• Testing: Jest, React Testing Library
• AI Integration: Vercel AI SDK

📦 Installation

npm install

🚀 Getting Started

1. Run the development server:

npm run dev

2. Open http://localhost:3000 to see the home page

3. Visit http://localhost:3000/demo to see all components in action

🧪 Testing

Run tests:

npm test

Run tests with coverage:

npm test:coverage

📝 Form Configuration

Forms are configured using JSON:

const formConfig: FormConfig = {
  id: 'my-form',
  title: 'My Form',
  questions: [
    {
      id: 'name',
      type: 'short_text',
      title: "What's your name?",
      required: true,
      properties: {
        placeholder: 'John Doe',
        maxLength: 50
      }
    },
    {
      id: 'chat',
      type: 'chat_interface',
      title: 'Chat with our AI',
      properties: {
        endpoint: '/api/chat',
        maxMessages: 6,
        completionCriteria: {
          type: 'messageCount',
          value: 4
        }
      }
    }
  ]
};

🎯 Roadmap

In Progress

• Contact components (Phone, Address)
• Advanced choice components (Dropdown, Picture Choice)
• Date/Time components
• File upload components

Planned

• Form builder UI
• Conditional logic system
• Theme customization
• Form templates
• Response analytics
• Export functionality

🤝 Contributing

This is a test-driven development project. Please ensure all new components have comprehensive test coverage.

📄 License

MIT