Tech stack and packages
- React
- AntD
- Tailwind
- CodeMirror for editor
- react-csv for download
Report Link: GTMetrix
Source: gtMetrix
Features:
- Favorite queries can be added
- Paginated response
- Tables and description for queries have a Custom tool tip component, wrap text anywhere using it to get tool tip.
- When downloading csv, the file name is automatically based on query
Search was not implemented as it seemed redundant to add a search when the user is actually supposed to write a sql query to search in a real editor.
All done on a code level, no major optimizations. Implemented a LRU cache to remove repeated parsing of frequently used data. size was 10.
LRU Cache Improvement:(Please note that these screenshots have the old UI)
Original:
After being cached:
The LRU cache benchmarks can be run in from utils.
- UI is better
- The pinned queries is sticky
- When downloading the file name changes based on query(will happen automatically)
- SQL has suggestions now
In a real editor, sql query will be executed by the server. It makes it possible to send paginated responses from the backend itself. I personally think that it would be better then sending the complete data to the frontend and paginating on the client as the data might be very large. (Beyond the scope of this project) For data larger than 50MB.
Make sure the last keyword of the query being added is the same as the filename in here: https://github.com/hitenSharm/sqlEditor/tree/master/src/csv
For example: run select * from territories for territories.csv