Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vidhi2604/form-generator


https://github.com/vidhi2604/form-generator

dynamicformgenerator jest-tests playwright react typescript

Last synced: 11 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Dynamic Form Generator React App



A React-based dynamic form generator that allows users to create, edit, and interact with forms in real time using a JSON schema editor. This project includes advanced features like dark mode support, form validation preview, JSON manipulation, and submission downloads.



## 🚀 Features

1. Dynamic Form Generation



- Users can define form fields using a JSON schema.

- Supports various field types (text, email, radio, textarea, etc.).

- Real-time updates: Form automatically reflects changes made in the JSON editor.



2. Form validation review



- Built-in validation using Zod for required fields, custom patterns, and more.

- Shows error messages for invalid or missing inputs.



3. Dark mode support



- Toggle between light and dark themes for better accessibility and user preference.

  

4."Copy Form JSON" Button



- Quickly copy the current form's JSON schema to the clipboard with a single click.



5. Download Form Submissions



- Save all form submissions as a JSON file.

- The download button is enabled only when the form has been successfully filled and submitted.



6. Responsive Layout



- Mobile-friendly UI with responsive design for optimal usability across devices.



## ⚙️ Installation

1. Clone the repository :

- `git clone [email protected]:Vidhi2604/form-generator.git`

- `cd form-generator`



2. Install dependencies :

- `npm install`

3. Strat the development server :

- `npm start`

4. Run tests :

- `npm test`



## 🛠️ Usage

 1. JSON Schema Editor



- Modify the JSON schema in the editor on the left-hand side of the app.

- The form on the right-hand side updates in real time to reflect changes.

2. Submit Form



- Fill out the form and submit it.

- Validates required fields and shows error messages for invalid entries.

 3. Copy JSON



- Use the "Copy Form JSON" button to copy the current JSON schema to your clipboard.

 4. Download Submission



- Submissions can be downloaded as a .json file. The download button is enabled only after the form has been submitted.

5. Dark Mode



- Toggle the dark mode for a better user experience in low-light environments.



## 🧪 Tests



This project includes E2E tests written with Playwright to ensure the following functionalities work as expected:



1. JSON Editor and Form Rendering: Ensures both the JSON editor and form are visible on the page.

2. Real-Time Form Updates: Verifies the form updates based on changes made in the JSON schema.

3. Form Validation: Tests error messages for required fields.

4. Successful Form Submission: Confirms the form submits successfully with valid data.

5. Responsive Layout: Checks for proper layout on smaller screens.



- Run tests with :

     `npx playwright test`



## 🖌️ Customization



You can customize the default JSON schema, form styles, and validation logic by modifying the following files:



- Default schema: `App.tsx`

- Styles: `App.css` (uses Tailwind CSS)

- Validation: `utils/validation.ts`



## 👩‍💻 Contributors



- Vidhi sahai [GitHub Profile](https://github.com/Vidhi2604)



## 🌟 Acknowledgments



- [React Hook Form](https://react-hook-form.com/)

- [Zod](https://github.com/colinhacks/zod)

- [Playwright](https://playwright.dev/)

  

Feel free to contribute or raise issues for new features or bugs! 😊



## ✔ Deployment



Depoyed with netlify.

[Check Here](https://form-generator-vs.netlify.app/)