A sql editor view made with ReactJS using Create React App for easily quering SQL and utilising the result.
Please do visit this link for demo.
| NOTE: For the demo purpose queries cant be written to the text area , it can only be selected from the set of queries |
|---|
Clone the project and then run npm install which will install all the required dependencies and then npm start to start the project.
The lighthouse in google chrome dev tools was used to calculate the page speed and can also be checked by using this online tool . Page load time came out to be 2.2 sec
Optimization of page load time is very important for a good user experience and for this two major issue was faced .
This being a SPA , the whole bundle of javascript was shipped to the user during initial rendering which was causing increase in page load time. The main task was to eliminate the javascript from the main bundle that was not needed by the user at the time of initial render .This can be achieved by dynamic importing the javascript at the time of need .This project uses File Saver and XLSX for exporting data to a csv or json file , the functionality was needed when the user wanted to export the data so using the concept of lazy the javascript bundle size was reduced from 800 KB to 500 KB
Unused css is a pain for all the projects and so was for this , this project uses FontAwesome for showing icons which was first loaded via CDN giving very less control on which parts to use , then firstly i used it locally which build a css file of 84 kb which was then reduced to 11kb using purgecss
