Digital Form

A modern, responsive React application for building and managing digital forms with a drag-and-drop interface.

Features

🔐 Authentication

• JWT-based authentication system
• Login/logout functionality
• Protected routes
• User role management (Admin/User)

📊 Dashboard

• Project overview with statistics
• Recent projects display
• Quick action buttons
• Performance metrics

🏗️ Project Management

• Create new form projects
• Manage existing projects
• Project categorization
• Status tracking (Active/Draft/Archived)

🎨 Form Builder

• Drag-and-drop form field creation
• Real-time form preview
• Field customization (labels, placeholders, validation)
• Multiple field types:
  • Text fields
  • Email inputs
  • Number inputs
  • Text areas
  • Select dropdowns
  • Radio buttons
  • Checkboxes
  • Date pickers

📋 Template System

• Pre-built form templates
• Template categories
• Star/favorite templates
• Import/export functionality

🎨 Theme System

• Light/Dark mode toggle
• Consistent design system
• Responsive design
• Modern UI components

🌐 Internationalization Ready

• i18n structure in place
• Localization support ready

Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Drag & Drop: @dnd-kit
• Forms: React Hook Form + Yup validation
• Routing: React Router v6
• Icons: Lucide React
• UI Components: Custom components with Headless UI

Project Structure

/digital-form
├── public/
├── src/
│   ├── assets/
│   ├── components/       # Reusable UI components
│   ├── features/
│   │   ├── auth/         # Authentication system
│   │   ├── project/      # Project management
│   │   ├── templates/    # Template management
│   │   └── form-builder/ # Drag and drop form builder
│   ├── hooks/            # Custom React hooks
│   ├── layout/           # Layout components
│   ├── lib/              # Utilities and helpers
│   ├── routes/           # Route configuration
│   ├── services/         # API services
│   ├── store/            # State management
│   ├── styles/           # Global styles
│   ├── i18n/             # Internationalization
│   ├── theme/            # Theme provider
│   ├── data/             # Mock data
│   ├── App.tsx
│   └── main.tsx
├── tailwind.config.js
├── vite.config.ts
└── package.json

Getting Started

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd digital-form

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:3000

Demo Credentials

Admin User:

• Email: [email protected]
• Password: password

Regular User:

• Email: [email protected]
• Password: password

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Features Overview

1. Authentication Flow

• Login page with demo credentials
• JWT token management
• Protected route system
• User context throughout the app

2. Dashboard

• Project statistics and metrics
• Recent projects overview
• Quick action buttons
• Responsive grid layout

3. Project Management

• Create new projects with basic info
• Manage existing projects
• Search and filter functionality
• Project status management

4. Form Builder

• Drag-and-drop field palette
• Real-time form preview
• Field customization panel
• Form validation setup
• Save/load functionality

5. Template System

• Browse pre-built templates
• Template categories and tags
• Star/favorite system
• Import/export capabilities

Customization

Adding New Field Types

1. Add the field type to the FormFieldData interface
2. Update the field palette with the new type
3. Add rendering logic in FormField and FormPreview components
4. Update validation rules if needed

Styling

• Uses Tailwind CSS for styling
• Custom design system with consistent colors
• Dark mode support
• Responsive design patterns

API Integration

• Mock API service included
• Easy to replace with real backend
• RESTful API patterns
• Error handling structure

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.

Future Enhancements

• [ ] Real backend API integration
• [ ] Form response analytics
• [ ] Advanced field validation
• [ ] Form sharing and collaboration
• [ ] Export to PDF/Word
• [ ] Advanced theming options
• [ ] Form versioning
• [ ] Conditional logic
• [ ] File upload fields
• [ ] Payment integration
• [ ] Multi-language support
• [ ] Advanced permissions
• [ ] Form analytics dashboard
• [ ] Webhook integrations
• [ ] Mobile app support