GoShip
How It WorksChallengesPricingEmployers
Sign InGet Started
0developers
0companies
0assessments scored
How It Works
|Pricing
|Challenges
|Employers
|Privacy
|Terms
GoShip© 2026
Get updates
Twitter·GitHub
Systems nominal
BUILDSENIOR

Build a Query Builder UI

90 minutes
0 completed
reactdrag-and-dropquery-builderdata-filtering

Description

Build a Query Builder UI

Build a visual SQL-like query builder with drag-drop conditions, grouping, and live query preview.

Requirements

  • Visual condition builder: field + operator + value rows
  • Support operators: equals, not equals, contains, greater than, less than, between, in
  • AND/OR grouping with nested condition groups (up to 3 levels deep)
  • Drag-and-drop to reorder conditions
  • Live SQL preview that updates as you build the query
  • Apply query to a sample dataset and show filtered results
  • Save and load named queries
  • Technical Notes

    Model the query as a recursive tree. The sample dataset can be hardcoded JSON.

    Bonus Points

  • Query validation (incompatible types, missing values)
  • Export query as JSON filter object
  • Shareable query URL
  • You will be guided through MCP setup before the timer starts