Live Website: https://frontend-assignment-delta-one.vercel.app/
You have to create a React application that will allow users to paste a UI schema on the left side and preview the rendered form on the right-hand side. The application will have a single screen which will be divided into two equal sections next to each other. On the left section will be a JSON editor to paste the UI-Schema. On the right section, a form will be automatically rendered based on the pasted UI-Schema.
Example form JSON Schema 1: https://drive.google.com/file/d/1RUU_ueF9BbQRLReuX88w8PWe2jsz3Z3C/view
Example form JSON Schema 2: https://drive.google.com/file/d/19_E6dSDUbiDR31wNSSvUARHxh1HeT6L4/view
Frontend: React, JavaScript, Chakra UI
The React application will have two main components: the JSON editor component and the form preview component. The JSON editor component will allow users to paste the UI-Schema in JSON format on the left-hand side. The form preview component will automatically render the form based on the pasted UI-Schema and display it on the right-hand side.
- Ability to detect changes in the pasted JSON and update the form preview component in real-time.
- Validation of the UI-Schema to ensure that it follows the required structure and properties.
- Automatically render the form based on the pasted UI-Schema.
- Dynamically update the form based on changes in the UI-Schema in the JSON editor component.
- Handle different field types such as text input, radio, switch, group, etc., and render them accordingly with their respective properties.
- Handle nested fields inside groups and show/hide them based on the user's interaction with the form.
- Show tooltips for fields with descriptions when hovered.
- Handle form submissions and show the form data to the user which is going to send to the backend using the jsonKey values as keys and the entered values as values.
These instructions will help you set up and run the project on your local machine for development and testing purposes.
- Node.js (v14.x.x or higher recommended)
- npm (v6.x.x or higher recommended)
1. Clone the repository
git clone https://github.com/krishna050702/Frontend-Assignment.git
2. Install dependencies
cd Frontend-Assignment
npm install
3. Start the development server
npm start
This will run the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.