Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ciphertron/sql-editor
An online sql editor
https://github.com/ciphertron/sql-editor
alasql eslint prettier react-ace react-table reactjs sql-editor
Last synced: 19 days ago
JSON representation
An online sql editor
- Host: GitHub
- URL: https://github.com/ciphertron/sql-editor
- Owner: CIPHERTron
- License: gpl-3.0
- Created: 2023-07-25T14:57:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-08T13:38:40.000Z (over 1 year ago)
- Last Synced: 2024-11-10T00:16:19.472Z (3 months ago)
- Topics: alasql, eslint, prettier, react-ace, react-table, reactjs, sql-editor
- Language: JavaScript
- Homepage: https://online-sql-editor.vercel.app/
- Size: 3.72 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
SQL Editor [View Live]
Table of Contents
## âšī¸ About The Project
**SQL Editor** aims to provide users with a seamless and user-friendly platform for executing SQL queries, displaying query results with pagination, offering search functionality, maintaining a query history log, and supporting the export of results in CSV or JSON formats. The application will also showcase the execution time of queries and provide a list of available tables in the sidebar for easy reference.
### Key Features:
- **SQL Query Execution**: The application will allow users to input custom SQL queries and execute them against the connected database. Users can run SELECT, INSERT, UPDATE, DELETE, and other SQL commands.
- **Result Display with Pagination**: The application will present query results in a tabular format with smooth pagination. This ensures that large datasets are easily navigable, enhancing the user experience.
- **Search Functionality**: Users will have the ability to search for specific entries within the displayed results. This feature will assist users in finding relevant information quickly and efficiently.
- **Query History**: The application will maintain a history log of all executed queries. Users can revisit previous queries, review results, and re-run them as needed.
- **Export Data**: Users will have the option to download query results in both CSV and JSON formats. This feature enables data sharing and analysis outside the application.
- **Query Execution Time**: Each query execution will be timed, and the application will display the time taken to complete the query. This information helps users gauge query performance and optimize complex queries.
- **List of Available Tables**: The application's sidebar will display a list of available tables in the connected database. Users can easily reference this list when crafting queries, enhancing their workflow efficiency.
### Demo Video
https://github.com/CIPHERTron/sql-editor/assets/56754747/fd97e523-289f-40f4-aa0a-bd6482151082
### đ ī¸ Built With
Following technologies and libraries are used for the development of this
project.
- [React](https://react.dev/)
- [React Ace](https://github.com/securingsincity/react-ace)
- [AlaSQL](http://alasql.org/)
- [Material UI](https://mui.com/)
- [Emotion.js](https://emotion.sh/docs/introduction)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Commitlint](https://commitlint.js.org/#/)
## đ Getting Started
To setup the project locally follow the steps below
### Prerequisites
- [Node.js](https://nodejs.org/en/download/)
```sh
# Homebrew
brew install nodejs
# Sudo apt
sudo apt install nodejs
# Packman
pacman -S nodejs
# Module Install
dnf module install nodejs: # stream is the version
# Windows (chocolaty)
cinst nodejs.install
```
- [Yarn](https://classic.yarnpkg.com/en/docs/install/)
```sh
npm install --global yarn
```
- [Git](https://git-scm.com/downloads)
```sh
# Homebrew
brew install git
# Sudo apt
apt-get install git
# Packman
pacman -S git
# Module Install (Fedora)
dnf install git
```
### đ¤ Running the project.
1. **Fork** and **clone** the project to your local system
2. cd into the project and run
```shell
yarn install
yarn start
```
3. Open _localhost:3000_ to view the application
## Performance
(The forformance of the website was audited using [pagespeed.web.dev](https://pagespeed.web.dev/analysis/https-online-sql-editor-vercel-app/8clvvui2am?form_factor=desktop))
- **First Contentful Paint**: `0.5s`
- **Largest Contentful Paint**: `1.0s`
- **Speed Index**: `1.2s`
- **Total Blocking Time**: `70ms`
- **Cumulative Layout Shift**: `0`
### đ Relevant Screenshots:
1. _Image showing the SQL editor as well as queries history_
2. _Image showing the results table with paginationa, search bar, and export options_
3. _Image showing the side bar where all the available tables are listed_
4. _Image showing the backdrop where all the available fields of the selected table are listed_
