This is an online SQL editor built specifically for the frontend task of Atlan's front-end internship. This particular project is built using React, and the React Bootstrap front-end framework. It originally contains a data dump borrowed from this repository. The sections below detail the salient features of this project.
- Tab Based Interface: An easy-to-use tab based interface allows the user to switch between multiple queries at once. Want to view a table and run a query at the same time? Sure, go right ahead. Each tab maintains its own separate state, so as long as you don't reload the page, you can jump right back to where you left a tab.
- Dynamic Table Views: The list of tables is fetched at first, but the actual data isn't. Only when you click on the name of a table, are the entries fetched. Keeping the application lightweight, and blazing fast.
- Defining Custom Types for Columns: Each person is not the same; similarly, each column is not the same. You might want to specify certain processing functions: want to parse an image, or return an integer. You can do all this, and the table will display the processed result.
- Result Statistics: The user will also be alerted about the time taken to complete a query, giving the user a measure to check the performance of the system.
- Ability to save the results as JSON, XML, or CSV: This application includes functionality to save the results of a query in JSON, XML, and CSV formats. Pro Tip: You can also save a query,so that you don't have to type the same thing twice!
- GTmetrix: The fully loaded time is 1.4 seconds, with the first contentful paint at 969 ms. The site receives an A grade too.
- web.dev: The load time according to web.dev is 2.2 seconds. The site also scores 96 points in performance and 100 points in best practices. The exact metrics are:
- First Contentful Paint:
2.2s - Speed Index:
2.2s - Largest Contentful Paint:
2.2s - Time to Interactive:
2.2s - Total Blocking Time:
0ms - Cumulative Layout Shift:
0
- First Contentful Paint:
- Chrome DevTools: The load time according to Chrome DevTools is 3.97 seconds. I got this load time from the
loadevent in the Network tab of the DevTools. Along the same lines, theDOMContentLoadedevent fires after 3.60 seconds.
- The most time-saving optimisation would be dynamic fetching. The rows of a table are fetched only when the user requests it. Not a second before. This shaves a lot of seconds off our initial load time, by distributing that across requests.
- Extensive use of the
useMemohook. TheuseMemohook reduces the number of re-computations by storing the results of computations with the same dependencies. The data of tables is entirely 'memoised'. - Intelligent use of the React-Bootstrap library. Let's suppose we want to import a
Alertcomponent. There are two ways to do that:import { Alert } from "react-bootstrap";import Alert from "react-bootstrap/Alert";
The first option imports the entire library, and then imports the Alert component, whereas the second, more optimised, way imports just the Alert component, and nothing else. This too, shaves a lot of the load time, and this is what this project uses.
- Keeping the number of state changes as low as possible. While this has been accompanied by a slight reduction in the feature set, it has more than made up for it in the load time of a re-render.
- Reduced the number of API calls. I have reduced the number of API calls, by using the
useEffecthook, which shaved off almost 2 seconds after each click.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.