Formos - Form Builder Application

A modern, production-ready form builder application built with Encore.ts backend and React frontend.

Features

• User Management: Simple email-based user registration and authentication
• Form Builder: Intuitive drag-and-drop interface for creating forms
• Field Types: Support for text, textarea, multiple choice, and single choice fields
• Form Sharing: Unique shareable links for each published form
• Response Collection: Collect and manage form submissions
• Analytics Dashboard: View form performance and response analytics
• Export Data: Export responses to CSV format

Tech Stack

Backend (Encore.ts)

• Framework: Encore.ts with TypeScript
• Database: PostgreSQL with automated migrations
• API: RESTful API with type-safe endpoints
• Infrastructure: Built-in SQL database, automatic deployment

Frontend (React)

• Framework: React with TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui components
• Icons: Lucide React
• Build Tool: Vite

Getting Started

Prerequisites

• Node.js 18+
• Encore CLI installed (npm install -g @encore/cli)

Installation

1. Clone the repository

   git clone <repository-url>
   cd formos

2. Install dependencies

   npm install

3. Start the development server

   encore run

   This will start both the backend API server and frontend development server.

4. Open your browser

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:4000
   • Encore Developer Dashboard: http://localhost:9400

Project Structure

├── backend/
│   ├── form/                 # Form service
│   │   ├── encore.service.ts # Service definition
│   │   ├── create.ts         # Create form endpoint
│   │   ├── list.ts           # List forms endpoint
│   │   ├── get.ts            # Get form details
│   │   ├── update.ts         # Update form
│   │   ├── publish.ts        # Publish form
│   │   ├── submit.ts         # Submit form response
│   │   └── ...
│   └── user/                 # User service
│       ├── encore.service.ts # Service definition
│       ├── create.ts         # Create user
│       ├── get_by_email.ts   # Get user by email
│       └── db.ts             # Database configuration
└── frontend/
    ├── components/           # React components
    │   ├── Dashboard.tsx     # Main dashboard
    │   ├── FormEditor.tsx    # Form builder
    │   ├── PublicForm.tsx    # Public form view
    │   └── ...
    ├── styles/              # CSS styles
    └── App.tsx              # Root component

Deployment

Backend Deployment

1. Create your Encore app

   encore app create formos

2. Deploy to Encore Cloud

   encore deploy

3. Note your app URL After deployment, Encore will provide you with an API URL like: https://staging-formos-<id>.encoreapi.com

Frontend Configuration

1. Update the backend URL in frontend/config.ts Replace the placeholder URL with your actual Encore app URL:

   export const API_BASE_URL = process.env.NODE_ENV === 'production' 
     ? 'https://staging-formos-<your-id>.encoreapi.com'  // Your actual Encore URL
     : 'http://localhost:4000';

2. Build the frontend

   cd frontend
   npm run build

3. Deploy to Vercel, Netlify, or similar

   • Upload the dist folder
   • Set up environment variables if needed

Important Deployment Notes

• Backend URL: Make sure to update frontend/config.ts with your actual Encore app URL after deployment
• CORS: The backend is configured to work with any frontend origin in development/staging
• Database: Encore automatically provisions and manages your PostgreSQL database
• SSL: All Encore deployments come with automatic SSL certificates

API Endpoints

User Management

• POST /users - Create a new user
• GET /users/by-email/:email - Get user by email

Form Management

• POST /forms - Create a new form
• GET /forms/user/:userId - List user's forms
• GET /forms/details/:id - Get form details
• PUT /forms/:id - Update form
• PUT /forms/:formId/fields - Update form fields
• POST /forms/:id/publish - Publish form
• DELETE /forms/:id - Delete form

Public Form Access

• GET /forms/share/:token - Get public form by share token
• POST /forms/share/:token/submit - Submit form response

Analytics

• GET /analytics/dashboard/user/:userId - Get dashboard analytics
• GET /forms/:formId/analytics - Get form-specific analytics
• GET /forms/:formId/responses - Get form responses

Features

Form Sharing

Each published form generates a unique shareable URL:

https://your-frontend-domain.com/share/{unique-token}

Form Types Supported

• Short Text: Single-line text input
• Long Text: Multi-line textarea
• Multiple Choice: Checkbox options
• Single Choice: Radio button options

Analytics Dashboard

• Total forms created
• Published forms count
• Total responses received
• Daily response trends
• Top performing forms

Troubleshooting

Common Issues

1. Dashboard not loading after deployment

   • Check if frontend/config.ts has the correct backend URL
   • Verify the backend is deployed and accessible
   • Check browser console for API errors

2. Forms not saving

   • Ensure the backend database migrations ran successfully
   • Check if the user ID is being passed correctly

3. Share links not working

   • Make sure forms are published before sharing
   • Verify the frontend routing handles /share/:token correctly

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For support, email support@formos.app or create an issue in the repository.