The application provides a text area where you can input your desired SQL query. After entering the query, simply click the "Run SQL" button to initiate its execution. The query results will be displayed below the query input area in a tabulated format.
You can import queries from your local storage to streamline your workflow. Once you've executed a query and obtained the results, an "Export" button becomes available. This feature enables you to download the query results in CSV format for easy accessibility and analysis.
To provide a comprehensive understanding of the data's structure, the application includes an Entity-Relationship Schema on the left side of the interface. This schema visually represents relationships and structures within the dataset, helping you navigate the data more effectively.
The application incorporates a dropdown menu that lists sample queries. Upon selecting and executing any of these queries, the application generates and presents sample data outputs from the associated JSON file. This feature allows you to explore various query scenarios and their corresponding outputs.
The application offers user-friendly error handling by providing a semicolon warning when a query is missing a semicolon at the end. Additionally, if a query encounters an error during execution, appropriate error messages are displayed to assist with troubleshooting.
-
React
-
React-CSV library
Screen.Recording.2023-08-07.at.2.05.48.PM.mov
- React.memo()
- Context API
- useMemo()
- Lazy Loading
- As asked to render a large amount of rows in the application without breaking the browser, or without crashing it. I think i have achieved the solution to the challenge of rendering a substantial number of rows in the application by integrating pagination and scrolling options into the table components, ensuring smooth performance.