SQL Editor - Made with React

About

An application created using ReactJS and CSS.
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 some more components -

• DropDown by using which we can select queries according to our choice which will be run in the editor.
• 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

Deployement URL

The application is hosted on Vercel. URL : https://challengetask.vercel.app/sql-editor

SQL-Editor

SOME Queries you can try to run

1. SELECT * FROM Customers
2. SELECT * FROM Categories
3. SELECT * FROM Employee_territories;
4. SELECT * FROM Employees;
5. SELECT * FROM Orders;
6. SELECT * FROM Products;
7. SELECT * FROM order_details;
8. SELECT * from regions;
9. SELECT * from shippers;
10. SELECT * from supplies;
11. SELECT * from territories;

Tech Stack

1. ReactJS
2. CSS

Major Dependencies

• @uiw/react-codemirror 6.5.2 - Editor to write query
• alasql 4.1.2 - To run SQL query on a .csv file and return result in form of JSON object
• react-hot-toast 2.4.1 - For notifications such as success and error
• react-loader-spinner 4.0.0 - Loader for the table
• react-table 7.8.0 - To create result table
• axios 1.4.0 - for http request

Page load time

I used Lighthouse Chrome DevTools to check application performace.

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.

other otimizations which can be implemented are:

1. Memoization: I utilized React's memoization techniques to prevent unnecessary re-renders of components when the data or state hasn't changed.

2. Lazy Loading: For images or other assets, I applied lazy loading techniques to load them only when they are visible on the user's screen, reducing initial load times.

3. Virtualization: To handle rendering large amounts of rows efficiently, I employed virtualization techniques such as windowing or pagination, ensuring that the browser doesn't become unresponsive due to excessive data rendering.

4. Caching: Although this application doesn't interact with a backend, I implemented simple caching mechanisms to store previously executed queries' results, reducing the need for re-rendering the same data.

Note : I have rendered a large amount of rows in tables section of application without breaking the browser, or without crashing it.

THANK YOU!!!