A zero-install, in-browser PostgreSQL learning platform with AI-powered SQL assistance
Next.js TypeScript PGlite Cloudflare Workers Hono
π Live Demo β’ π Documentation β’ π Getting Started
QueryLab is a full-stack application for learning SQL in your browser. It features a Monaco editor, client-side PostgreSQL execution powered by PGlite (the best engine matching standard SQL format), AI-powered SQL generation, and a beautiful mobile-first UI.
- Node.js 18+
- npm or pnpm
- DeepSeek API key (for AI features)
- Resend API key (for email verification)
-
Clone the repository:
git clone https://github.com/zamdevio/querylab.git cd querylab -
Set up Backend:
cd Backend npm install # Configure ENVIRONMENT in wrangler.jsonc (development or production) # Set secrets via .dev.vars (local) or Wrangler secrets (production) # See Backend/README.md for detailed setup instructions
-
Set up Frontend:
cd Frontend npm install # Configure NEXT_PUBLIC_API_URL in .env.local or edit "DEFAULT_API_URL" in Frontend/src/lib/config.ts # See Frontend/README.md for detailed setup instructions
For detailed setup and deployment guides, see:
- Backend README - Backend setup, configuration, and deployment
- Frontend README - Frontend setup, configuration, and deployment
QueryLab/
βββ Backend/ # Hono backend (Cloudflare Workers)
β βββ src/
β β βββ app.ts # Main Hono app
β β βββ routes/ # API routes
β β βββ lib/ # Services and utilities
β βββ wrangler.jsonc # Cloudflare Workers config
β βββ README.md # Backend documentation
β
βββ Frontend/ # Next.js frontend
β βββ app/ # Next.js App Router pages
β βββ src/
β β βββ components/ # React components
β β βββ lib/ # Utilities and clients
β βββ public/ # Static assets
β βββ README.md # Frontend documentation
β
βββ Documentations/ # Detailed documentation (markdown files)
- π¨ Beautiful UI with light/dark mode
- π± Mobile-first responsive design
- π» Monaco SQL editor with syntax highlighting
- ποΈ PGlite: PostgreSQL compiled to WebAssembly - the best engine matching standard SQL format
- π€ AI-powered SQL generation and error fixing
- πΎ IndexedDB persistence for databases
- π€ Import/Export .sql files
- β¨οΈ Keyboard shortcuts (Cmd/Ctrl+Enter to run)
- π Interactive schema explorer
- π Email-based authentication
- β‘ Rate limiting and security
- Client-Side Execution: All SQL runs in your browser - your data never leaves your device
- Edge-Ready Backend: Cloudflare Workers for global performance
- AI Integration: DeepSeek AI for intelligent SQL assistance
- Modern Stack: Next.js 16, React 19, Hono, PGlite
- Write SQL: Type your SQL queries in the Monaco editor
- Run Query: Press
Cmd/Ctrl+Enteror click "Run Query" - Ask AI: Click "Ask AI" to generate SQL from natural language
- Fix Errors: Use "Fix With AI" when you encounter SQL errors
- Explore Schema: Click on tables in the schema explorer
- Import/Export: Use the buttons to import or export .sql files
- Backend README - Complete backend setup, configuration, API reference, and deployment guide
- Frontend README - Complete frontend setup, configuration, and deployment guide
π Getting Started: See
Documentations/getting-started.mdfor a complete beginner's guide
π API Reference: See
Documentations/api-reference.mdfor detailed API documentation
π Deployment Guide: See
Documentations/deployment.mdfor step-by-step deployment instructions
π Authentication: See
Documentations/authentication.mdfor authentication flow and security details
π Database Management: See
Documentations/database-management.mdfor database operations guide
π SQL Editor: See
Documentations/sql-editor.mdfor SQL editor features and shortcuts
π AI Features: See
Documentations/ai-features.mdfor AI-powered SQL generation and fixing
π Troubleshooting: See
Documentations/troubleshooting.mdfor common issues and solutions
Frontend:
- Next.js 16 (App Router) + React 19
- PGlite (PostgreSQL compiled to WebAssembly)
- Monaco Editor (VS Code editor)
- Tailwind CSS
- IndexedDB
Backend:
- Hono (web framework)
- Cloudflare Workers (edge runtime)
- Durable Objects (state management)
- DeepSeek AI (SQL generation)
- Resend (email service)
See Backend/README.md and Frontend/README.md for detailed tech stack information.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions welcome! Please open an issue or submit a PR.