Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajat2502/sql-editor-view
SQL EDITOR VIEW is an application that allows users to simply execute SQL queries on a sample database or design their own tables and receive instant results.
https://github.com/rajat2502/sql-editor-view
compiler sql vue
Last synced: 9 days ago
JSON representation
SQL EDITOR VIEW is an application that allows users to simply execute SQL queries on a sample database or design their own tables and receive instant results.
- Host: GitHub
- URL: https://github.com/rajat2502/sql-editor-view
- Owner: rajat2502
- Created: 2021-06-10T15:51:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-09T15:31:01.000Z (over 3 years ago)
- Last Synced: 2023-03-03T17:12:01.792Z (almost 2 years ago)
- Topics: compiler, sql, vue
- Language: Vue
- Homepage: https://sql-editor-view.netlify.app/
- Size: 230 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
SQL EDITOR VIEW
SQL EDITOR VIEW is an application that allows users to simply execute SQL queries on a sample database or design their tables and receive instant results. Anyone can use it to run SQL queries directly from their browsers without having to install anything. It comes with several features designed to make the experience as seamless and efficient as possible.
#### See Hosted Version [here](https://sql-editor-view.netlify.app/).
#### Sample table used: [sample.csv](https://github.com/rajat2502/SQL-Editor-View/blob/main/sample.csv)
## Features
- SQL queries may be executed instantaneously in the editor, which includes features such as **syntax highlighting**, **bracket matching**, and **automatic bracket closure**.
- **Download**, **Copy**, **Reset**, and **Save** the program to localstorage.
- Copy the query result to the clipboard.
- Use the features easily by utilizing simple **keyboard shortcuts** such as **Ctrl - H** for download.
## Technologies used:
- **Frontend**: VueJS, TailwindCSS (CSS Framework), Codemirror (Editor's Interface)
- **Backend**: [Judge0 API](https://github.com/judge0/judge0)
- **Hosting**: Netlify.com
- **Performance Testing**: PageSpeed Insights, Lighthouse, Dareboost
## Page load time and Optimizations performed:
- Initially, the page-load of the website on Desktop was about 1.2s and on mobile, it was about 3.3s.
- Used Lighthouse, PageSpeed Insights, and Dareboost to analyze the performance of the application.
- **Optimizations Performed**:
- **Purging unused CSS**: TailwindCSS comes with a lot of CSS and styles due to which a good amount of classes always remains unused. Using purging reduced the Gzipped CSS size from **450KB** to just **4KB** that reduced the page-load time by 0.6s.
- **Font-Display swap**: The project uses a custom font, which initially blocked the page loading time for some time, used the `font-display: swap` property to load the system font initially, and once the page is loaded then only request the Custom font.
- Used SVGs in place of PNGs/JPEGs.
- Rewritten reusable code and avoided any blocking code.
- After performing the above optimizations the page load time was reduced to a great extent. Now, the load time on Desktop is around **0.7s** and on mobile, it is around **2.2s**.
Performance on Desktop | Performance on Mobile
:-------------------------:|:-------------------------:
 | 
- The above image shows the Lighthouse results on the application, the first one is for Desktop while the second is the performance on Mobile phones.
How to setup locally?
- Fork and Clone the repo using
```
$ git clone https://github.com/rajat2502/SQL-Editor-View
$ cd SQL-Editor-View
```
- Get a new API key from [https://docs.rapidapi.com/docs/keys](https://docs.rapidapi.com/docs/keys) and replace it with `VUE_APP_RAPID_API_KEY` in `.env.example`. Also, replace `VUE_APP_RAPID_API_URL` with the API Url.
- Rename the file `.env.example` to `.env`
- Install node dependencies using
```
$ yarn add
```
- Run Server at localhost using
```
$ yarn serve
```
## Screenshots
Mobile View 1 | Mobile View 2
:-------------------------:|:-------------------------:
 | 