orafaelfragoso / torc-test

Dynamic Form with React, TypeScript, Tailwind CSS, and DaisyUI

Dynamic Form with React, TypeScript, Tailwind CSS, and DaisyUI

A dynamic form project built with React, TypeScript, Tailwind CSS, and DaisyUI, allowing users to create and submit data through a customizable form.

Table of Contents

• Project Overview
• Folder Structure
• Getting Started
  • Prerequisites
  • Installation
  • Available Scripts
• Usage
• Styling
• Contributing

Project Overview

This project demonstrates how to create a dynamic form in React with TypeScript. It features a flexible configuration system for form fields and leverages Tailwind CSS for styling, along with the additional utility classes provided by DaisyUI. The form state is managed using the Context API to make it accessible from any component within the application.

Folder Structure

The project's folder structure is organized as follows:

• src/: Contains the source code for the application.
  • components/: Houses the DynamicForm.tsx component and any other custom components.
  • App.tsx: The main application component where the form configuration is defined.
  • main.tsx: The entry point of the React application.
  • index.css: Contains global styles and imports Tailwind CSS.
• public/: Contains public assets and the HTML template for the application.
• tsconfig.json: TypeScript configuration file.
• package.json: Node.js package file.
• ...: Other project configuration files.

Getting Started

Follow these steps to get the project up and running on your local machine.

Prerequisites

Before you begin, ensure you have the following prerequisites installed on your system:

• Node.js: https://nodejs.org/

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/your-username/dynamic-form.git
   cd dynamic-form

2. Install the project dependencies using npm:

   npm install
   

Available Scripts

In the project directory, you can run the following commands:

• npm start: Starts the development server and opens the app in your default browser.
• npm test: Launches the test runner in interactive watch mode.
• npm run build: Builds the app for production to the build folder.

Usage

1. Edit the form configuration in the src/App.tsx file. Define the fields, labels, types, and options as needed.
2. Start the development server using npm start. The application should open in your browser.
3. Access the form, complete it, and submit data. The submitted data will be displayed on the page.

Styling

The project uses Tailwind CSS and DaisyUI for styling. You can further customize the styles by modifying the tailwind.config.js file and adding Tailwind CSS classes to your components.

Contributing

Contributions to this project are welcome. If you find a bug or have suggestions for improvements, please open an issue or submit a pull request.