You are tasked with building a dynamic dashboard widget configuration interface. Users should be able to select a widget type, configure its properties via a dynamically generated form, see a live preview of the configured widget, and have their changes automatically saved with a debounce mechanism.
Core Requirements:
-
Widget Selection: Provide a mechanism (e.g., a dropdown or radio buttons) to select one of the predefined widget types. The available types are ChartWidget, TableWidget, and TextWidget.
-
Dynamic Configuration Form:
- When a widget type is selected, a form should dynamically render based on that widget's specific schema.
- Each field in the schema should correspond to an appropriate HTML input type (e.g.,
text for strings, number for numbers, select for enums).
- The form should be a "controlled component", meaning its state is managed by React.
-
Live Preview:
- As the user fills out the configuration form, a "live preview" area should update in real-time to reflect the current configuration.
- The preview doesn't need to render a fully functional widget (e.g., a real chart or table). Instead, it should visually represent the configured properties (e.g., display the title, data source, or text content).
-
Debounced Autosave:
- Implement an autosave mechanism that simulates saving the current widget configuration to a backend API.
- This save operation should be debounced (e.g., 500ms delay). The API call should only fire if there are no new changes within the debounce period.
- Simulate the API call using
setTimeout.
- Provide visual feedback (e.g., "Saving...", "Saved!") during and after the save operation.
-
Form Validation:
- Implement basic client-side validation. For example, mark
required fields and prevent saving if they are empty.
- Display appropriate error messages next to invalid fields.
Architectural Expectations for an ARCHITECT-level candidate:
This problem targets an ARCHITECT level candidate. We are looking for:
- Robust Component Design: Well-structured, reusable, and maintainable React components. Clear separation of concerns (e.g., selector, form, preview). Effective use of props and state.
- Effective State Management: Appropriate use of
useState, useEffect, useCallback, useMemo to manage component and application state. Avoid unnecessary re-renders and prop-drilling.
- Form Handling & Validation: Efficient and user-friendly form handling with controlled components, clear validation feedback, and robust error management.
- Asynchronous Operations & Debouncing: Correct implementation of simulated API calls, handling loading/success/error states, and a well-implemented debouncing logic.
- TypeScript Proficiency: Strong typing for all data structures, component props, and state, ensuring type safety throughout the application.
- Error Handling & Edge Cases: Consideration for how the application behaves under various conditions, including invalid inputs or simulated API failures (though full error boundaries are not required in 60 mins).
Time Remaining: ~60 minutes.