Query Builder (Drag & Drop + Expert Mode)

Developed a user-friendly Query Builder with drag-and-drop design mode for business analysts.

• Business analysts needed complex queries but were blocked by engineering dependency and slow turnaround.
• Manual query writing is error-prone and intimidating for non-technical users.

• Designed a dual-mode experience: visual builder for most users + expert mode for power users.
• Introduced guided validation and clear error states to reduce invalid configurations.
• Optimized UX for speed: reusable blocks, quick edits, and predictable interactions.

• React + TypeScript UI with a block-based canvas model.
• GraphQL-backed execution layer with validation + safe query submission.
• Composable widgets and schema-aware constraints for reliable output.

• Maintaining flexibility without allowing invalid query structures.
• Keeping UI responsive with complex nested conditions and large schemas.

• Analysts could build queries independently, reducing engineering load and speeding up reporting cycles.
• Improved consistency and reduced query-related mistakes through validation UX.

• Added an expert mode for manual query writing and advanced usage.
• Integrated validation and error feedback to prevent invalid query builds.
• Reduced dependency on engineers for routine reporting and data retrieval.

React • TypeScript • Material UI • GraphQL • NestJS