SQL Editor: QUERTY

Link to the hosted app: https://sql-editor.itsamaan.me/

Introduction

This application is a SQL Editor which can be used to write and execute SQL queries and to analyze the output. The application is built using ReactJS.
The application is hosted on Cloudflare Pages.

A detailed description of the problem statement is given at the end of the document

Table of Contents

• Introduction
• Features
• Tech Stack
• Installation
• Dependencies
• Data
• Page Speed and Load Time
• Contributors

Features

• The application is built using ReactJS.
• The application is hosted on Cloudflare Pages.
• Supports syntax highlighting for SQL queries.
• Supports autocomplete for SQL keywords.
• Supports bracket matching, and auto-closing of brackets.
• User can Run, Save, Clear queries from the editor
• User can search for all available queries and query history
• User can download the query output as a CSV file

Tech Stack

• ReactJS
• React Router
• React CSV
• Codemirror
• FontAwesome

Installation

• Clone the repository using

  git clone https://github.com/amaan14999/atlan-sql-editor.git

• Install the dependencies using

  npm i

• Run the application using

  npm start

• The application will be hosted at http://localhost:5173

Dependencies

Editor:

• @uiw/react-codemirror: ^4.21.21
• @uiw/codemirror-theme-xcode: ^4.21.21
• @codemirror/lang-sql: ^6.5.4

Icon Pack:

• @fortawesome/react-fontawesome: ^0.2.0
• @fortawesome/fontawesome-svg-core: ^6.5.1
• @fortawesome/free-regular-svg-icons: ^6.5.1
• @fortawesome/free-solid-svg-icons: ^6.5.1

React:

• react: ^18.2.0
• react-csv: ^2.2.2
• react-dom: ^18.2.0
• react-router-dom: ^6.20.1

Data

The data used in the application is downloaded from mockaroo.com. Mockaroo is a free test data generator website. It is used to generate realistic test data. The data is stored locally, in a JSON object in the assets folder, in a file named Data.js.

Page Speed and Load Time

To evaluate the performance of this web application, I utilized Google Lighthouse, a comprehensive tool for auditing the quality of web pages. This tool was instrumental in providing insights into the page speed and load times of this application. The analysis included measurements of key performance indicators such as

• First Contentful Paint,
• Largest Contentful Paint,
• Total Blocking Time,
• Cumulative Layout Shift, and
• Speed Index.

For page loading time of this application, I have used the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics. These two are the most directly relevant to how quickly the page's content becomes visible to the user, which is what most people consider as "loading time".

The results of the analysis are as follows:

• Homepage load time and performance FCP: 0.6s, LCP: 0.6s:
• Editor page load time and performance FCP: 0.6s, LCP: 0.6s:

👨‍💻 Contributors

Amaan