sequel-ed

Libraries Used

• VueJS 3
• Vuex 4
• Papa Parser
• Vue 3 Ace Editor
• SCSS
• Vite

How to try

Please visit https://sequel-ed.ritikpatni.me/ or clone the repository and run

• npm install
• npm run dev

Performance Numbers

Numbers from Lighthouse

• First Contentful Paint - 1.1s
• Time to Interactive - 1.1s
• Speed Index - 1.6s
• Total Blocking Time - 10ms
• Largest Contentful Paint - 1.1s
• Cumulative Layout Shift - 0.002

Visit the results page for detailed info.

Numbers from WebPageTest

Environment Details

URL: https://sequel-ed.ritikpatni.me/
From: Virginia USA - EC2 - Chrome - Emulated Motorola G (gen 4) - Cable
First View only

Median Results after 3 runs

• First Byte - 0.292s
• Start Renderer - 0.800s
• First Contentful Paint - 0.797s
• Speed Index - 0.816s
• Web Vitals
  • Largest Contentful Paint - 0.796s
  • Cumulative Layout Shift - 0.002
  • Total Blocking Time - >= 0.000s
• Document Complete
  • Time - 2.213s
  • Requests - 5
  • Bytes In - 767KB
• Fully Loaded
  • Time - 2.213s
  • Requests - 5
  • Bytes In - 767KB

Performance considerations

• Loaded font files from local, so I reduced a request/connection to a third-party server
• Lazy loaded the SQL syntax highlighting library so that it doesn't block the initial render and get called only when needed.
  • I also used Suspense API to show a loader when the component is loading.
• Wrote all the CSS without the help of any third-party library
  • Wrapped the whole project in just under 4KB of CSS

SQL Queries

Added only 2 SQL queries, and those are pretty barebone, and I implemented no SQL logic. It's just javascript functions running if it gets a specific query.

Sample File: Use any link from below or use a CSV file of your choice

• orders.csv
• employee_territories.csv

First Query

SELECT * from table 

The query returns all the records in the CSV and shows them in a table

Second Query

SELECT * from table LIMIT 100

The query returns the first 100 records from the table.

Both the queries are non-case-sensitive and have predefined functions. They show an error toast if it doesn't match the above queries.

Accessibility

I always try to keep accessibility one of the essential things in whatever I built and have done the same.

• The website is fully keyboard accessible, and it would be great, honestly, if you could try it out all with your keyboard.
• I've also added a prefers-reduced-motion media query not to show any transitions/animations if they don't prefer them.
• All the website text colors are WCAG AAA compliant.

Areas for Improvement

Things that I wanted to do but couldn't manage to fit in the provided time

• Move filtering tasks(functions) to web workers.
  • It performs on the main thread right now, but this can be moved to workers so that our website doesn't drop frame rates even when a large CSV file is loaded.
• Improve design
• Add a GUI SQL query generator, but the functionality to generate the actual query needed more time, so I had to drop it.
  • The initial idea was to provide a GUI interface that users could then use to generate the SQL query or apply the filters. Still, the desired query logic was growing too complex and wasn't possible in the time frame.
• Allow users to upload or enter CSV data manually and process that as well.