SqlGen - An online SQL Query generator

An online sql editor made with nuxt, vuetify, nuxt-content and highlight.js for syntax highlighting.

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Demo

Demo - running predefined queries

Page Load Time

I have tested page load time using lighthouse in google chrome. I have done the following things to optimize page performance.

• Added treeshaking for Vuetify modules, so that we only import the code for the components that we are using.
• Removed loading of default icons from Vuetify and used the @mdi/js module to only import icons that we need.
• Added nuxt-purgecss to remove unwanted css
• Lazy loading Vue components to reduce the initial bundle size.

Below are results for various matrices before and after optimizations.

Desktop

| Item | Before | After | | ------------------------------ | -------- | -------- | | FCP (First Contentful Paint) | 562 ms | 561 ms | | SI (Speed Index) | 1,282 ms | 1,269 ms | | LCP (Largest Contentful Paint) | 707 ms | 718 ms | | TTI (Time to Interactive) | 823 ms | 719 ms | | TBT (Total Blocking Time) | 6 ms | 4 ms | | CLS (Cumulative Layout Shift) | 0.00 | 0.00 |

Screenshot:

Mobile

| Item | Value | After | | ------------------------------ | -------- | -------- | | FCP (First Contentful Paint) | 2,124 ms | 1867 ms | | SI (Speed Index) | 5,219 ms | 3,581 ms | | LCP (Largest Contentful Paint) | 3,044 ms | 2,693 ms | | TTI (Time to Interactive) | 3,569 ms | 2,919 ms | | TBT (Total Blocking Time) | 330 ms | 201 ms | | CLS (Cumulative Layout Shift) | 0.02 | 0.02 |

Screenshot: