QUANTA
AI
DASHBOARD
Browser-based natural-language SQL dashboard for PostgreSQL and MySQL. Schema-aware prompt engineering, SELECT-only LLM safety enforcement, AES-256-GCM credential vaulting, and live charts powered by Google Gemini and Anthropic Claude.
"Connect, explore, ask in plain language, chart it, share it — one secure path instead of three tools."
Organizations oscillate between raw SQL tooling (steep learning curve, easy to misuse) and heavy BI suites (cost and lock-in). Quanta sits between them: teams connect PostgreSQL or MySQL, inspect data without hand-writing queries everywhere, assemble live dashboards from SQL-backed charts, and use large language models to draft read-only SQL when natural language is faster than syntax. The result collapses multiple tools into one path while keeping security choices credible — JWT sessions, bcrypt, AES-256-GCM credential encryption, SELECT-only AI enforcement, and parameterized explorer queries throughout.
I owned full-stack architecture and delivery: FastAPI backend with PostgreSQL as the application database, React + TypeScript SPA (Vite, Tailwind, Recharts, react-grid-layout, TanStack Query, Zustand), Docker Compose deployment with Nginx proxying /api, and pooled remote DB engines for user connections. Designed and implemented the AI query pipeline integrating Google Gemini and Anthropic Claude with optional admin toggles, schema-injected prompts, and SELECT-only validation before execution.
hover to explore
QUANTA AI DASHBOARD system architecture: Browser (httpOnly · SameSite); React SPA (TanStack · CodeMirror); Nginx (serves /dist · proxy); Sentry (errors · req-id trace); FastAPI (JWT · slowapi · CORS); Provider Reg. (admin-toggle flags); Redis (rate-limit · blocklist); AES Vault (AES-256-GCM creds); App PostgreSQL (SQLAlchemy 2 · Alembic); User DBs (PostgreSQL + MySQL); Gemini 3 (google-genai SDK); Claude (claude-sonnet-4-6).
Connections: Browser → React SPA (HTTPS · SPA bundle); React SPA → Nginx (REST · Axios + RQ); Nginx → FastAPI (proxy_pass /api); FastAPI → Redis (slowapi · refresh); FastAPI → App PostgreSQL (SQLAlchemy 2 async); FastAPI → AES Vault (decrypt creds); FastAPI → Provider Reg. (NL → SQL); FastAPI → Sentry (exception · trace); AES Vault → User DBs (psycopg2 · pymysql); Provider Reg. → Gemini 3 (generate_content); Provider Reg. → Claude (messages.create()).
Secure Connection & Schema Layer
Designed credential storage with AES-256-GCM encryption at rest so remote DB passwords are never stored in plaintext. Built a schema-sync engine that introspects PostgreSQL and MySQL on demand and caches table/column metadata — used both in the sidebar and as context injected into AI prompts. Column filters in the explorer bind values as parameters against the cached schema, reducing injection risk versus string concatenation.
AI Query Assistant & Safety
Integrated Google Gemini and Claude behind a user-selectable model switcher with admin-level enable/disable toggles. The backend injects cached schema into every prompt, enforces SELECT-only execution, and summarizes recent conversation turns for follow-up refinement. When the model flags ambiguous entity references, the system offers constrained resolution options rather than guessing. Suggested chart types accompany query results so output can be promoted to a dashboard widget in one step.
Dashboard Builder & Public Sharing
Built a 12-column drag-and-drop grid (react-grid-layout) with debounced layout persistence, smart gap-filling placement for new widgets, and a broad chart catalog (bar, line, area, pie, scatter, radar, funnel, table, metric, and more). Per-widget refresh re-runs SQL against the live connection. Public sharing toggles a UUID-based read-only link — the server executes widget queries concurrently server-side so viewers see fresh data without ever receiving stored DB credentials.