JSON Schema Builder

This is a React-based web application that allows users to dynamically build and visualize JSON Schemas. Built with ShadCN UI and React Hook Form, this tool provides a clean, responsive interface for constructing complex JSON structures interactively.

---

🔧 Features

• ✅ Add, edit, and delete fields dynamically
• ✅ Supported field types: String, Number, and Nested
• ✅ Fully supports recursive nested fields
• ✅ Real-time JSON preview based on user input
• ✅ Built using React, TailwindCSS, and ShadCN UI for a modern and responsive UI

---

📦 Tech Stack

• React (with Vite)
• Tailwind CSS
• ShadCN UI (headless UI components)
• React Hook Form (for dynamic form management)

---

📸 Live Demo

🔗 View Live App

🚀 Getting Started

1️⃣ Clone the repo

git clone https://github.com/Ayush2911ojha/HROne_frontend_task.git

cd HROne_frontend_task

2. Install dependencies

npm install npm run dev

The app will run on http://localhost:3000

📁 Project Structure

src/ ├── components/ # Reusable UI Components │ ├── FieldEditor.jsx │ ├── JSONPreview.jsx │ ├── pages/ │ └── JSONBuilder.jsx # Main Page │ ├── utils/ │ └── BuildJSON.js # Utility for JSON generation │ └── App.jsx

✅ Task Compliance

• Dynamic field management (add/edit/delete)
• Nested field support
• Real-time JSON preview
• Hosted + GitHub repo ready