Developer Toolsbeta

Visual Query Builder

A drag-and-drop interface for building complex database queries without writing SQL by hand. It introspects Postgres metadata, lets you wire joins visually, and emits clean SQL or Prisma queries on the other side. I built it because every internal tool I have shipped eventually grows a 'just let me filter this differently' request, and at some point a UI is cheaper than another ad-hoc endpoint. It is not a replacement for SQL, it is a way to let non-engineers ask 90% of the questions without involving an engineer.

Reactdnd-kitPostgreSQL Prisma

What this is

A lab, not a product.

Features

Learnings

Technologies

Capabilities

What it does

The features that actually got built and run in this prototype.

feature_01.ts

Visual join configuration that reads foreign keys from Postgres information_schema

feature_02.ts

Drag-and-drop filters with type-aware operators (text contains, number ranges, date windows)

feature_03.ts

Aggregation builder for counts, sums, averages, and grouped rollups

feature_04.ts

Query optimization hints that flag missing indexes and expensive scans

feature_05.ts

Export to raw SQL or Prisma, see Prisma vs Drizzle

The stack

What it is built with

The libraries and runtimes I picked for this lab and why they earned their place.

React

dnd-kit

PostgreSQL Prisma

What I learned

Learnings, in order of how much they surprised me

The things I would tell another engineer before they tried the same experiment.

Visual query builders nail the common 80% and fall over on edge cases. Always leave an escape hatch to raw SQL

Real-time query preview changes the product. Watching the SQL update as you drag is what makes it click

Type safety from database schema enables genuinely useful autocomplete, not just keyword suggestions

The hardest part is not the UI, it is explaining joins to people who have never thought about them

Note: This is an experimental project in the beta stage. It is a learning exercise and technical exploration rather than a production-ready solution. Patterns and code may change.

Developer Tools

Related labs

Other explorations in this area.

alpha

Zero-Bundle Components

A small component library that ships zero JavaScript to the client by leaning on React Server Components and modern CSS. I wanted to test the hypothesis that most of what we put into client bundles in 2026 is theatre. The answer is: a lot of it is. Tabs, accordions, dialogs, dropdowns, even sliders can run with no JS at all if you accept some constraints. The constraints are real, but they are smaller than I expected.

Want me to build something like this for you?

If this kind of work fits your roadmap, I take on a small number of paid projects each quarter.

Start a project Just say hello

Edge ML Inference

AI Form Generator