SQL Editor - Made in React

🧐 Overview

An application created using ReactJS and Sass.
You can run SQL queries here.

The application contains an SQL editor where you can write your query. There are 2 buttons Clear and Run. You can click on RUN button to run the query. Once RUN is pressed, TableName is searched in the given query and is tallied with the TABLE_NAMES, which is an array of tables names supported by the application. If the table name queried by the user is present in the TABLE_NAMES array, API request is made to fetch data from a URL. Then the data and query is processed with the help of alasql. It returns us the data in a JSON format. Then we display the data in form of a table.

The application contains 2 more components -

Table Names section which contains the names of the tables supported so user can easily make the queries. SEARCH BAR provided
History Panel where all the queries RUN are stored with there status. SEARCH BAR provided

Note : For now only SELECT queries on given tables are supported. Will increase it's application in future.

🥳 Live URL

The application is hosted on Vercel. Please find the link to it below.

SQL-Editor

🤗 SOME Queries you can try to run

SELECT * FROM Customers
SELECT * FROM Categories
SELECT * FROM Employee_territories;
SELECT * FROM Employees;
SELECT * FROM Orders;
SELECT * FROM Products;

😎 Tech Stack

😧 Some major Dependencies

@uiw/react-codemirror 4.8.1 - Editor to write query
alasql 1.7.3 - To run SQL query on a .csv file and return result in form of JSON object
react-hot-toast 2.2.0 - For notifications such as success and error
react-loader-spinner 5.1.5 - Loader for the table
react-table 7.8.0 - To create result table
sass 1.52.3 - for writing CSS

🙄 Page load time

I used Lighthouse Chrome DevTools to check application performace.

The performance metric varies between 96-98
Others remain constant

🚶‍♀️🚶‍♀️ Steps taken to optimize

Used performace optimization hooks - memo, useMemo and useCallback to prevent unnecessary re-rendering of components and increase performance.
Used code splitting for the code-editor component. Using code splitting for all components lead to decrease in performance, so applied to only editor.

😍 Figma Design

I created the whole design before starting building the application. The HOME PAGE is also designed but didn't get time to build it.

Link To FIGMA

xiaodin1 / SQL-Editor-3