https://github.com/radzhiv25/frontend-assignment
preview JSON in dynamic forms
https://github.com/radzhiv25/frontend-assignment
react tailwindcss vercel vite
Last synced: 3 months ago
JSON representation
preview JSON in dynamic forms
- Host: GitHub
- URL: https://github.com/radzhiv25/frontend-assignment
- Owner: radzhiv25
- Created: 2023-11-21T17:14:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-27T08:32:27.000Z (over 2 years ago)
- Last Synced: 2025-03-14T12:34:32.550Z (over 1 year ago)
- Topics: react, tailwindcss, vercel, vite
- Language: JavaScript
- Homepage: https://preview-schema.vercel.app
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Frontend Assignment
## Discover the Edge 🚀
Create dynamic forms in React with using JSON Schema. Define form elements, validations, and dependencies in a structured JSON format. Utilize React components to dynamically render the form based on the JSON schema, enabling a flexible and maintainable way of creating dynamic forms using this react application.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Getting Started](#getting-started)
- [Tech Stack Used](#tech-stack-used)
- [React + Vite](react-+-vite)
## Introduction
Effortlessly implement dynamic forms in React by leveraging JSON Schema. Craft structured schemas with form elements, validations, and dependencies, allowing seamless rendering through React components. Using this application create amazing form with your own customizations and configurations in the application code.
## Features
- **JSON Schema Editor**: Enter the JSON Schema to see the power of dynamic form rendering.
- **Preview**: Preview the form created using the JSON.
- **Responsive Design**: Tailored for laptops, tablets, and mobile devices, ensuring a smooth experience across all platforms.
## Getting Started
To get started with repository, follow the installation and usage instructions in the project's documentation.
1. Clone the repository to your local machine:
```bash
git clone https://github.com/radzhiv-25/Frontend-Assignment.git
```
2. Install the required dependencies:
```bash
cd frontend-assignment
npm install
```
3. Configure the environment variables, including API keys and settings.
4. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
5. Open [http://localhost:5173](http://localhost:5173/) with your browser to see the result.
6. Start exploring the JSON Editor with preview.
## Tech Stack Used
- React
- TailwindCSS
- Vite
- Vercel
## React + Vite ✅
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh