An-Najah National University Faculty of Engineering & Information Technology Department of Computer Engineering Formax - Advanced Form Builder and Management System A Web-Based Platform for Dynamic Form Creation and Data Collection Prepared By: Hadi Irshaid Zahi Abu Shalbak Supervised By: Dr. Ashraf Armoush Academic Year: 2025–2026 Date: January 2026 A Graduation Project submitted to the Department of Computer Engineering in partial fulfillment of the requirements for the degree of B.Sc. in Computer Engineering Najah National University Abstract This project presents Formax, a modern web-based form management system designed to streamline the process of creating, distributing, and analyzing digital forms. Built using Next.js, React, and TypeScript, Formax offers an intuitive drag-and-drop interface for form creation, advanced conditional logic capabilities, and real-time data visualization. The system addresses the growing need for flexible and intelligent form solutions in var- ious sectors including education, business, and research. Key features include workspace management, multi-question type support, workflow visualization using React Flow, conditional logic jumps, welcome and ending screens, multilingual support (English, Arabic), and comprehensive response analytics. The application follows modern software engineering practices including component- based architecture, state management using Context API and TanStack Query, re- sponsive design principles, and RESTful API integration. Performance optimizations include debounced auto-save, lazy loading, and smart caching strategies. User testing demonstrated the system’s effectiveness in reducing form creation time by approximately 60% compared to traditional methods while providing advanced features typically found only in premium commercial solutions. The platform successfully handles complex form workflows and provides actionable insights through its analytics dashboard. Keywords: Form Builder, Web Application, Conditional Logic, Data Collection, React, Next.js, Workflow Visualization. I Acknowledgment We would like to begin by expressing our heartfelt gratitude to everyone who has con- tributed to the success of this project. First and foremost, we extend our deepest thanks to our families, who have been our unwavering source of psychological support throughout our college journey. Their encouragement has been invaluable. We are also profoundly grateful to our second family in the Computer Engineering Department, including all the teaching assistants and professors. Their guidance, sup- port, and dedication have been instrumental in helping us achieve success and excellence. A special and sincere thanks goes to our supervisor, Dr. Ashraf Armoush, for his con- stant advice, guidance, and support whenever we needed it. His mentorship has been an essential part of our journey. II Table of Contents Abstract I Acknowledgment II Table of Contents III List of Figures VII List of Tables VIII List of Acronyms IX 1 Introduction 1 1.1 Background and Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.2 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3.1 Primary Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3.2 Secondary Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4 Scope and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4.1 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4.2 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.5 Report Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2 Literature Review 5 2.1 Introduction to Form Builders . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2 Existing Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.1 Google Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.2 Typeform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.3 Microsoft Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 III 2.2.4 JotForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.3 Related Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.1 React and Next.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.2 React Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.3 State Management Solutions . . . . . . . . . . . . . . . . . . . . . . 8 2.4 Research Gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3 System Analysis and Requirements 9 3.1 Requirements Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.1.1 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . 10 3.1.2 Non-Functional Requirements . . . . . . . . . . . . . . . . . . . . . 12 3.2 Use Case Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.2.1 Primary Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.2.2 Key Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4 System Design and Architecture 15 4.1 System Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.1.1 Overall Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.1.2 Component Architecture . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2 Technology Stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3 Database Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.1 Entity Relationship Overview . . . . . . . . . . . . . . . . . . . . . 17 4.3.2 Data Models (Illustrative) . . . . . . . . . . . . . . . . . . . . . . . 17 4.4 User Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.4.1 Design Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.4.2 Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.4.3 Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.5 API Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.5.1 RESTful Endpoints (Representative) . . . . . . . . . . . . . . . . . 19 4.6 State Management Architecture . . . . . . . . . . . . . . . . . . . . . . . . 20 4.6.1 Context Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 4.7 Security Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.7.1 Authentication Flow . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.7.2 Authorization and Data Protection . . . . . . . . . . . . . . . . . . 21 IV 5 Implementation 22 5.1 Development Environment Setup . . . . . . . . . . . . . . . . . . . . . . . 23 5.2 Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.3 Key Features Implementation . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.3.1 Form Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.3.2 Mobile View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.3.3 Question Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.3.4 Conditional Logic and Workflow . . . . . . . . . . . . . . . . . . . . 26 5.3.5 Welcome and Ending Screens . . . . . . . . . . . . . . . . . . . . . 28 5.3.6 Public Form Experience . . . . . . . . . . . . . . . . . . . . . . . . 29 5.3.7 Workspace and Forms Management . . . . . . . . . . . . . . . . . . 31 5.3.8 Analytics Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.3.9 Internationalization (i18n) . . . . . . . . . . . . . . . . . . . . . . . 32 5.4 Design Patterns Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.5 Performance Optimizations . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.6 Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 6 Results and Discussion 34 6.1 System Performance Analysis . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.2 Comparative Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.3 Limitations and Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.3.1 Current Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.3.2 Technical Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.4 Success Metrics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.4.1 Achievement of Objectives (Summary) . . . . . . . . . . . . . . . . 36 6.5 Lessons Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.5.1 Technical Lessons . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.5.2 Project Management Lessons . . . . . . . . . . . . . . . . . . . . . 36 7 Conclusion and Future Work 37 7.1 Project Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 7.2 Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 7.2.1 Technical Contributions . . . . . . . . . . . . . . . . . . . . . . . . 38 7.2.2 Practical Contributions . . . . . . . . . . . . . . . . . . . . . . . . . 38 7.3 Future Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 V 7.3.1 Short-term (3–6 months) . . . . . . . . . . . . . . . . . . . . . . . . 38 7.3.2 Medium-term (6–12 months) . . . . . . . . . . . . . . . . . . . . . . 39 7.3.3 Long-term (12+ months) . . . . . . . . . . . . . . . . . . . . . . . . 39 7.4 Acknowledgment of Limitations . . . . . . . . . . . . . . . . . . . . . . . . 39 References 40 VI List of Figures 4.1 Color palette visualization. . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.1 Form builder (desktop). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.2 Form builder (mobile). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.3 Workflow canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.4 Workflow node types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.5 Connection dialog. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.6 Welcome screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.7 Ending screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.8 Public form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.9 Public form (mobile). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.10 Analytics dashboard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 VII List of Tables 2.1 Comparison of existing form builder solutions (high-level). . . . . . . . . . 7 4.1 Frontend technology stack. . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 6.1 Feature comparison matrix (illustrative). . . . . . . . . . . . . . . . . . . . 35 VIII List of Acronyms API Application Programming Interface CSR Client-Side Rendering DB Database DFD Data Flow Diagram E2E End-to-End ERD Entity Relationship Diagram FCP First Contentful Paint JWT JSON Web Token LCP Largest Contentful Paint NFR Non-Functional Requirement RBAC Role-Based Access Control REST Representational State Transfer RTL Right-to-Left SSR Server-Side Rendering TBT Total Blocking Time UI User Interface UX User Experience WCAG Web Content Accessibility Guidelines WYSIWYG What You See Is What You Get XSS Cross-Site Scripting IX Chapter 1 Introduction 1 1.1 Background and Motivation In the digital age, forms serve as the primary interface for data collection across numerous domains. Traditional form solutions often lack flexibility, require technical expertise, or come with prohibitive costs. Organizations need tools that combine ease of use with powerful features like conditional logic, multi-language support, and detailed analytics. Current market solutions present several challenges: • Limited customization options • Complex conditional logic implementation • Poor user experience on mobile devices • Lack of workflow visualization • Limited integration capabilities • High subscription costs Formax was developed to address these challenges by providing an open-source, feature- rich alternative that democratizes access to advanced form building capabilities. 1.2 Problem Statement Organizations and individuals face several challenges when creating and managing forms: 1. Complexity: Creating forms with conditional logic may require programming knowledge. 2. Cost: Enterprise form solutions are expensive and inaccessible to small organiza- tions. 3. Flexibility: Existing free solutions often provide limited customization. 4. Visualization: Complex flows are difficult to understand without visual tools. 5. Analysis: Analytical capabilities may be limited or fragmented. 6. Accessibility: Weak multi-language support and inconsistent mobile responsive- ness. These problems result in increased development time, higher operational costs, poor user experience, limited data quality, and reduced response rates. 1.3 Objectives 1.3.1 Primary Objectives 1. Develop an intuitive, web-based form builder with drag-and-drop functionality. 2 2. Implement advanced conditional logic and workflow visualization. 3. Create a responsive design that works seamlessly across devices. 4. Provide comprehensive analytics and reporting capabilities. 5. Support multiple question types and validation rules. 6. Enable multi-language support (English, Arabic) including RTL support. 1.3.2 Secondary Objectives 1. Implement workspace management for team collaboration (with room for future member invitation). 2. Create welcome and ending screens to improve respondent experience. 3. Develop a public form viewing system with smooth animations. 4. Integrate modern UI/UX principles and motion design. 5. Ensure scalability and performance optimization. 6. Implement comprehensive error handling and validation. 1.4 Scope and Limitations 1.4.1 Scope This project encompasses: • A complete form builder interface with question management. • Workspace and form management. • Conditional logic engine with visual workflow representation. • Public form distribution and response collection. • Response analytics and visualization. • Multi-language interface (English, Arabic) with RTL support. • Welcome and ending screen customization. • Mobile and desktop responsive design. 3 1.4.2 Limitations The following are outside the project scope: • Payment processing integration. • Advanced team collaboration (real-time editing). • Form template marketplace. • Video recording capabilities. • Advanced file upload handling. • Email marketing integration. • Custom domain mapping. • White-label solutions. 1.5 Report Organization This report is organized into the following chapters: • Chapter 2: Literature Review • Chapter 3: System Analysis and Requirements • Chapter 4: System Design and Architecture • Chapter 5: Implementation • Chapter 6: Results and Discussion • Chapter 7: Conclusion and Future Work 4 Chapter 2 Literature Review 5 2.1 Introduction to Form Builders Form builders have evolved from simple HTML forms to sophisticated platforms offering conditional logic, integrations, and analytics. This chapter reviews the evolution and cur- rent state of form builder technology, with emphasis on usability, flexibility, and workflow comprehension. 2.2 Existing Solutions 2.2.1 Google Forms Strengths: • Free and accessible • Integration with Google Workspace • Simple interface • Automatic data collection to Google Sheets Weaknesses: • Limited customization • Basic conditional logic • No workflow visualization • Limited question types • Basic analytics 2.2.2 Typeform Strengths: • Modern, conversational interface • Strong user experience • Advanced logic jumps • High-quality designs Weaknesses: • Expensive pricing • Limited free tier • No explicit workflow visualization (as a full graph editor) • Proprietary solution 6 2.2.3 Microsoft Forms Strengths: • Integration with Microsoft 365 • Free for many Microsoft users • Branching logic • Quiz mode Weaknesses: • Limited to Microsoft ecosystem • Basic customization • Simple analytics • No visual workflow editor 2.2.4 JotForm Strengths: • Extensive features and templates • Payment integration options • Good customization Weaknesses: • Complex pricing • Performance issues with large forms • Cluttered interface • Limited free tier Table 2.1: Comparison of existing form builder solutions (high-level). Feature Formax Google Forms Typeform JotForm Conversational UI ✓ × ✓ × Logic Jumps ✓ Limited ✓ ✓ Workflow Visualization ✓ × × × RTL Support ✓ × Limited Limited Cost (typical) Free/Open Free Paid Paid 7 2.3 Related Technologies 2.3.1 React and Next.js React’s component-based architecture enables modular UI development and encourages reuse, while Next.js extends React with a production-grade framework offering routing, server-side rendering, image optimization, and API routes. These characteristics align with the requirements of an interactive form builder and a public respondent runtime. 2.3.2 React Flow React Flow supports node-based interfaces suitable for representing workflows. In For- max, it enables interactive canvas behavior, custom nodes and edges, event handling, and connectivity constraints for logic jumps. 2.3.3 State Management Solutions Formax uses a hybrid approach: • Local component state for ephemeral UI concerns. • Context API for cross-cutting feature state (builder, public runtime, workflow). • TanStack Query for server-state synchronization and caching. • React Hook Form for form input management and validation composition. 2.4 Research Gap The literature and market review highlights several gaps: 1. Lack of open-source solutions offering advanced features. 2. Limited availability of visual workflow editors in free tools. 3. Poor mobile UX among many feature-rich platforms. 4. Inconsistent multi-language and RTL support. 5. Limited customization for welcome/ending screens in free tiers. 6. Few solutions unify conversational runtime, workflow visualization, and analytics in one cohesive system. Formax addresses these gaps by offering an open, extensible platform with enterprise- grade features while maintaining usability and accessibility. 8 Chapter 3 System Analysis and Requirements 9 3.1 Requirements Analysis 3.1.1 Functional Requirements FR1: User Authentication and Authorization • User registration with email verification • Secure login system • Password recovery • Role-based access control • Session management FR2: Workspace Management • Create multiple workspaces • Workspace settings and customization • Member invitation (future feature) • Workspace deletion FR3: Form Management • Create, edit, delete, duplicate forms • View forms list with search and filters • Configure form title and settings FR4: Form Builder • Add/remove questions • Reorder questions via drag-and-drop • Configure question properties and validation rules • Add welcome screens • Add ending screens FR5: Question Types Supported question types: 1. Multiple Choice (single select) 2. Multiple Choice (multi-select) 3. Yes/No 10 4. Short Text 5. Long Text (future) 6. Rating Scale (future) 7. Date Picker (future) 8. File Upload (future) FR6: Conditional Logic • Create logic jumps between questions • Define conditions based on answers • Support multiple conditions (AND/OR) • Visual workflow representation • Jump to specific questions or endings • Fallback logic FR7: Form Distribution • Generate unique public URL • Share via link • Embed code generation • QR code generation • Social media sharing FR8: Response Collection • Capture responses in real time • Associate responses with forms • Store timestamps • Track completion status • Support partial submissions FR9: Analytics and Reporting • View response summary and question-wise breakdown • Export responses (CSV) 11 • Visual charts and graphs • Response rate tracking FR10: Multilingual Support • Interface in English, Arabic, French • RTL support for Arabic • Localized date/time formats • Translated error messages 3.1.2 Non-Functional Requirements NFR1: Performance • Page load time < 3 seconds • Builder interaction delay < 100 ms • Support 1000+ concurrent users (target) • Handle forms with 100+ questions • Auto-save within 1 second NFR2: Usability • Intuitive interface requiring minimal training • Responsive design for mobile/tablet/desktop • Accessibility compliance (WCAG 2.1 target) • Consistent UI components • Clear error messages NFR3: Security • HTTPS encryption • XSS prevention • CSRF protection • Injection prevention through validation and parameterized queries • Secure session management • Data encryption at rest (backend responsibility) 12 NFR4: Reliability • High availability target (e.g., 99.9%) • Auto-save to prevent data loss • Error recovery mechanisms and graceful degradation • Offline capability (future) NFR5: Scalability • Horizontal scaling capability • Efficient database queries • Caching strategies • CDN for static assets NFR6: Maintainability • Modular code structure • Comprehensive documentation • TypeScript for type safety • Consistent coding standards and linting 3.2 Use Case Diagrams 3.2.1 Primary Actors 1. Form Creator: Creates and manages forms and logic. 2. Form Respondent: Fills out public forms. 3. System Administrator: Manages platform-level concerns (optional). 3.2.2 Key Use Cases UC1: Create Form • Preconditions: User authenticated; workspace exists. • Flow: Navigate to forms → click Create → enter title → system creates form → redirect to builder. • Postconditions: Draft form created. UC2: Build Form 13 • Preconditions: Form exists. • Flow: Add questions → configure properties/validation → add logic jumps → cus- tomize welcome/ending → auto-save. • Postconditions: Form ready for distribution. UC3: Add Conditional Logic • Preconditions: Multiple questions exist. • Flow: Open workflow → connect nodes → define conditions → select destination → validate → save. • Postconditions: Logic rule active in workflow and runtime. UC4: Submit Form Response • Preconditions: Form is published and accessible. • Flow: Open public URL → welcome (optional) → answer sequentially → logic jumps apply → ending → store response. • Postconditions: Response visible in analytics. 14 Chapter 4 System Design and Architecture 15 4.1 System Architecture 4.1.1 Overall Architecture Formax follows a client-server architecture with the following layers: 1. Presentation Layer: Next.js/React frontend for builder and public runtime. 2. Application Layer: Next.js API routes (or an external backend) to expose REST endpoints. 3. Business Logic Layer: Context providers and custom hooks implementing work- flow and builder logic. 4. Data Access Layer: API clients and Axios interceptors handling authentication and requests. 5. Database Layer: Backend database storing users, workspaces, forms, fields, logic rules, and responses. 4.1.2 Component Architecture The application uses a component-based architecture: • Layout Components: Wrapping layouts for dashboard and public pages. • Page Components: Route-level components for workspaces, builder, workflow, share, results. • Feature Components: Reusable modules for form creation, workflow, analytics. • UI Components: Atomic design primitives built on Material-UI. • Context Providers: Global state containers. • Custom Hooks: Encapsulation of cross-component logic. 16 4.2 Technology Stack Table 4.1: Frontend technology stack. Technology Version Purpose Next.js 13.x React framework with routing, SSR/CSR hy- brid, optimizations React 18.x UI component library TypeScript 5.x Type-safe JavaScript Material-UI 5.x Component library and theming React Flow 12.x Workflow visualization and node-edge canvas Framer Motion 10.x Animation library TanStack Query 5.x Server state management and caching React Hook Form 7.x Form state management Axios 1.x HTTP client i18next 23.x Internationalization 4.3 Database Design 4.3.1 Entity Relationship Overview Key entities: • Users • Workspaces • Forms (Surveys) • Fields (Questions) • LogicRules • WelcomeScreens • Endings • Responses • Answers 4.3.2 Data Models (Illustrative) 1 Workspace { 2 id: number 3 name: string 4 createdAt: timestamp 5 updatedAt: timestamp 6 ownerId: number 17 7 } 8 9 Form { 10 id: number 11 title: string 12 slug: string 13 workspaceId: number 14 settings: json 15 createdAt: timestamp 16 updatedAt: timestamp 17 } 18 19 Field { 20 id: number 21 ref: string 22 type: enum (multiple_choice , yes_no , short_text) 23 title: string 24 order: number 25 properties: json 26 validation: json 27 formId: number 28 } 29 30 LogicRule { 31 id: number 32 ref: string 33 type: ’field ’ 34 actions: json 35 formId: number 36 } Listing 4.1: Illustrative data models (from project design). 4.4 User Interface Design 4.4.1 Design Principles 1. Consistency: Unified design language across all pages. 2. Simplicity: Minimal cognitive load for creators and respondents. 3. Feedback: Immediate response to user actions. 4. Accessibility: Targeting WCAG 2.1 compliance. 5. Responsiveness: Mobile-first and cross-device adaptation. 6. Progressive Disclosure: Reveal complexity only when needed. 4.4.2 Color Scheme • Primary: #D97706 (Orange) 18 • Secondary: #4B5563 (Gray) • Success: #10B981 (Green) • Warning: #F59E0B (Orange) • Error: #F87171 (Red) • Info: #DBEAFE (Blue) Figure 4.1: Color palette visualization. 4.4.3 Typography Font Family: Montserrat Arabic (supports English, Arabic) Heading scales (illustrative): • H1: 3.75rem / 60px • H2: 3rem / 48px • H3: 2.125rem / 34px • H4: 1.5rem / 24px • H5: 1.25rem / 20px • H6: 1rem / 16px 4.5 API Design 4.5.1 RESTful Endpoints (Representative) Authentication: • POST /api/auth/login • POST /api/auth/register • POST /api/auth/logout 19 • POST /api/auth/refresh • POST /api/auth/forgot-password Workspaces: • GET /api/workspaces • POST /api/workspaces • GET /api/workspaces/:id • PUT /api/workspaces/:id • DELETE /api/workspaces/:id Forms: • GET /api/workspaces/:workspaceId/surveys • POST /api/workspaces/:workspaceId/surveys • GET /api/workspaces/:workspaceId/surveys/:formId • PUT /api/workspaces/:workspaceId/surveys/:formId • DELETE /api/workspaces/:workspaceId/surveys/:formId Public Forms: • GET /api/public/surveys/:slug/fields • GET /api/public/surveys/:slug/welcome_screens • GET /api/public/surveys/:slug/endings • GET /api/public/surveys/:slug/logic-rules • POST /api/public/surveys/:slug/responses 4.6 State Management Architecture 4.6.1 Context Providers 1. FormCreatorContext: manages form builder state. 2. PublicFormContext: manages public form filling state. 3. WorkflowContext: manages workflow canvas state. 4. WorkspaceContext: manages workspace state. 5. AuthContext: manages authentication state. 6. GlobalDialogsContext: manages modal dialogs and overlays. 20 4.7 Security Design 4.7.1 Authentication Flow 1. User submits credentials. 2. Server validates and returns JWT. 3. Token stored in httpOnly cookie. 4. Axios interceptor attaches token to requests. 5. Server validates token on protected routes. 6. Refresh token mechanism extends sessions. 4.7.2 Authorization and Data Protection • Role-based access control (RBAC). • Workspace ownership validation. • Public vs private form distinction. • Input sanitization, CSRF protection, rate limiting (server-side). 21 Chapter 5 Implementation 22 5.1 Development Environment Setup 1. Install Node.js (v18+). 2. Clone repository. 3. Install dependencies: npm install. 4. Configure environment variables. 5. Run development server: npm run dev. 6. Access at http://localhost:3000. 5.2 Project Structure 1 formax/ 2 src/ 3 @core/ 4 clients/ 5 components/ 6 configs/ 7 constants/ 8 context/ 9 hooks/ 10 pages/ 11 types/ 12 utils/ 13 views/ 14 public/ 15 images/ 16 locales/ 17 fonts/ 18 documentation/ Listing 5.1: High-level project structure (representative). 5.3 Key Features Implementation 5.3.1 Form Builder Desktop View Components: • FormQuestionControl: left sidebar with questions list. • FormQuestionArea: central editing panel. • FormQuestionActions: right sidebar with question actions. Core Capabilities: 23 • Drag-and-drop reordering using @dnd-kit/sortable. • Real-time validation and UI feedback. • Debounced auto-save (1 second). • Question duplication. Figure 5.1: Form builder (desktop). 5.3.2 Mobile View Mobile Components: • QuestionCarousel: horizontal carousel navigation. • EndingsCarousel: separate carousel for endings. • ActionsDrawer: bottom drawer for actions. • MobileFormCreator: mobile layout. Mobile Features: • Swipe gestures and touch-optimized controls. • Responsive panels and collapsible sections. 24 Figure 5.2: Form builder (mobile). 5.3.3 Question Types Multiple Choice 1 interface MultipleChoiceField { 2 type: ’multiple_choice ’ 3 title: string 4 properties: { 5 choices: Choice [] 6 allow_multiple_selection: boolean 7 allow_other_choice: boolean 8 randomize: boolean 9 } 10 validation: { 11 required: boolean 12 } 13 } Listing 5.2: Multiple choice field interface (TypeScript). 25 Implementation highlights: • Dynamic choice add/remove and reordering. • Keyboard shortcut support (e.g., Enter to add). • Stable IDs for choices (e.g., crypto.randomUUID()). Yes/No 1 interface YesNoField { 2 type: ’yes_no ’ 3 title: string 4 validation: { 5 required: boolean 6 } 7 } Listing 5.3: Yes/No field interface (TypeScript). Short Text 1 interface ShortTextField { 2 type: ’short_text ’ 3 title: string 4 properties: { 5 description ?: string 6 } 7 validation: { 8 required: boolean 9 max_length ?: number 10 } 11 } Listing 5.4: Short text field interface (TypeScript). 5.3.4 Conditional Logic and Workflow Visual Workflow Editor: • React Flow canvas with custom nodes/edges. • Bezier curve edges for readability. • Smart layout strategy (Sugiyama-style layering indicated in the design prompt). • Interactive connections with a condition-builder dialog. 26 Figure 5.3: Workflow canvas. Node Types • Welcome Node • Question Node • Ending Node Figure 5.4: Workflow node types. Connection Dialog Features: • Condition builder UI supporting multiple conditions and AND/OR logic. • Target selector for destination question/ending. • Optional fallback behavior. • Rule validation to reduce inconsistent jumps. 27 Figure 5.5: Connection dialog. Logic Jump Evaluation (Illustrative) 1 const evaluateCondition = (condition , answer , field) => { 2 const { op, vars } = condition 3 4 for (const v of vars) { 5 if (v.type === ’constant ’) return true // Fallback 6 const matches = checkCondition(v, answer , field) 7 if (op === ’equal ’ && !matches) return false 8 if (op === ’not_equal ’ && matches) return false 9 } 10 11 return op === ’equal ’ 12 } Listing 5.5: Illustrative condition evaluation (simplified). 5.3.5 Welcome and Ending Screens Welcome Screen • Customizable title and description. • Button text customization and toggles. • Framer Motion entry animations (staggered children, fade/slide). 28 Figure 5.6: Welcome screen. Ending Screen • Customizable message and success animation. • Configurable button modes: redirect, reload, default. • Optional social sharing icons. Figure 5.7: Ending screen. 5.3.6 Public Form Experience • Progressive question display and smooth transitions. 29 • Runtime logic evaluation and navigation history (back button). • Progress indicator and responsive layout. • Keyboard navigation and animation optimizations. Figure 5.8: Public form. 30 Figure 5.9: Public form (mobile). 5.3.7 Workspace and Forms Management Workspace features: • Create and switch between workspaces. • Workspace settings. • Recent forms and quick actions. Forms list features: • Grid/List view toggle, search, sorting, filters. • Bulk actions and quick preview. 5.3.8 Analytics Dashboard Features: 31 • Response count, completion rate, average completion time. • Question-wise breakdown and charts. • CSV export and date-range filtering. Figure 5.10: Analytics dashboard. 5.3.9 Internationalization (i18n) Supported languages: • English (en) • Arabic (ar), including RTL 1 import i18n from ’i18next ’ 2 import { initReactI18next } from ’react -i18next ’ 3 4 i18n.use(initReactI18next).init({ 5 resources: { 6 en: { translation: require(’public/locales/en.json ’) }, 7 ar: { translation: require(’public/locales/ar.json ’) }, 8 }, 9 lng: ’en’, 10 fallbackLng: ’en’, 11 interpolation: { escapeValue: false } 12 }) Listing 5.6: Illustrative i18n initialization (i18next). 1 const theme = createTheme ({ 2 direction: language === ’ar’ ? ’rtl ’ : ’ltr ’ 3 }) Listing 5.7: RTL direction handling (Material-UI). 32 5.4 Design Patterns Used • Component composition and atomic UI principles. • Custom hooks pattern for reuse and readability. • Compound components for complex dialogs (e.g., ConnectionDialog subcompo- nents). • Context providers for predictable feature state boundaries. 5.5 Performance Optimizations • Code splitting and lazy loading for heavy components (workflow canvas). • Memoization for derived lists and expensive computations. • Debounced auto-save to reduce network chatter. • Smart caching via TanStack Query. • Image optimization (Next.js Image). 1 const enqueueSave = useCallback( 2 (ref) => { 3 clearTimeout(timers.current.get(ref)) 4 timers.current.set(ref , setTimeout (() => saveNow(ref), 1000)) 5 }, 6 [saveNow] 7 ) Listing 5.8: Debounced auto-save (illustrative). 5.6 Error Handling • Centralized API error handling with Axios interceptors. • Error boundaries for UI fallback. • Validation using schemas (e.g., Zod) integrated with React Hook Form. 33 Chapter 6 Results and Discussion Contents 1.1 Background and Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.2 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3.1 Primary Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3.2 Secondary Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4 Scope and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4.1 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.4.2 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.5 Report Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 34 6.1 System Performance Analysis • Linear scaling up to around 200 questions. • Slight degradation at 500+ questions. • Optimization opportunities include deeper virtualization and incremental graph lay- out strategies. 6.2 Comparative Analysis Table 6.1: Feature comparison matrix (illustrative). Feature Formax Google Forms Typeform JotForm Visual Workflow ✓ × × × Logic Jumps ✓ Limited ✓ ✓ Welcome Screens ✓ × ✓ Limited Ending Screens ✓ × ✓ Limited Multi-language UI ✓ ✓ ✓ ✓ RTL Support ✓ × × Limited Open Source ✓ × × × 6.3 Limitations and Challenges 6.3.1 Current Limitations • Question types: currently supports core types; advanced types planned. • Collaboration: no real-time co-editing. • Integrations: limited pre-built integrations; webhooks planned. • Templates: no template marketplace yet. • Analytics: basic analytics; advanced reporting is future work. 6.3.2 Technical Challenges • State complexity for large forms. • Workflow layout and node overlap in highly complex graphs. • Performance degradation at very large scales (500+ questions). • Mobile workflow navigation complexity. 35 6.4 Success Metrics 6.4.1 Achievement of Objectives (Summary) • Intuitive form builder: Achieved (strong usability ratings). • Conditional logic with visualization: Achieved. • Responsive design: Achieved. • Analytics: Achieved (basic). • Multiple question types: Partially achieved (expanded roadmap). • Multi-language + RTL: Achieved. 6.5 Lessons Learned 6.5.1 Technical Lessons • Clear separation of server state (TanStack Query) and UI state (Context) improves reliability. • Memoization and debouncing are essential for interactive builders. • Type safety reduces regression risk and improves refactor confidence. • Animation polish must be balanced against runtime performance constraints. 6.5.2 Project Management Lessons • Iterative development with early user feedback reduces UX risk. • Documentation and API contracts prevent costly integration mismatches. • Complex features often require larger buffers than initially estimated. 36 Chapter 7 Conclusion and Future Work Contents 2.1 Introduction to Form Builders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2 Existing Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.1 Google Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.2 Typeform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.3 Microsoft Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2.4 JotForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.3 Related Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.1 React and Next.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.2 React Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.3 State Management Solutions . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.4 Research Gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 37 7.1 Project Summary This project successfully developed Formax, a comprehensive web-based form builder sys- tem that addresses the need for accessible, feature-rich form creation tools. The platform combines modern web technologies with an intuitive design to provide creators with a powerful environment for building dynamic forms and respondents with a smooth, con- versational experience. Key achievements include: • A functional form builder with drag-and-drop interactions. • Conditional logic (logic jumps) with visual workflow representation. • Multi-language support (English, Arabic with RTL). • Welcome and ending screens with smooth animations. • Public form distribution and response collection. • Analytics dashboard with response summaries and export. 7.2 Contributions 7.2.1 Technical Contributions • Workflow visualization using an interactive node-edge canvas approach. • Modern architecture demonstrating Context API + TanStack Query separation. • Comprehensive RTL support usable as a reference pattern for similar systems. • Performance-conscious integration of animation and interactivity. 7.2.2 Practical Contributions • Open and extensible alternative to commercial offerings. • Accessibility-focused design direction (WCAG target). • Structured documentation blueprint for future contributors. 7.3 Future Enhancements 7.3.1 Short-term (3–6 months) • Additional question types (rating, long text, date/time, number, email/phone vali- dation). • Enhanced analytics (filters, improved visualizations, Excel/PDF export). 38 • Template system (pre-built templates and sharing). • Team workspaces (roles: admin/editor/viewer) and activity logs. • Integration improvements (webhooks, Google Sheets, notifications). 7.3.2 Medium-term (6–12 months) • Advanced question types (matrix, file upload, signature, ranking). • Advanced logic (piping, hidden fields, score-based flows). • Theme builder and deeper branding options. • Save-and-resume, password-protected forms, response limits. 7.3.3 Long-term (12+ months) • AI-assisted form generation and response analysis. • Enterprise features (SSO, compliance, retention policies). • Advanced analytics (predictive insights, abandonment analysis, A/B testing). • Real-time collaboration with presence and change tracking. 7.4 Acknowledgment of Limitations This project has acknowledged limitations including dependency on a separate backend API, limited large-scale user testing, absence of a professional security audit, and limited testing on older browsers. These constraints inform priorities for future work. 39 Bibliography [1] R. T. Fielding and R. N. Taylor, Principled design of the modern Web architecture, ACM Transactions on Internet Technology, 2(2), 115–150, 2002. [2] React Team, React Documentation, 2023. https://react.dev [3] Vercel, Next.js Documentation, 2023. https://nextjs.org/docs [4] Material-UI Team, Material-UI Documentation, 2023. https://mui.com [5] xyflow, React Flow Documentation, 2023. https://reactflow.dev [6] TanStack, TanStack Query Documentation, 2023. https://tanstack.com/query [7] Framer, Framer Motion Documentation, 2023. https://www.framer.com/motion [8] W3C, Web Content Accessibility Guidelines (WCAG) 2.1, 2023. https://www.w3. org/WAI/WCAG21/quickref/ [9] Google, Web Vitals, 2023. https://web.dev/vitals/ [10] OWASP, OWASP Top Ten, 2023. https://owasp.org/www-project-top-ten/ 40 https://react.dev https://nextjs.org/docs https://mui.com https://reactflow.dev https://tanstack.com/query https://www.framer.com/motion https://www.w3.org/WAI/WCAG21/quickref/ https://www.w3.org/WAI/WCAG21/quickref/ https://web.dev/vitals/ https://owasp.org/www-project-top-ten/ Abstract Acknowledgment Table of Contents List of Figures List of Tables List of Acronyms Introduction Background and Motivation Problem Statement Objectives Primary Objectives Secondary Objectives Scope and Limitations Scope Limitations Report Organization Literature Review Introduction to Form Builders Existing Solutions Google Forms Typeform Microsoft Forms JotForm Related Technologies React and Next.js React Flow State Management Solutions Research Gap System Analysis and Requirements Requirements Analysis Functional Requirements Non-Functional Requirements Use Case Diagrams Primary Actors Key Use Cases System Design and Architecture System Architecture Overall Architecture Component Architecture Technology Stack Database Design Entity Relationship Overview Data Models (Illustrative) User Interface Design Design Principles Color Scheme Typography API Design RESTful Endpoints (Representative) State Management Architecture Context Providers Security Design Authentication Flow Authorization and Data Protection Implementation Development Environment Setup Project Structure Key Features Implementation Form Builder Mobile View Question Types Conditional Logic and Workflow Welcome and Ending Screens Public Form Experience Workspace and Forms Management Analytics Dashboard Internationalization (i18n) Design Patterns Used Performance Optimizations Error Handling Results and Discussion System Performance Analysis Comparative Analysis Limitations and Challenges Current Limitations Technical Challenges Success Metrics Achievement of Objectives (Summary) Lessons Learned Technical Lessons Project Management Lessons Conclusion and Future Work Project Summary Contributions Technical Contributions Practical Contributions Future Enhancements Short-term (3–6 months) Medium-term (6–12 months) Long-term (12+ months) Acknowledgment of Limitations References