avikt18 / frontend-task

Insights | SQL query runner

SQL Query runner 🔗

This is a web-based SQL query runner demo application built using react, along with Tailwindcss for styling, antd for table and codemirror for sql editor. It allows users to execute SQL queries in a web-based editor and see the results generated in the form of table.

Data

The mock data used in the application is obtained from graphql-compose-examples repo.

Performance Audit

1.Lighthouse report

FCP - 0.9s
LCP - 1.9s

Below is the screenshot of the lighthouse report of the webapp

2. GTmetrics

LCP - 0.59s
Full Load Time - 0.81s
The GTmetrics report can be found here. Below is the screenshot for the same:

Optimisations

Several optimizations have been done in this React project which are:

1. Implemented Caching in Data Fetching Hook: Reduced redundant API calls by caching responses, leading to faster data retrieval and less server load.

2. Used useMemo for Expensive Computations: Optimized performance by memoizing computationally intensive operations, preventing them from being recalculated on every render.

3. Applied useCallback for Functions: Stabilized function identities across renders, reducing unnecessary re-renders of child components receiving these functions as props.

4. Dynamically Imported antd's Table Component with React Lazy: Improved initial page load speed by loading the Table component from antd only when needed, effectively reducing the initial JavaScript bundle size.

5. On-Demand Data Fetching: The data is only fetched from the API when requested by the user, thus decreasing the initial load times of the app and saving unnecessary API calls.

App Screenshots