SQL Query Runner provides the user an exhautive and robust solution to interact with SQL table

Last update: Jul 30, 2022

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.

Screenshot 2022-07-27 at 11 36 48 AM

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

See Configuration Reference.

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.

Screenshot 2022-07-27 at 12 13 20 PM

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.

GitHub

https://github.com/mohanish35/atlan-assessment
You might also like...

A Vue.js single page application for basic Management By Objective tasks using ASP .NET Webapi 2 and SQL server

SPA-asp.net-api-vuejs- Single Page Application using ASP .NET and vuejs. NOTE If you are looking for best practices for developing Vue.js application,

May 19, 2022

A modern, fast and productivity driven SQL client with a focus in UX.

A modern, fast and productivity driven SQL client with a focus in UX.

Antares SQL Client Antares is an SQL client based on Electron.js and Vue.js that aims to become a useful tool, especially for developers. Our target i

Aug 17, 2022

Curated list of SQL to help you find useful script easily 🚀

Curated list of SQL to help you find useful script easily 🚀

Supabase SQL Simple Curated Supabase SQL View Demo · Report Bug · Request Feature 🚀 Features 📃 Curated list of SQL script 🧪 Tested script 🏂 Easy c

Jul 28, 2022

🔍 Just a SQL REPL for web.

🔍 Just a SQL REPL for web.

SQL REPL Just a SQL REPL Tools for web. 🖼️ Preview ✨ Features 🔍 SQL query editor with syntax highlighting ↕️ SQL query editor with Split Panes,so yo

Jul 10, 2022

Curated list of SQL to help you find useful script easily 🚀

Curated list of SQL to help you find useful script easily 🚀

Supabase SQL Simple Curated Supabase SQL View Demo · Report Bug · Request Feature 🚀 Features 📃 Curated list of SQL script 🧪 Tested script 🏂 Easy c

Aug 8, 2022

Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements.

u-sqlite Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements. SQLite数据库基于ORM技术,使用对象操作,无需编写任何SQ

Aug 11, 2022

Crud que utiliza un api de .net 5, nuxt js, sql server y mysql

Library Crud que utiliza un api de .net 5, nuxt js, sql server y mysql Requisitos Descargar última versión de .NET 5 Aqui Descargar Node JS Aqui Insta

Apr 13, 2022

An open source and free automated configuration middle and back-end integrated product solution

act is an open source and free automated configuration middle and back-end integrated product solution. It is an automated configuration system developed by vue2 and element ui. The most popular front-end technology stack and back-end service technology stack can be used to quickly build a back-end management system, Assistant agile system development.

Mar 24, 2022
Filscan browser is the filecoin blockchain browser and data service platform,It provides one-stop data services such as mining ranking, blockchain data query and visualization chart based on filecoin
Filscan browser is the filecoin blockchain browser and data service platform,It provides one-stop data services such as mining ranking, blockchain data query and visualization chart based on filecoin

Filscan browser is the filecoin blockchain browser and data service platform,It provides one-stop data services such as mining ranking, blockchain data query and visualization chart based on filecoin

Jun 2, 2022
A Nuxt.js template for generating a beautifully robust static site with blog

Awake is a Nuxt.js template for generating a beautifully robust static site with blog. Features Simple modern design based on the Bulma css framework

Dec 2, 2021
The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.
The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.

@storyblok/vue The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience. Note: This plugin is for Vue 3.

Aug 10, 2022
Holds the result of my experiments on trying to figure out how to build a tinder-like UI using vue2-interact.

Holds the result of my experiments on trying to figure out how to build a tinder-like UI using vue2-interact.

Jan 3, 2022
A SPA created with Vue.js 3 (using Quasar framework) + Typescript to interact with a simple warehouse API.

A SPA created with Vue.js 3 (using Quasar framework) + Typescript to interact with a simple warehouse API.

May 1, 2022
Task-system - Implementation of 2 user and task screens using the GoRest API to bring and save user data
Task-system - Implementation of 2 user and task screens using the GoRest API to bring and save user data

Teste para Desenvolvedor Front-End Implementação de 2 telas de usuários e tarefa

Jan 27, 2022
A terminating Apollo Link for Apollo Client that allows FileList, File, Blob instances within query or mutation variables and sends GraphQL multipart requests

A terminating Apollo Link for Apollo Client that allows FileList, File, Blob instances within query or mutation variables and sends GraphQL multipart requests

Sep 1, 2020
Chadmin is easy to use ClickHouse running query dashboard.
Chadmin is easy to use ClickHouse running query dashboard.

Chadmin Chadmin is easy to use ClickHouse running query dashboard. You can watch your currently running queries for the entire ClickHouse cluster and

Jul 24, 2022
Beekeeper Studio is a cross-platform SQL editor and database manager available for Linux, Mac, and Windows.
Beekeeper Studio is a cross-platform SQL editor and database manager available for Linux, Mac, and Windows.

Modern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.

Aug 14, 2022