Skip to content

shreyT19/SQL-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SQL Editor

Screenshot 2023-08-22 at 2 27 08 PM

Features

SQL Query Execution

The application provides a text area powered by CodeMirror 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.

Search and Sorting

You can search and filter the data based on select options, allowing you to quickly find the information you need. Additionally, the table allows sorting of data by clicking on the table headers.

Data Export

After executing a query and obtaining results, you can export the query results to a CSV format for easy data analysis and sharing.

Query Execution

The application allows you to execute SQL queries against the provided data. This enables you to interact with the data and retrieve specific information based on your requirements.

Technology Stack

  • React
  • CodeMirror: A versatile code editor component for web applications.
  • React-CSV library

Live Demo

Screen.Recording.2023-08-22.at.2.31.03.PM.mov

Performance Optimizations

To ensure optimal performance, the following strategies have been implemented:

  • React.memo(): Memoization of components to prevent unnecessary re-renders.
  • Context API: Efficient data sharing among components.
  • useMemo(): Memoization of computed values to avoid redundant calculations.
  • Lazy Loading: Lazy loading of components to improve initial loading time.

Measuring Performance

Web Vitals Extension Data

Screenshot 2023-08-22 at 2 16 46 PM

Lighthouse Reports

Screenshot 2023-08-22 at 2 16 23 PM
  • Rendering Large Amount of Rows: The application efficiently handles rendering a significant number of rows by implementing pagination and scrolling options in the table components, ensuring smooth performance.