{"id":28245634,"url":"https://github.com/pedroestevaodev/form-builder-nextjs","last_synced_at":"2026-06-11T13:31:33.487Z","repository":{"id":269619783,"uuid":"908008493","full_name":"pedroestevaodev/form-builder-nextjs","owner":"pedroestevaodev","description":"A full-stack Form Builder app built with Next.js 13 (App Router), TypeScript, Prisma, and Supabase. Create, preview, and share custom forms through an intuitive drag-and-drop interface.","archived":false,"fork":false,"pushed_at":"2025-08-14T16:36:55.000Z","size":393,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-11T13:12:41.999Z","etag":null,"topics":["dnd-kit","drag-and-drop","form-builder","fullstack","fullstack-development","nextjs","prisma","reactjs","supabase","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://form-builder-nextjs-sigma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pedroestevaodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-24T21:16:33.000Z","updated_at":"2025-08-12T14:40:07.000Z","dependencies_parsed_at":"2024-12-24T22:20:47.540Z","dependency_job_id":"0ea1dac8-3edd-4a92-823f-276f9fdb5bc6","html_url":"https://github.com/pedroestevaodev/form-builder-nextjs","commit_stats":null,"previous_names":["pedro-estevao/form-builder-nextjs","pedroestevaodev/form-builder-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pedroestevaodev/form-builder-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroestevaodev%2Fform-builder-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroestevaodev%2Fform-builder-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroestevaodev%2Fform-builder-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroestevaodev%2Fform-builder-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedroestevaodev","download_url":"https://codeload.github.com/pedroestevaodev/form-builder-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroestevaodev%2Fform-builder-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34201840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dnd-kit","drag-and-drop","form-builder","fullstack","fullstack-development","nextjs","prisma","reactjs","supabase","tailwindcss","typescript"],"created_at":"2025-05-19T09:12:56.126Z","updated_at":"2026-06-11T13:31:33.450Z","avatar_url":"https://github.com/pedroestevaodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Form Builder Full Stack\n\n\u003cp style=\"text-align: center;\"\u003e\n    \u003ca href=\"https://www.pedroestevao.com\"\u003e\n        \u003cimg src=\"https://res.cloudinary.com/dge3g9rcw/image/upload/v1747433667/github/iyenjgx6zkelxaztb1du.webp\" alt=\"Illustrative image\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nA modern full stack **form builder application** built with the latest technologies in the React ecosystem. Users can create, customize, preview, and share responsive forms through an intuitive drag-and-drop interface.\n\n## About the Project\n\nThis project was developed by following a 4-hour full-stack tutorial, using the latest features of the Next.js App Router. It allows users to design and publish interactive forms with layout and input elements, track submissions, and view detailed stats.\n\n## Tech Stack\n\nThis project leverages the following tools and technologies:\n\n- [Next.js 13+ (App Router)](https://nextjs.org/)\n- [React](https://react.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [DnD Kit](https://dndkit.com/)\n- [Supabase](https://supabase.com/) / [Vercel PostgreSQL](https://vercel.com/postgres)\n- [Prisma ORM](https://www.prisma.io/)\n\n## Features\n\n- **Responsive design**\n- **Drag and drop form designer** (powered by DnD-kit)\n- Layout fields: Title, Subtitle, Paragraph, Spacer, Separator\n- orm fields: Text, Number, Select, Date, Checkbox, Textarea\n- **Form preview dialog**\n- **Sharable form URLs**\n- **Form submission with validation**\n- **Form statistics** (submissions \u0026 visits tracking)\n- Easy to customize and add new fields\n\n## Setup \u0026 Installation\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/pedroestevaodev/form-builder-nextjs.git\ncd form-builder-nextjs\n```\n\n### 2. Install dependencies\n\n```bash\n$ bun install\n```\n\n### 3. Environment Variables\n\nCreate a `.env.local` file in the root and configure the following variables:\n\n```bash\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\"tobemodified\"\nCLERK_SECRET_KEY=\"tobemodified\"\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=\"/sign-in\"\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=\"/sign-up\"\nNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=\"/\"\nNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=\"/\"\nDATABASE_URL=\"tobemodified\"\n```\n\n### 4. Start the development server\n\n```bash\n$ bun run dev\n```\n\nOpen your browser and visit `http://localhost:3000` to see the project in action.\n\nYou can start editing the homepage by modifying the `app/layout.tsx` file. The browser will automatically update as you make changes to the code.\n\n## Resources\n\nTo learn more about the technologies used in this project, check out the following resources:\n\n- [Next.js Docs](https://nextjs.org/docs) - Learn more about Next.js features and APIs.\n- [Next.js Learn](https://nextjs.org/learn) - Interactive tutorial to learn Next.js.\n- [React Docs](https://pt-br.react.dev/learn) - Access the official React guide.\n- [Tailwind CSS Docs](https://tailwindcss.com/docs) - Learn how to use Tailwind CSS to style your application.\n- [Supabase Docs](https://supabase.com/docs) - Learn how to get up and running with Supabase through tutorials, APIs and platform resources.\n\n## Deploy\n\nThe easiest way to deploy your Next.js application is by using the [Vercel Platform](https://vercel.com/new), created by the developers of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n\u003e Make sure to set the environment variables in Vercel \u003e Settings \u003e Environment Variables.\n\n## License\n\nThis project is open source and available under the [MIT License](https://mit-license.org/).  \n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n**Built with ☕ by [Pedro Estevão](https://www.pedroestevao.com)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedroestevaodev%2Fform-builder-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedroestevaodev%2Fform-builder-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedroestevaodev%2Fform-builder-nextjs/lists"}