Log inSign up
vyatka
vyatkatest11111
Public
Like
test11111
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
README.md

Form Builder Dashboard

A comprehensive form builder application with authentication, drag-and-drop form creation, and embeddable forms.

Features

  • User Authentication: Secure login/register system
  • Dashboard: Manage all your forms in one place
  • Form Builder: Drag-and-drop interface for creating forms
  • Form Sharing: Share forms via direct links
  • Form Embedding: Generate embed codes for external websites
  • Submission Management: View and manage form submissions

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database query functions
│   ├── routes/
│   │   ├── auth.ts         # Authentication routes
│   │   ├── forms.ts        # Form CRUD operations
│   │   ├── submissions.ts  # Form submission handling
│   │   └── embed.ts        # Form embedding endpoints
│   └── index.ts            # Main server entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx         # Main application component
│   │   ├── Auth.tsx        # Login/Register forms
│   │   ├── Dashboard.tsx   # Forms dashboard
│   │   ├── FormBuilder.tsx # Drag-and-drop form builder
│   │   └── FormRenderer.tsx # Renders forms for public view
│   ├── index.html          # Main HTML template
│   └── index.tsx           # Frontend entry point
├── shared/
│   └── types.ts            # Shared TypeScript types
└── embed/
    └── widget.js           # Embeddable form widget

Getting Started

  1. The application runs on Val Town's serverless platform
  2. SQLite database for data persistence
  3. JWT-based authentication
  4. React frontend with TypeScript

API Endpoints

  • POST /api/auth/register - User registration
  • POST /api/auth/login - User login
  • GET /api/forms - Get user's forms
  • POST /api/forms - Create new form
  • PUT /api/forms/:id - Update form
  • DELETE /api/forms/:id - Delete form
  • POST /api/forms/:id/submit - Submit form data
  • GET /api/forms/:id/submissions - Get form submissions
  • GET /embed/:formId - Embeddable form endpoint

Technologies Used

  • Backend: Hono.js, SQLite, JWT
  • Frontend: React, TypeScript, TailwindCSS
  • Platform: Val Town (Deno runtime)
Code