Visual Query Builder

Uma aplicação full-stack que permite construir consultas SQL SELECT visualmente, sem escrever código. Selecione tabelas, adicione filtros com operadores sensíveis ao tipo da coluna e veja a query gerada em tempo real.

Funcionalidades

• Seleção de tabelas — navegue entre tabelas do esquema e visualize colunas, tipos e chaves estrangeiras
• Filtros dinâmicos — adicione quantos filtros quiser, cada um com operadores e inputs apropriados ao tipo da coluna:
  • VARCHAR / TEXT: =, LIKE, ILIKE
  • INTEGER / NUMERIC: =, >, <, >=, <=, BETWEEN
  • BOOLEAN: toggle liga/desliga
  • TIMESTAMP: =, >, <, BETWEEN com seletor de data
• SQL em tempo real — a query é gerada e exibida instantaneamente a cada alteração
• Copiar query — botão "Copiar" que salva a SQL gerada na área de transferência
• Relações entre tabelas — exibição de chaves estrangeiras que conectam as tabelas

Stack

Camada	Tecnologia
Frontend	React 19 + TypeScript 6 + Vite 8 + Tailwind CSS 4
Backend	Spring Boot 3.2 + Java 21 + Maven
Database	PostgreSQL 14+ (esquema mockado — não necessário para execução)

Como executar

# Terminal 1 — Backend
cd backend && mvn spring-boot:run    # http://localhost:8080

# Terminal 2 — Frontend
cd frontend && npm run dev           # http://localhost:5173

Verificação de build

cd frontend && npx tsc --noEmit      # typecheck
cd frontend && npx vite build        # build de produção
cd backend && mvn compile            # compilação Java

Estrutura do projeto

visual-query-builder/
├── backend/
│   └── src/main/java/com/querybuilder/
│       ├── controller/QueryController.java   # REST API (/api/tables)
│       ├── model/                             # TableInfo, ColumnInfo, ForeignKeyInfo
│       └── service/SchemaService.java         # Dados mockados do esquema
├── frontend/
│   └── src/
│       ├── App.tsx                            # Componente principal
│       ├── types.ts                           # Tipos TypeScript
│       ├── data/schema.ts                     # Esquema mockado (frontend)
│       └── components/
│           ├── TableSelector.tsx              # Dropdown de tabelas + FKs
│           ├── FilterBuilder.tsx              # Construção dinâmica de filtros
│           └── QueryPreview.tsx               # Geração e exibição da SQL
└── AGENTS.md                                  # Instruções para agentes de IA

Como usar

1. Abra http://localhost:5173
2. Selecione uma tabela no dropdown (usuarios, pedidos ou comentarios)
3. Clique em "Adicionar filtro" para criar condições WHERE
4. Escolha a coluna, o operador e o valor — o input se adapta ao tipo
5. A query SQL é gerada automaticamente no painel escuro
6. Clique em "Copiar" para levar a SQL para a área de transferência

Observações

• O backend usa dados mockados — não é necessário ter PostgreSQL rodando
• Tailwind CSS v4 é configurado via plugin @tailwindcss/vite (sem tailwind.config.js)
• O frontend atualmente consome os dados mockados localmente, sem chamar a API REST
• TypeScript com verbatimModuleSyntax ativado — use import type para importações de tipo
• CORS configurado apenas para http://localhost:5173

Licença

MIT