🐒 SQL Monkey

📖 README (EN)

SQL Monkey is a modern web application for managing and organizing your SQL queries collection. Built with React and Vite, it provides a clean and intuitive interface for storing, editing, formatting, and managing your SQL snippets.

✨ Features

• 📝 CRUD Operations: Create, read, update, and delete SQL queries
• 🎨 SQL Formatting: Automatic SQL formatting with configurable options
• 🔍 Smart Search: Search through your SQL collection by name or description
• 📋 Copy to Clipboard: One-click copy functionality
• 💾 Local File System: Work with local JSON files using File System Access API
• 🏷️ Query Types: Categorize queries (SELECT, INSERT, UPDATE, DELETE, DDL)
• 🎯 Syntax Highlighting: Beautiful SQL syntax highlighting
• 🍞 Toast Notifications: User-friendly feedback system
• 📱 Responsive Design: Works on desktop and mobile devices

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone <repository-url>
cd SQL-Monkey

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

pnpm build

🎯 Usage

1. Select a JSON File: Click "Selecionar arquivo JSON" to choose your SQL collection file
2. Add New SQL: Use the "+" button to create a new SQL query
3. Edit Queries: Click the edit icon to modify existing queries
4. Format SQL: Use the format button to automatically format your SQL code
5. Search: Use the search bar to find specific queries
6. Copy: Click the copy icon to copy SQL to clipboard

📁 File Format

Your SQL collection should be a JSON array with the following structure:

[
  {
    "name": "Get All Users",
    "description": "Retrieve all users from the database",
    "type": "QUERY",
    "sql": "SELECT * FROM users;"
  }
]

🛠️ Tech Stack

• React 19 - UI Framework
• Vite - Build Tool
• SQL Formatter - SQL formatting and parsing
• Prism React Renderer - Syntax highlighting
• React Icons - Icon library
• File System Access API - Local file operations

🌐 Browser Compatibility

This application uses the File System Access API, which is supported in:

• Chrome/Chromium 86+
• Edge 86+
• Opera 72+

For unsupported browsers, a fallback message is displayed.

🇧🇷 Versão em Português