React Dynamic Form Renderer from JSON 🚀

A React application that dynamically renders forms based on a provided UI schema. Built with React, TypeScript, and Tailwind CSS.

Table of Contents

• Tech Stack
• File and Folder Structure
• Screenshots

Tech Stack

• React: A JavaScript library for building user interfaces.
• TypeScript: A superset of JavaScript that adds static typing to the language.
• Tailwind CSS: A utility-first CSS framework for building modern designs.

File and Folder Structure

.
├── public
├── src
│   ├── components
│   │   ├── elements
│   │   │   ├── Input.tsx
│   │   │   ├── Radio.tsx
│   │   │   ├── Select.tsx
│   │   │   ├── Switch.tsx
│   │   │   └── Toggle.tsx
│   │   ├── ElementRenderer.tsx
│   │   ├── ToolTip.tsx
│   │   └── UiComponents.tsx
│   ├── context
│   │   └── Provider.tsx  
│   ├── types
│   │   ├── component.ts
│   │   └── form.ts
│   ├── utils
│   │   └── parse-label.ts
│   ├── App.css
│   ├── App.tsx
│   └── index.tsx 
│  
│   
├── .gitignore
├── tailwind.config.js
├── package.json
└── README.md 

Deployed Link 🌐

Link to Project ⛓️

Screenshots 📷 & How to Use 🛠️

Provide JSON Schema:

• Upon accessing the application, you'll see a screen with a text bar on the left side.
• In the text bar, paste or provide your JSON schema for the form.

JSON Link

Generate Form:

• After providing the JSON schema, press the "Generate Form" button.
• On the right side, a form will be dynamically rendered based on the provided schema.

Complete the Form:

• The rendered form will contain fields based on the JSON schema.
• Fill in the required details using your preferences, for example, choose between Naples Style Pizza and New York Style Pizza.

Submit the Form:

• Once you have provided the necessary details, click the "Submit" button.
• After submission, a modal will appear displaying the JSON details of your order.

For Pasta Form Choose the JSON

Pasta JSON