openform - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #llm #golang #machine-learning #deep-learning #linux #macos #awesome #cli #kubernetes #pytorch #ios

openform

(★ 511)

Open Source TypeForm Clone

File Explorer

Download Latest Version (.zip)

- - layout.tsx
- - layout.tsx
- favicon.ico
- globals.css
- layout.tsx
- page.tsx
- - delete-form-button.tsx
  - form-card.tsx
  - nav.tsx
- - form-builder.tsx
  - form-preview.tsx
  - question-editor.tsx
- - form-player.tsx
  - question-renderer.tsx
- - responses-dashboard.tsx
- - avatar.tsx
  - badge.tsx
  - button.tsx
  - card.tsx
  - dialog.tsx
  - dropdown-menu.tsx
  - input.tsx
  - label.tsx
  - logo.tsx
  - progress.tsx
  - scroll-area.tsx
  - select.tsx
  - separator.tsx
  - sonner.tsx
  - switch.tsx
  - table.tsx
  - tabs.tsx
  - textarea.tsx
- - client.ts
  - middleware.ts
  - server.ts
- database.types.ts
- questions.ts
- themes.ts
- utils.ts
- file.svg
- globe.svg
- next.svg
- vercel.svg
- window.svg
- schema.sql
.env.example
.gitignore
CLAUDE.md
components.json
eslint.config.mjs
LICENSE.txt
logo.jpg
middleware.ts
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
SPEC.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/dabit3/openform

Downloads the entire project code from GitHub to your computer.

cd openform

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# OpenForm

A beautiful, open-source TypeForm alternative. Create engaging forms with a one-question-at-a-time experience.

![OpenForm Logo](https://raw.githubusercontent.com/dabit3/openform/main/logo.jpg)

## Features

- **6 beautiful themes** - Midnight, Ocean, Sunset, Forest, Lavender, Minimal
- **Keyboard navigation** - Navigate with Enter, arrow keys, and scroll wheel
- **Mobile-first forms** - Responsive form-taking experience
- **Secure authentication** - Google OAuth and Magic Link
- **Response dashboard** - View, search, filter, and export to CSV
- **13 question types** - Text, multiple choice, rating, file upload, and more

## Question types

| Type | Description |
|------|-------------|
| Short text | Single line text input |
| Long text | Multi-line textarea |
| Dropdown | Select one option |
| Checkboxes | Select multiple options |
| Email | Email with validation |
| Phone | Phone number input |
| Number | Numeric input |
| Date | Date picker |
| Rating | Star rating (1-5) |
| Opinion scale | Numeric scale (1-10) |
| Yes/No | Binary choice |
| File upload | Images and PDFs |
| Website URL | URL with validation |

## Tech stack

- **Framework**: Next.js 16 (App Router)
- **Database**: Supabase (PostgreSQL)
- **Auth**: Supabase Auth (Google OAuth + Magic Link)
- **Styling**: Tailwind CSS + shadcn/ui
- **Animations**: Framer Motion
- **File storage**: Cloudflare R2 (optional)

## Getting started

### Prerequisites

- Node.js 18+
- A Supabase account
- (Optional) Cloudflare account for file uploads

### 1. Clone and install

```bash
git clone https://github.com/yourusername/openform.git
cd openform
npm install
```

### 2. Set up Supabase

1. Create a new project at [supabase.com](https://supabase.com)

2. Run the database schema in SQL Editor:
   - Copy the contents of `supabase/schema.sql`
   - Paste and run in Supabase SQL Editor

3. Configure authentication:

**Enable Google OAuth:**
   - Go to Authentication, then Providers, then Google
   - Enable and add your Google OAuth credentials
   - Get credentials from [Google Cloud Console](https://console.cloud.google.com)
   - Set redirect URI: `https://YOUR_PROJECT.supabase.co/auth/v1/callback`

**Configure URLs:**
   - Go to Authentication, then URL Configuration
   - Site URL: `http://localhost:3000`
   - Add redirect URL: `http://localhost:3000/auth/callback`

4. Get your API keys:
   - Go to Settings, then API
   - Copy "Project URL" and "anon public" key

### 3. Configure environment variables

```bash
cp .env.example .env.local
```

Edit `.env.local` with your Supabase credentials:

```env
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```

### 4. Run the development server

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see your app.

## File uploads (optional)

To enable file uploads, configure Cloudflare R2:

1. Create an R2 bucket in your Cloudflare dashboard
2. Create an API token with R2 read/write permissions
3. Add the credentials to `.env.local`:

```env
R2_ACCOUNT_ID=your-account-id
R2_ACCESS_KEY_ID=your-access-key
R2_SECRET_ACCESS_KEY=your-secret-key
R2_BUCKET_NAME=openform-uploads
R2_PUBLIC_URL=https://your-bucket.r2.dev
```

## Deployment

### Vercel (recommended)

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

Remember to update your Supabase URL Configuration with your production URL.

## Project structure

```
openform/
├── app/
│   ├── (auth)/           # Auth pages (login)
│   ├── (dashboard)/      # Protected dashboard pages
│   │   ├── dashboard/    # Forms list
│   │   ├── forms/        # Form builder and responses
│   │   └── settings/     # User settings
│   ├── api/              # API routes
│   ├── auth/             # Auth callback
│   └── f/[slug]/         # Public form pages
├── components/
│   ├── dashboard/        # Dashboard components
│   ├── form-builder/     # Form builder components
│   ├── form-player/      # Form player components
│   ├── responses/        # Response dashboard
│   └── ui/               # shadcn/ui components
├── lib/
│   ├── supabase/         # Supabase clients
│   ├── database.types.ts # TypeScript types
│   ├── questions.ts      # Question type definitions
│   └── themes.ts         # Theme configurations
└── supabase/
    └── schema.sql        # Database schema
```

## License

MIT License - feel free to use this for any project.

## Contributing

Contributions are welcome. Please open an issue or pull request.