{"id":31575996,"url":"https://github.com/nishadkindre/sqlhub","last_synced_at":"2025-10-05T17:15:59.053Z","repository":{"id":311477067,"uuid":"1043797072","full_name":"nishadkindre/sqlhub","owner":"nishadkindre","description":"SQL Workbench Simulator - Learn and practice SQL in a complete database environment","archived":false,"fork":false,"pushed_at":"2025-08-24T17:27:58.000Z","size":124,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-24T21:53:20.165Z","etag":null,"topics":["database","mui","react","sql"],"latest_commit_sha":null,"homepage":"https://sqlhub.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nishadkindre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-24T16:33:58.000Z","updated_at":"2025-08-24T17:28:01.000Z","dependencies_parsed_at":"2025-08-24T21:53:25.317Z","dependency_job_id":"cac25441-d24b-42c7-96fa-b0bdaad183c1","html_url":"https://github.com/nishadkindre/sqlhub","commit_stats":null,"previous_names":["nishadkindre/sqlhub"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/nishadkindre/sqlhub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishadkindre%2Fsqlhub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishadkindre%2Fsqlhub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishadkindre%2Fsqlhub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishadkindre%2Fsqlhub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nishadkindre","download_url":"https://codeload.github.com/nishadkindre/sqlhub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishadkindre%2Fsqlhub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278486308,"owners_count":25994945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database","mui","react","sql"],"created_at":"2025-10-05T17:15:57.725Z","updated_at":"2025-10-05T17:15:59.048Z","avatar_url":"https://github.com/nishadkindre.png","language":"JavaScript","readme":"# SQL Workbench Simulator\n\nA comprehensive web-based SQL workbench that simulates a MySQL database environment entirely in the frontend. Users can create databases, tables, execute SQL queries, and perform all CRUD operations without requiring any backend infrastructure.\n\n\u003cimg width=\"1920\" height=\"1080\" alt=\"image\" src=\"https://github.com/user-attachments/assets/44259149-a484-4fdf-a70e-c26a534694b8\" /\u003e\n\n\n## 🚀 Features\n\n### Core Functionality\n\n- **Complete Database Simulation**: Full MySQL-compatible database environment running in your browser\n- **Advanced SQL Editor**: Professional code editor with syntax highlighting, auto-completion, and formatting\n- **Real-time Query Execution**: Execute SQL queries instantly with realistic response times\n- **Database Explorer**: Interactive sidebar to browse databases, tables, and schemas\n- **Query History**: Track and manage your SQL query history\n- **Results Visualization**: Professional data grids with export functionality\n\n### SQL Operations Supported\n\n- **Database Management**: CREATE/DROP/USE DATABASE, SHOW DATABASES\n- **Table Operations**: CREATE/DROP/ALTER TABLE, SHOW TABLES, DESCRIBE\n- **Data Manipulation**: INSERT, SELECT, UPDATE, DELETE\n- **Advanced Queries**: JOIN operations, GROUP BY, ORDER BY, WHERE clauses\n- **Data Types**: INT, VARCHAR, TEXT, DECIMAL, DATE, DATETIME, BOOLEAN\n- **Constraints**: PRIMARY KEY, FOREIGN KEY, NOT NULL, UNIQUE\n\n### User Experience\n\n- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices\n- **Material-UI Interface**: Modern, intuitive interface following Material Design principles\n- **Query Templates**: Pre-built query examples for learning and reference\n- **Error Handling**: Clear, actionable error messages\n- **Keyboard Shortcuts**: Efficient workflow with keyboard shortcuts\n- **Export Options**: Download query results as CSV or JSON\n\n## 🛠 Technology Stack\n\n- **Frontend Framework**: React 19.1.1\n- **Build Tool**: Vite 7.1.3\n- **UI Library**: Material-UI (MUI) with complete component set\n- **Code Editor**: Monaco Editor (VS Code editor)\n- **Routing**: React Router DOM\n- **State Management**: React Context API with useReducer\n- **Data Grid**: MUI X Data Grid\n- **SQL Engine**: Custom in-memory SQL parser and executor\n\n## 📦 Installation\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd sqlhub\n   ```\n\n2. **Install dependencies**:\n\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**:\n\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**:\n   Navigate to `http://localhost:5173`\n\n## 🎯 Getting Started\n\n### Quick Start\n\n1. Open the SQL Workbench by clicking \"Open Workbench\" from the landing page\n2. The application comes with pre-loaded sample databases (`employee_db` and `ecommerce_db`)\n3. Use the database explorer on the left to browse tables and schemas\n4. Try the sample queries in the SQL editor or use the Templates feature\n\n### Sample Queries\n\n#### Basic Operations\n\n```sql\n-- Show all databases\nSHOW DATABASES;\n\n-- Select a database\nUSE employee_db;\n\n-- Show tables in current database\nSHOW TABLES;\n\n-- View table structure\nDESCRIBE employees;\n\n-- Select all data\nSELECT * FROM employees;\n```\n\n#### Data Manipulation\n\n```sql\n-- Select with conditions\nSELECT name, email, department\nFROM employees\nWHERE department = 'Engineering';\n\n-- Insert new record\nINSERT INTO employees VALUES\n(6, 'Alice Johnson', 'alice@company.com', 'Engineering', 78000.00, '2023-01-15');\n\n-- Update records\nUPDATE employees\nSET salary = 85000\nWHERE name = 'John Doe';\n\n-- Delete records\nDELETE FROM employees\nWHERE id = 6;\n```\n\n#### Advanced Queries\n\n```sql\n-- Group by with aggregates\nSELECT department,\n       COUNT(*) as employee_count,\n       AVG(salary) as avg_salary\nFROM employees\nGROUP BY department;\n\n-- Join tables\nSELECT e.name, e.email, d.name as department_name\nFROM employees e\nJOIN departments d ON e.department = d.name;\n\n-- Subquery\nSELECT name, salary\nFROM employees\nWHERE salary \u003e (SELECT AVG(salary) FROM employees);\n```\n\n## 🏗 Project Structure\n\n```\nsrc/\n├── components/           # Reusable UI components\n│   ├── DatabaseExplorer.jsx\n│   ├── SQLEditor.jsx\n│   ├── ResultsPanel.jsx\n│   ├── QueryHistory.jsx\n│   ├── Header.jsx\n│   ├── LoadingSpinner.jsx\n│   ├── ErrorBoundary.jsx\n│   └── QueryTemplatesDialog.jsx\n├── contexts/            # React Context providers\n│   └── SQLContext.jsx\n├── pages/               # Main application pages\n│   ├── LandingPage.jsx\n│   └── WorkbenchPage.jsx\n├── utils/               # Utility functions and classes\n│   ├── SQLEngine.js\n│   └── queryTemplates.js\n├── theme.js             # Material-UI theme configuration\n├── App.jsx              # Main application component\n├── main.jsx             # Application entry point\n└── index.css            # Global styles\n```\n\n## 🔧 Key Components\n\n### SQLEngine\n\nThe heart of the application - a custom SQL parser and executor that:\n\n- Parses SQL commands and validates syntax\n- Manages in-memory database state\n- Executes queries and returns results\n- Handles error cases with descriptive messages\n\n### Database Explorer\n\nInteractive sidebar component that:\n\n- Displays database hierarchy\n- Shows table schemas and column information\n- Provides quick actions for database operations\n- Supports database and table creation/deletion\n\n### SQL Editor\n\nProfessional code editor featuring:\n\n- Syntax highlighting for SQL\n- Auto-completion for keywords and commands\n- Multi-query support\n- Keyboard shortcuts (Ctrl+Enter to run, Ctrl+Shift+F to format)\n- Query templates integration\n\n### Results Panel\n\nComprehensive results display with:\n\n- Tabular view with pagination\n- Advanced data grid with sorting and filtering\n- Export functionality (CSV, JSON)\n- Query execution metrics\n- Error message display\n\n## 🎨 Customization\n\n### Theme Configuration\n\nThe application uses Material-UI's theming system. Customize colors, typography, and component styles in `src/theme.js`.\n\n### Adding New Query Templates\n\nExtend the query templates in `src/utils/queryTemplates.js` to add new categories or examples.\n\n### Database Schema\n\nModify the sample data in `SQLEngine.js` constructor to change the pre-loaded databases and tables.\n\n## 📱 Responsive Design\n\nThe application is fully responsive and adapts to different screen sizes:\n\n- **Desktop (1200px+)**: Full three-panel layout with permanent sidebars\n- **Tablet (768px-1199px)**: Collapsible sidebars with overlay\n- **Mobile (320px-767px)**: Single-panel view with navigation drawer\n\n## 🔍 Browser Support\n\n- Chrome (recommended)\n- Firefox\n- Safari\n- Edge\n\nThe application requires a modern browser with ES2020+ support.\n\n## 🚀 Deployment\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\n### Preview Production Build\n\n```bash\nnpm run preview\n```\n\nThe built application is fully static and can be deployed to any static hosting service like:\n\n- Vercel\n- Netlify\n- GitHub Pages\n- AWS S3\n- Firebase Hosting\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🙏 Acknowledgments\n\n- Built with [React](https://reactjs.org/)\n- UI components from [Material-UI](https://mui.com/)\n- Code editor powered by [Monaco Editor](https://microsoft.github.io/monaco-editor/)\n- Icons from [Material Icons](https://mui.com/material-ui/material-icons/)\n\n## 📞 Support\n\nIf you encounter any issues or have questions:\n\n1. Check the existing issues in the repository\n2. Create a new issue with detailed description\n3. Include browser information and steps to reproduce\n\n---\n\n**Made with ❤️ for the SQL learning community**+ Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishadkindre%2Fsqlhub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnishadkindre%2Fsqlhub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishadkindre%2Fsqlhub/lists"}