Form Builder

Table of Contents

• Introduction
• Link to website demo
• Tech Stack
• Prerequisites
• Installation
• Running the application

Introduction

A responsive fullstack form builder application built using Next.js for frontend and backend, Prisma ORM and Clerk for auth. The application allows you to create and customize forms with a wide variety of fields, both editable and non-editable, as well as publish them and preview their statistics.

Link to website demo

FormBuilder

Tech Stack

• TypeScript
• Next.js
• Tailwind CSS
• ShadCN/ui
• Prisma
• Clerk
• DnD-Kit

Prerequisites

Install the following prerequisites:

1. Node.js 18.17.0 or higher
2. Visual Studio Code

Installation

1. Install dependencies

From the root directory run:

pnpm install

2. Create and populate the .env file like this:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=

POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=

3. Run the Prisma migration

pnpx prisma migrate dev --name init

Running the application

To run the application, run the following command:

pnpm run dev