{"id":21128837,"url":"https://github.com/d-d-roshan/dynamic-form-generator","last_synced_at":"2026-04-13T06:03:06.700Z","repository":{"id":263431771,"uuid":"890384380","full_name":"D-D-Roshan/Dynamic-Form-Generator","owner":"D-D-Roshan","description":"A dynamic form generator that takes a JSON schema and generates a styled, functional form in real-time.","archived":false,"fork":false,"pushed_at":"2024-11-18T14:56:49.000Z","size":208,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T06:08:08.925Z","etag":null,"topics":["jest","playwright","reactjs","tailwind-css","typescript","vite"],"latest_commit_sha":null,"homepage":"https://form-generator-rd.netlify.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/D-D-Roshan.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}},"created_at":"2024-11-18T13:31:54.000Z","updated_at":"2024-11-18T14:58:02.000Z","dependencies_parsed_at":"2024-11-18T15:16:04.223Z","dependency_job_id":"182bb324-5b2a-4401-acff-82404e906c1e","html_url":"https://github.com/D-D-Roshan/Dynamic-Form-Generator","commit_stats":null,"previous_names":["d-d-roshan/dynamic-form-generator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/D-D-Roshan%2FDynamic-Form-Generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/D-D-Roshan%2FDynamic-Form-Generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/D-D-Roshan%2FDynamic-Form-Generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/D-D-Roshan%2FDynamic-Form-Generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/D-D-Roshan","download_url":"https://codeload.github.com/D-D-Roshan/Dynamic-Form-Generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243573466,"owners_count":20312883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["jest","playwright","reactjs","tailwind-css","typescript","vite"],"created_at":"2024-11-20T05:10:26.740Z","updated_at":"2026-04-13T06:03:01.675Z","avatar_url":"https://github.com/D-D-Roshan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dynamic-Form-Generator\nA dynamic form generator that takes a JSON schema and generates a styled, functional form in real-time.\n## Live Application\n\n[View the live application](https://form-generator-rd.netlify.app/) \n\n## Images\n\nHere are some images that showcase the app in action:\n\n### Screenshot of the Form Generator Interface\n\n![Form Generator Interface](https://github.com/D-D-Roshan/Dynamic-Form-Generator/blob/main/images/Screenshot%20(147).png)\n\n\n### Screenshot of the JSON Schema Editor\n\n![JSON Schema Editor](https://github.com/D-D-Roshan/Dynamic-Form-Generator/blob/main/images/Screenshot%20(148).png)\n\n## Tech Stack\n\u003cdiv align=\"center\"\u003e\n\u003cimg align=\"center\" height=\"75\" width=\"75\" src=\"https://skillicons.dev/icons?i=typescript\"/\u003e\n\u003cimg align=\"center\" height=\"75\" width=\"75\" src=\"https://skillicons.dev/icons?i=react\"/\u003e\n\u003cimg align=\"center\" height=\"75\" width=\"75\" src=\"https://skillicons.dev/icons?i=vite\"/\u003e\n\u003cimg align=\"center\" height=\"75\" width=\"75\" src=\"https://skillicons.dev/icons?i=jest\"/\u003e\n\u003cimg align=\"center\" height=\"75\" width=\"75\" src=\"https://skillicons.dev/icons?i=tailwind\"/\u003e\n\u003c/div\u003e\n\nHere’s a step-by-step guide on how to set up your project in a GitHub repository, including a `README.md` file with the necessary sections. We will also cover how to deploy your app on Vercel or Netlify.\n\n### Step 1: Create the GitHub Repository\n1. Go to GitHub and log in to your account.\n2. Click on the **+** icon in the top right corner and select **New repository**.\n3. Name your repository (e.g., `form-generator`).\n4. Add a description (optional).\n5. Choose to make the repository **public** or **private**.\n6. Initialize the repository with a **README.md** file and select **MIT License** if needed.\n7. Click **Create repository**.\n\n### Step 2: Clone the Repository Locally\nOnce the repository is created, clone it to your local machine.\n\n```bash\ngit clone https://github.com/D-D-Roshan/Dynamic-Form-Generator.git\ncd Dynamic-Form-Generato\n```\n\n### Step 3: Add Your Code\n- Create a folder `src` and place your React code inside.\n- If you're using Vite, ensure your `index.html` and `main.tsx` are set up correctly.\n\n### Step 4: Set Up the Project\n1. In your project directory, initialize it with npm if not done already:\n\n```bash\nnpm init -y\n```\n\n2. Install required dependencies, including React, ReactDOM, and TailwindCSS:\n\n```bash\nnpm install react react-dom\nnpm install tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\n3. Set up `tailwind.config.js` and add the following content:\n\n```js\nmodule.exports = {\n  content: [\"./src/**/*.{html,js,jsx,ts,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\n4. Configure `postcss.config.js`:\n\n```js\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n```\n\n5. Add TailwindCSS to your CSS:\n\n```css\n/* src/index.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n6. Set up Vite if you're using it for development:\n\n```\nnpm install vite\n```\n\nCreate a `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n});\n```\n\n### Step 5: Push the Project to GitHub\nAfter your project is set up and working locally, commit the changes and push them to your GitHub repository.\n\n```bash\ngit add .\ngit commit -m \"Initial commit\"\ngit push origin main\n```\n\n### Step 6: Add a README.md\n\nCreate a `README.md` file in the root of your project with the following content:\n\n```markdown\n# Form Generator\n\nForm Generator is a React-based web application that allows users to dynamically create forms based on a JSON schema. The app validates the JSON schema and provides an interactive form generator, where users can fill out forms based on the schema.\n\n## Setup Instructions\n\nTo set up this project locally, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/D-D-Roshan/Dynamic-Form-Generator.git\n   cd Dynamic-Form-Generator\n   ```\n\n2. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Run the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n4. The application will be available at `http://localhost:5173`.\n\n## Example JSON Schemas\n\n### Simple Contact Form\n```json\n{\n  \"formTitle\": \"Contact Form\",\n  \"formDescription\": \"Please fill out the form below.\",\n  \"fields\": [\n    {\n      \"id\": \"name\",\n      \"type\": \"text\",\n      \"label\": \"Full Name\",\n      \"required\": true,\n      \"placeholder\": \"Enter your name\"\n    },\n    {\n      \"id\": \"email\",\n      \"type\": \"email\",\n      \"label\": \"Email\",\n      \"required\": true,\n      \"placeholder\": \"Enter your email\"\n    }\n  ]\n}\n```\n\n### Feedback Form\n```json\n{\n  \"formTitle\": \"Feedback Form\",\n  \"formDescription\": \"We would love to hear your feedback.\",\n  \"fields\": [\n    {\n      \"id\": \"rating\",\n      \"type\": \"select\",\n      \"label\": \"Rating\",\n      \"required\": true,\n      \"options\": [\n        { \"value\": \"1\", \"label\": \"1 Star\" },\n        { \"value\": \"2\", \"label\": \"2 Stars\" },\n        { \"value\": \"3\", \"label\": \"3 Stars\" },\n        { \"value\": \"4\", \"label\": \"4 Stars\" },\n        { \"value\": \"5\", \"label\": \"5 Stars\" }\n      ]\n    },\n    {\n      \"id\": \"comments\",\n      \"type\": \"textarea\",\n      \"label\": \"Comments\",\n      \"placeholder\": \"Enter your feedback\"\n    }\n  ]\n}\n```\n\n## Local Development Guide\n\n1. Install dependencies with `npm install`.\n2. Run the development server with `npm run dev`.\n3. The app will be live on `http://localhost:3000`.\n\n## Deployment\n\nYou can deploy this project using either [Vercel](https://vercel.com/) or [Netlify](https://netlify.com).\n\n### Deploy with Vercel\n\n1. Push your code to GitHub.\n2. Go to [Vercel](https://vercel.com) and log in.\n3. Click **New Project** and import your GitHub repository.\n4. Vercel will automatically configure the deployment. Click **Deploy**.\n\n### Deploy with Netlify\n\n1. Push your code to GitHub.\n2. Go to [Netlify](https://www.netlify.com/) and log in.\n3. Click **New site from Git** and connect to your GitHub repository.\n4. Netlify will automatically detect the build settings. Click **Deploy Site**.\n\n## Live Application\n\n[View the live application](https://form-generator-rd.netlify.app/) \n\n## Contact\n\n\u003cdiv\u003e\n\u003ca href=\"https://www.facebook.com/roshan.d.942145\"\u003e\n\u003cimg width=\"100\" height=\"100\" src=\"https://user-images.githubusercontent.com/74038190/235294010-ec412ef5-e3da-4efa-b1d4-0ab4d4638755.gif\" target=\"_blank\"/\u003e\n\u003c/a\u003e \n\u003ca href=\"https://discord.com/invite/M8he9HxQ\"\u003e\n\u003cimg width=\"100\" height=\"100\" src=\"https://user-images.githubusercontent.com/74038190/235294015-47144047-25ab-417c-af1b-6746820a20ff.gif\" target=\"_blank\"/\u003e\n\u003c/a\u003e \n\u003ca href=\"https://www.linkedin.com/in/d-d-roshan\"\u003e\n\u003cimg width=\"100\" height=\"100\" src=\"https://user-images.githubusercontent.com/74038190/235294012-0a55e343-37ad-4b0f-924f-c8431d9d2483.gif\" target=\"_blank\"/\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://www.instagram.com/d_roshan_official\"\u003e\n\u003cimg width=\"100\" height=\"100\" src=\"https://user-images.githubusercontent.com/74038190/235294013-a33e5c43-a01c-43f6-b44d-a406d8b4ab75.gif\" target=\"_blank\"/\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://github.com/D-D-Roshan/D-D-Roshan\"\u003e\n\u003cimg width=\"100\" height=\"100\" src=\"https://img.icons8.com/?size=100\u0026id=akG4VRhAoSii\u0026format=png\u0026color=000000\" target=\"_blank\"/\u003e\n\u003c/a\u003e \n\u003c/div\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-d-roshan%2Fdynamic-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd-d-roshan%2Fdynamic-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-d-roshan%2Fdynamic-form-generator/lists"}