Skip to content

phantomAA92/form-builder-test

Repository files navigation

Form Builder

A dynamic form builder application for creating user and client profiles and generating customized forms.

Features

  • Dashboard: Overview of forms, profiles, and statistics
  • Form Builder: Create and customize dynamic forms with various field types
  • Profile Manager: Manage user and client profiles with custom fields
  • Form Generator: Combine existing profiles with form templates to generate dynamic forms

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Install dependencies:
npm install
  1. Start development server:
npm run dev
  1. Build for production:
npm run build

Usage

Creating Forms

  1. Navigate to "Form Builder"
  2. Click "Create New Form"
  3. Add form fields with different types (text, email, select, etc.)
  4. Save your form

Managing Profiles

  1. Go to "Profile Manager"
  2. Click "Add New Profile"
  3. Choose profile type (Individual or Business)
  4. Add custom fields as needed
  5. Set profile status

Generating Forms

  1. Visit "Form Generator"
  2. Select a profile and form template
  3. Preview the generated form
  4. Save or download the result

Technology Stack

  • React 19
  • Material-UI (MUI)
  • Vite
  • React Router
  • React Hook Form
  • Local Storage for data persistence

Project Structure

src/
├── components/          # Reusable UI components
├── pages/              # Application pages
├── app.jsx            # Main app component
├── main.jsx           # Entry point
└── global.css         # Global styles

Data Storage

The application uses browser localStorage to persist:

  • Form templates
  • User/client profiles
  • Generated forms
  • Application statistics

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

License

MIT License

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages