TurboForm is an AI-powered form builder. This repository contains the web frontend built with Next.js, providing a modern user interface for creating, managing, and distributing forms with AI assistance.

• Features
• Architecture
• Prerequisites
• Getting Started
• Project Structure
• Design System
• Development Workflow
• Authentication
• API Integration
• Deployment
• Contributing
• License

• AI Form Generation: Instantly create forms using natural language prompts
• Drag-and-Drop Editor: Customize forms with an intuitive interface
• Form Analytics: Track submissions and analyze response data
• Vector Search: Use AI to search across form responses semantically
• Responsive Design: Optimized for mobile, tablet, and desktop experiences

TurboForm's web frontend is built with:

• Next.js (App Router) - React framework for server-side rendering
• Tailwind CSS - Utility-first CSS framework
• Shadcn - Component library built on Radix UI
• SWR - React hooks for data fetching
• React Hook Form - Form handling
• Zod - TypeScript-first schema validation
• Supabase - Auth, database access, and file storage

• Node.js v18 or later
• npm v8 or later
• Access to the TurboForm API (see the workers repository for API setup)

1. Clone the repository:

   git clone https://github.com/turboform/web.git
   cd web

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.example to .env.local (create it if it doesn't exist)
   • Fill in the required variables:

   # Supabase credentials
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   # API configuration
   API_BASE_URL=https://api.turboform.ai
   # API_BASE_URL=http://localhost:8787 # For local development
   
   # Stripe credentials (optional for payment features)
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
   NEXT_PUBLIC_STRIPE_PRICE_ID=your_stripe_price_id
   
   # Turnstile for CAPTCHA (optional)
   NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_turnstile_key
   

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 with your browser to see the application.

• Use kebab-case for React component file names (e.g., user-card.tsx)
• Prefer named exports for components

• Use React Context for global state management
• Use SWR for data fetching and caching
• Follow React hooks best practices

# Development
npm run dev            # Start development server
npm run lint           # Run ESLint

# Database
npm run gen-db-types   # Generate TypeScript types from Supabase

# Deployment
npm run build          # Build the application
npm run preview        # Preview the built application
npm run deploy         # Deploy to production

TurboForm uses Supabase Auth for user authentication with the following features:

• Email/password authentication
• OAuth providers (Google, GitHub, etc.)
• Anonymous user sessions with upgrade path
• Protected routes and client-side auth checks

The web application communicates with the TurboForm API located in the workers repository:

• All frontend API calls are proxied through Next.js API routes in src/app/api/
• The API endpoints follow RESTful patterns
• Authentication is handled via Supabase Auth tokens

TurboForm web can be deployed using Cloudflare Pages:

1. Make sure you've built the application:

   npm run build
   npm run pages:build

2. Deploy to Cloudflare Pages:

   npm run deploy

Alternatively, you can deploy to other platforms like Vercel or Netlify.

We welcome contributions to TurboForm! Here's how you can contribute:

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Make your changes following the project's code style
4. Commit your changes: git commit -m 'Add some amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

• Follow the established project structure and patterns
• Write clean, maintainable code with appropriate comments
• Ensure all linting and type checking passes before submitting

This project is licensed under the MIT License - see the LICENSE file for details.