Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/radzhiv25/frontend-assignment
https://github.com/radzhiv25/frontend-assignment
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/radzhiv25/frontend-assignment
- Owner: radzhiv25
- Created: 2023-11-21T17:14:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-27T08:32:27.000Z (about 1 year ago)
- Last Synced: 2023-11-28T06:40:33.073Z (about 1 year ago)
- 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