Forms Simplified

A modern full-stack survey and form-building platform that lets users create branded surveys, share public links, collect responses, and manage submissions from a single dashboard.

---

Table of Contents

• Overview
• Features
• Deployment
• Tech Stack
• Architecture
• Getting Started
• Available Scripts
• Configuration
• Contribution Guidelines
• Developers
• License

---

Overview

Forms Simplified is organized as a monorepo with two main applications:

Component	Description
Web App	React + TypeScript frontend for creating and managing surveys
API	Hono-based backend running on Cloudflare Workers with Prisma and PostgreSQL

The product focuses on a smooth creator experience with authentication, survey creation, public sharing, QR-code distribution, and response management.

Live Deployment

The project is deployed and can be accessed via the link below:

---

Features

• User authentication and protected dashboards
• Create and edit surveys with title, description, cover image, and theme color
• Publish and share public survey links
• Generate QR codes for sharing
• Collect and review survey responses in real-time
• Manage surveys from a centralized dashboard
• Responsive design for mobile and desktop

---

Tech Stack

Frontend

• Framework: React 19
• Language: TypeScript
• Build Tool: Vite
• Routing: TanStack Router
• Styling: Tailwind CSS
• UI Components: Custom & shadcn/ui

Backend

• Framework: Hono
• Infrastructure: Cloudflare Workers
• Database ORM: Prisma
• Database: PostgreSQL-compatible deployed on Neon
• Validation: Zod
• Authentication: JWT-based (Session)

Developer Experience

• Monorepo Manager: pnpm workspaces
• Code Quality: Biome (formatting, linting, imports)
• Deployment: Wrangler (Cloudflare) ,Cloudflare Pages for Frontend, Cloudflare Workers for Backend
• Process Manager: concurrently - Run multiple packages simultaneously

---

Architecture

Forms Simplified follows a clean separation between client and API layers:

┌─────────────────────────────────────────────────────────────┐
│                    Forms Simplified                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────────┐      ┌──────────────────────┐    │
│  │   Web Frontend       │      │   API Backend        │    │
│  │  (React + TS)        │◄────►│  (Hono + Workers)    │    │
│  │  - Routes            │      │  - Controllers       │    │
│  │  - Components        │      │  - Middleware        │    │
│  │  - State Mgmt        │      │  - Routes            │    │
│  └──────────────────────┘      └──────────────────────┘    │
│                                        │                    │
│                                        ▼                    │
│                         ┌──────────────────────┐            │
│                         │  Prisma ORM          │            │
│                         │  - Schema            │            │
│                         │  - Migrations        │            │
│                         └──────────────────────┘            │
│                                        │                    │
│                                        ▼                    │
│                         ┌──────────────────────┐            │
│                         │  PostgreSQL Database │            │
│                         │  - Users             │            │
│                         │  - Surveys           │            │
│                         │  - Responses         │            │
│                         └──────────────────────┘            │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Monorepo Structure

Forms-Simplified/
├── web/                          # React frontend
│   ├── src/
│   │   ├── components/          # React + Shadcn components
│   │   ├── routes/              # TanStack Router pages
│   │   ├── hooks/               # Custom React hooks
│   │   └── lib/                 # Utilities and API client
│   ├── package.json
│   └── tsconfig.json
│
├── api/                          # Hono backend (Cloudflare Workers)
│   ├── src/
│   │   ├── controllers/         # Business logic
│   │   ├── routes/              # API endpoints
│   │   ├── middlewares/         # Authentication & file upload
│   │   ├── lib/                 # Database setup
│   │   └── utils/               # Helpers & validations
│   ├── prisma/
│   │   ├── schema.prisma        # Data model
│   │   └── migrations/          # Database migrations
│   ├── wrangler.jsonc           # Cloudflare config
│   └── package.json
│
└── biome.json                    # Code quality config

---

Getting Started

Prerequisites

Requirement	Version
Node.js	20.0.0+
pnpm	9.0.0+
Database	PostgreSQL-compatible
Wrangler	Latest (for Cloudflare deployment)

Installation Steps

1. Clone the repository

git clone https://github.com/Pranava-Pai-N/Forms-Simplified.git
cd Forms-Simplified

2. Install dependencies

pnpm install

3. Configure environment variables

Frontend:

cd web && cp .env.example .env

Backend:

cd api && cp .env.example .env

4. Set up the database

pnpm db:migrate

5. Start the database via docker

docker run -it -p 5432:5432 -e POSTGRES_USER=username -e POSTGRES_PASSWORD=password postgres

6. Migrate the Database

npx prisma migrate dev

7. Generate the Prisma Client

npx prisma generate

8. Start development servers

pnpm dev

Service	URL
Frontend	http://localhost:5173
Backend API	http://localhost:8787

---

Deployment

Deployments for this monorepo use Cloudflare Pages for the frontend and Cloudflare Workers (Wrangler) for the API. Quick steps:

• Frontend (Cloudflare Pages)

# build the frontend
cd web
pnpm build

• Backend (Cloudflare Workers)

cd api
wrangler publish

Available Scripts

From the repository root:

Command	Description
pnpm dev	Run frontend and API concurrently
pnpm build	Build frontend for production
pnpm typecheck	Run TypeScript type checking
pnpm check	Run Biome lint and format validation
pnpm check:fix	Auto-fix Biome issues
pnpm format	Format code with Biome
pnpm lint	Run Biome linter only

Quick Reference

# Development
pnpm dev                    # Start development servers

# Code Quality
pnpm check                  # Lint and format check
pnpm check:fix              # Auto-fix issues
pnpm typecheck              # TypeScript validation

# Production
pnpm build                  # Build for production

---

Developer Configuration

Biome Configuration

This project uses Biome as the unified tool for code formatting and linting. Configuration is defined in biome.json:

Setting	Value
Indentation	2 spaces
Quotes	Single quotes
Semicolons	Included
Trailing Commas	All
Line Width	80

Key Features:

• JavaScript/TypeScript formatting
• Tailwind CSS support
• Import organization
• Recommended lint rules
• CSS-in-JS awareness

Recommended Workflow:

pnpm check          # Validate formatting and linting
pnpm check:fix      # Auto-fix all issues
pnpm format         # Reformat code

---

Contribution Guidelines

We welcome contributions! Please follow this professional workflow:

1. Prepare Your Changes

git checkout -b feature/your-feature-name

2. Make & Validate Changes

• Keep changes focused and well-scoped
• Follow existing code style and naming conventions
• Write clear, descriptive commit messages

3. Pre-Submission Checks

pnpm check          # Lint and format validation
pnpm typecheck      # TypeScript type checking
pnpm build          # Verify build succeeds

4. Commit Message Format

Follow conventional commits:

• feat: for new features
• fix: for bug fixes
• chore: for maintenance and tooling
• docs: for documentation updates
• refactor: for code restructuring
• test: for test additions

5. Create a Pull Request

• Open PR with a clear summary
• Link related issues
• Describe the changes and their impact
• Ensure CI checks pass

Example

git add .
git commit -m "feat: add user profile customization"
git push origin feature/your-feature-name
# Create PR on GitHub

---

License

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

Developed by:

Pranava Pai N

• GitHub: Pranava-Pai-N
• Website: Portfolio Website
• Role: Full-Stack Developer and ML Engineer