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.
The application is hosted on Vercel. Please find the link to it below.
SELECT * FROM CustomersSELECT * FROM CategoriesSELECT * FROM Employee_territories;SELECT * FROM Employees;SELECT * FROM Orders;SELECT * FROM Products;
- @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
I used Lighthouse Chrome DevTools to check application performace.
The performance metric varies between 96-98
Others remain constant
- 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.
