NikhilCodes/leaky-bits

A web-based SQL query runner that allows you to execute set of predefined SQL queries against a mock api. This mainly focuses on being able to render the results of the queries in a way that is easy to read and understand, and do operation on top of existing results.

Leaky Bits

Overview

A web-based SQL query runner that allows you to execute set of predefined SQL queries against a mock api. This mainly focuses on being able to render the results of the queries in a way that is easy to read and understand, and do operation on top of existing results.

Features

• pagination
• sorting
• filter
• export [csv, xlsx]
• Resizable Table

Toolchain

For	I used
Frontend Framework	React
UI Library	AntDesign
State Management	Redux Saga
XLSX Export	XLSX
Resizable Layout	react-reflex

Page Load Metrics

Optimizations and Improvements

• Made use of useCallback to prevent unnecessary re-renders
• Moved <InterativeTable/> component from to <DataViewer/> component, which stopped the re-rendering of the entire app when paginating or sorting.
• Added resolutions to package.json that helped with performance increase of AntD Table, preventing unnecessary rerender when hovering.67e8a6565e2a4b6aabbb13960653f2709e0a11b5
• Used React.memo on Table Control component to prevent unnecessary re-renders.
  • Before:
  • After:
• Applied code-splitting and lazy loading to <InteractiveTable/> component, which improves page load time.
  • Before:
  • After: