Atlan Frontend Task: Mastering SQL Queries

Link to the application: https://62a7cba27cec8e18defd8bec--super-klepon-949fee.netlify.app/

Introduction

Create, design and implement a web-based application capable of running SQL queries and displaying the results of said query. The application must include a space which accepts SQL queries in the form of user inputs, then runs the given query, and displays the result within the application..

Data

The data used in the application is obtained from https://github.com/graphql-compose/graphql-compose-examples/blob/master/examples/northwind/data/csv/orders.csv

JavaScript framework ,major plugins or packages

• React(Optimize speed as react mimnimize the DOM change)
• TailwindCSS(For building good-looking layouts easily)

Page Speed and Optimisation

For all the page optimisation analysis, I have used Google's Lighthouse tool and Page Speed Insights to analysze the page load time, along with how well it performs as per web standards. I have also used GTMetrix to cross-check the same.

Optimizing the Page Load Time and other metrics

1. Minimal dependencies have been used for the creation of this project.

2. Optiimized the tailwind for production by reducing size of build.

3. Used Fragments instead of divs to reduce DOM nodes.

4. In order for the application to be optimized, I have made it a PWA (Progressive Web App) .

5. Restructured code to reuse components & used minimal imports where necessary.

Functionality

Detailed walk-through of user interface why and how :- https://www.canva.com/design/DAFDh-ZGRDA/ObutE_qKxN1cPQrwSI4jKg/view?utm_content=DAFDh-ZGRDA&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Page Load Times

Homepage Load Time (Mobile) : 0.5 seconds(Google Lighthouse used) Further Detials

Homepage Load Time : 0.6 seconds(GT metrix used) Further Detials