QueryQuack

• Query Quack is a fast and performance oriented tool that mimics the functionality of an online SQL editor.

Guide

Used Packages:

• Material-React-Table

  • Used to render table for the page

• CodeMirror

  • Used to render Code Editor on the page

• React-Loader-Spinner

  • Used to add Spinner animation for suspense rendering of code editor and table viewer

• Other Packages

  • CSV-TO-JSON
  • React-Router-Dom

Performance & Page Load Time:

• PageSpeedInsights Report

• Web Vital Report

  

• DevTools Network Tab Bottom bar Report

  • Home Page
  • Editor Page

Optimization Used to Improve the performance

• Used lazy Loading and suspense rendering on editor route for CodeMirror code editor & Material-React-Table table viewer component.
• Used UploadCare CDN provider to upload image on a CDN service and used webp format of images.
• Images are also optimized by their required scale for different purpose like webpage title icon and logo (only 50x50px image used). Example: user_icon_URL, user_icon_URL in src\helpers\Constants.js
• Overall reduced the timing of LCP & FCP
• Improved the CLS metric by making some minor changes of explicitly adding width and height of images to avoid layout shift problems

Extra's

• The website has been optimized to efficiently load and display a large amount of data in a table viewer by the help of virtualization techniques.