Link: https://lateef-sql-editor.netlify.app/
This is a dummy project that mimicks how an sql editor functions. It allows users to view data on listed tables and also filter the rendered data based on their desired search parameters.
- Sidebar Navigation System: It has an easy to use sidebar for quick navigations of the whole database table.
- Additonal Tab based interface: This interface is located just above the code editor. It allows users to quickly switch between opened tabs and also be able to close tabs that are no longer useful.
- Rich Code Editor: This application uses a Monaco Code Editor for better Experience while writing the query.
- Dynamic Rendering of data: The data being rendered on the table is dynamic. User can search for a particular data and also be able to limit the number of rows to be displayed at once.
- Smooth Data Export Feature: The user is able to export the table data either in CSV or JSON format.
- JavaScript Framework: React JS
- UI Component: Chakra UI
- Table: Tanstack React Table V7
- Code Editor Monaco Editor
The page load time and other metrics were calculated using https://pagespeed.web.dev/ after the project has been deployed through Netlify, and below is the breakdown:\
Speed Index = 0.6s.
Time to interactive = 0.6s.
Total Blocking Time = 30ms.\
- Proper Code Splitting for improved code readability and code bundling.
- Use of Self-hosted Open Source fonts using Font Source, thereby eliminating extra (render blocking) network request if CDN had to be used.
- Use of custom hook called to optimize the process of fetching the data remotely.
- Implemented a cache functionality which is sychronized to the user's sessionStorage. This eliminates multiple api calls on a single query tab.
- The table header and body data is being optimized using the *useMemo hook.
In the project directory, you can run:
Installs the dependencies needed for the app to run.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.