SQL Query Runner
The SQL Query Runner provides the user an exhautive and robust solution to interact with SQL table.
The user is empowered to query the table, as well as export and download the queried table in PDF, CSV, and in JSON format. Moreover, the fired queries are persisted in the local storage so refreshing the application doesn't destroy the history.
Project setup
Install NPM packages
yarn install
Environment Variables
Copy the .env.example (from the root dir) and paste it (in the root dir). Rename the copied file to .env and poopulate the variables.
Compiles and hot-reloads for development
yarn serve
Run unit tests
yarn test:unit
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
Customize configuration
Major Frameworks and Libraries
- Vue.js, Vuex, Vuetify: The frameworks associated with Vue.js ecosystem for building UI and web interfaces.
- local-storage: Simplifying operations to interact with local storage.
- Vue test utils: The official unit testing utility library for Vue.js.
Web Performance
The overall load time averages to around 350 ms based on several performance tests on Pagespeed.
Optimizations
The performance bottleneck in the application is fetching the data that is displayed on the table, the size of which being around 215 kb. Hence, the following steps have been taken to overcome it:
- Host the JSON file on a server instead of having it in the build of application. This reduced the build size quite significantly.
- Using the browser's localStorage as a cache for this data. This allows us to fetch the data only once, therefore, bypassing the unnecessary network calls.
Moreover, I would propose the following optimizations to further improve the application performance:
- Convert the JSON file into CSV file, since CSV files are much smaller than their JSON counterparts.
- Paginate the data into chunks by setting it up a backend application.
