Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

zamdevio/querylab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

14 Commits

Repository files navigation

QueryLab

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.

πŸš€ Quick Start

Prerequisites

  • Node.js 18+
  • npm or pnpm
  • DeepSeek API key (for AI features)
  • Resend API key (for email verification)

Installation

  1. Clone the repository:

    git clone https://github.com/zamdevio/querylab.git
    cd querylab
  2. 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
  3. 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:

πŸ“ Project Structure

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)

✨ Features

Core Features

  • 🎨 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

Technical Highlights

  • 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

🎯 Usage

  1. Write SQL: Type your SQL queries in the Monaco editor
  2. Run Query: Press Cmd/Ctrl+Enter or click "Run Query"
  3. Ask AI: Click "Ask AI" to generate SQL from natural language
  4. Fix Errors: Use "Fix With AI" when you encounter SQL errors
  5. Explore Schema: Click on tables in the schema explorer
  6. Import/Export: Use the buttons to import or export .sql files

πŸ“š Documentation

Full Documentation

  • Backend README - Complete backend setup, configuration, API reference, and deployment guide
  • Frontend README - Complete frontend setup, configuration, and deployment guide

Detailed Guides

πŸ“– Getting Started: See Documentations/getting-started.md for a complete beginner's guide

πŸ“– API Reference: See Documentations/api-reference.md for detailed API documentation

πŸ“– Deployment Guide: See Documentations/deployment.md for step-by-step deployment instructions

πŸ“– Authentication: See Documentations/authentication.md for authentication flow and security details

πŸ“– Database Management: See Documentations/database-management.md for database operations guide

πŸ“– SQL Editor: See Documentations/sql-editor.md for SQL editor features and shortcuts

πŸ“– AI Features: See Documentations/ai-features.md for AI-powered SQL generation and fixing

πŸ“– Troubleshooting: See Documentations/troubleshooting.md for common issues and solutions

πŸ› οΈ Tech Stack

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.

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

🀝 Contributing

Contributions welcome! Please open an issue or submit a PR.

About

Learn SQL in your browser with AI assistance. Zero installation, client-side PostgreSQL execution, and beautiful UI. Built with Next.js & PGlite.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /