Skip to content

Latest commit

 

History

History
123 lines (85 loc) · 4.12 KB

README.md

File metadata and controls

123 lines (85 loc) · 4.12 KB
Raw

sql-editor

forthebadge React

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

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: HomePage.jpg
  • Editor page load time and performance FCP: 0.6s, LCP: 0.6s: EditorPage.jpg

👨‍💻 Contributors


Amaan