🛠️ [TASK] : Design Architecture Solution for Campaign/Proposal Builder

[minikin]

Summary:

To architect a dynamic UI system that uses a backend-defined JSON structure to generate the Proposal Editor and Campaign Builder interfaces within a Flutter application. The system must prioritize flexibility and ensure that UI components are rendered in the exact order specified in the JSON, as the sequence can dynamically change.

Core Requirements

Backend Specifications

• The backend must provide a REST API that returns UI configuration data in JSON format.
• The JSON should include:
  • Sidebar Navigation: Defines sections and nested items for easy navigation.
  • Main Content Layout: Specifies the order and types of components, such as collapsible panels, text inputs, dropdowns, and rich content displays.
  • Right Sidebar Configuration: Defines tabs for guidance, comments, and additional actions.

JSON Structure Guidelines

• Order Preservation: JSON must explicitly maintain the sequence of UI components, and the Flutter frontend must render elements in the specified order.
• Component Types: JSON should support various components, including (see Figma File for the full specs and connect with Flutter team):
  • Collapsible Panels: Containers that can expand or collapse to show or hide content.
  • Form Elements: Inputs like text fields and dropdowns, with properties such as labels, placeholders, and validation rules.
  • Rich Content Areas: Sections that display formatted text and images.
• Interactivity: Define event handling and action callbacks (e.g., button presses) in the JSON.

Example JSON Structure

{
  "sidebar": {
    "sections": [
      {
        "label": "Proposal Setup",
        "items": [
          { "label": "Title", "type": "topic" },
          { "label": "Proposal Summary", "type": "topic" },
          { "label": "Public Description", "type": "topic" }
        ]
      },
      {
        "label": "Tasks",
        "items": [
          { "label": "Task 1", "type": "task" },
          { "label": "Task 2", "type": "task" }
        ]
      }
    ]
  },
  "mainContent": {
    "tabs": [
      {
        "label": "Proposal Setup",
        "components": [
          {
            "type": "CollapsiblePanel",
            "title": "Detail Category Brief",
            "content": {
              "type": "TextInput",
              "placeholder": "Enter brief...",
              "maxLength": 250
            },
            "actions": [
              { "type": "Button", "label": "Save", "action": "saveCategoryBrief" }
            ]
          },
          {
            "type": "CollapsiblePanel",
            "title": "Proposal Summary",
            "sections": [
              {
                "type": "TextInput",
                "label": "Problem Statement",
                "maxLength": 300
              },
              {
                "type": "TextInput",
                "label": "Solution Statement",
                "maxLength": 300
              }
            ]
          },
          {
            "type": "RichContent",
            "title": "Hint Text - Topic 1234",
            "imageUrl": "https://example.com/image.jpg",
            "text": "Legend Text About Amethyst The Great Smith"
          }
        ]
      }
    ]
  },
  "rightSidebar": {
    "tabs": [
      { "label": "Guidance", "content": "Guidance text or tips" },
      { "label": "Comments", "content": "Comments section for collaboration" },
      { "label": "Actions", "content": "Additional actions or tools" }
    ]
  }
}

Frontend (Flutter) Specifications

• Fetch and Parse: The Flutter app should fetch the JSON data, parse it, and dynamically render the UI based on the defined structure.
• Component Rendering: Implement reusable widgets for collapsible panels, text inputs, dropdowns, and rich content displays. Please see the Figma file for the full details.
• Responsive Design: Ensure the UI adapts seamlessly to different screen sizes and orientations.
• Validation and Feedback: Implement data validation rules (e.g., character limits) and provide user feedback in real-time.

Key Considerations

• Order Preservation: The frontend must strictly adhere to the order of elements as specified in the JSON.
• Performance: Optimize the system for performance, especially with complex or deeply nested UI components.
• Extensibility: Ensure that new widget types or layout configurations can be easily added in the future.
• Error Handling: Include robust error handling for cases where the JSON is malformed or data is missing.
• Security: Validate and sanitize all input and data to prevent potential security vulnerabilities.

Deliverables

• A comprehensive architecture diagram illustrating the interaction between the backend and frontend.
• A detailed document outlining the JSON schema, including required and optional properties for each component.

Additional Resources

• Figma Design File: Link to Figma File
• MVE Swimlanes: Link to MVE Swimlanes