Dynamic Form & Data Grid Application

This project is a React application built with Vite, demonstrating a Dynamic Form Builder and a Data Grid with advanced features.

Features Implemented

1. Dynamic Form Builder

• Dynamic Field Definition: Users can add, edit, and remove form fields dynamically.
• Supported Field Types:
  • Text Input
  • Number Input
  • Date Picker
  • Dropdown Select
• Live Preview: Real-time preview of the form as it is being built.
• Customization:
  • Background Color & Patterns (Solid, Dots, Grid, Lines).
  • Text Color Customization.
• Backend Integration (Bonus): Includes a simulated backend fetch (fetchFormSchema in services/api.ts) to load form schemas dynamically, mimicking a Firebase integration.

2. Data Grid

• Data Source: Fetches 500 records from the JSON Placeholder API (https://jsonplaceholder.typicode.com/comments).
• Filtering: Real-time search functionality across Name, Email, and Body fields.
• Sorting: Clickable column headers to sort data in Ascending/Descending order.
• Pagination:
  • Client-side pagination.
  • Adjustable page size (10, 25, 50, 100 records per page).
  • Next/Previous navigation.

Tech Stack

• Framework: React + Vite
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Custom UI components (based on shadcn/ui design patterns)
• Icons: Lucide React

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev