SQL Editor [View Live]

Table of Contents

1. Key Features
   • Demo Video
   • Running the project
   • Built With
2. Getting Started
   • Prerequisites
   • Running the project
3. Performance
4. Relevant Screenshots

ℹ️ About The Project

SQL Editor aims to provide users with a seamless and user-friendly platform for executing SQL queries, displaying query results with pagination, offering search functionality, maintaining a query history log, and supporting the export of results in CSV or JSON formats. The application will also showcase the execution time of queries and provide a list of available tables in the sidebar for easy reference.

Key Features:

• SQL Query Execution: The application will allow users to input custom SQL queries and execute them against the connected database. Users can run SELECT, INSERT, UPDATE, DELETE, and other SQL commands.

• Result Display with Pagination: The application will present query results in a tabular format with smooth pagination. This ensures that large datasets are easily navigable, enhancing the user experience.

• Search Functionality: Users will have the ability to search for specific entries within the displayed results. This feature will assist users in finding relevant information quickly and efficiently.

• Query History: The application will maintain a history log of all executed queries. Users can revisit previous queries, review results, and re-run them as needed.

• Export Data: Users will have the option to download query results in both CSV and JSON formats. This feature enables data sharing and analysis outside the application.

• Query Execution Time: Each query execution will be timed, and the application will display the time taken to complete the query. This information helps users gauge query performance and optimize complex queries.

• List of Available Tables: The application's sidebar will display a list of available tables in the connected database. Users can easily reference this list when crafting queries, enhancing their workflow efficiency.

Demo Video

sql-editor.mov

🛠️ Built With

Following technologies and libraries are used for the development of this project.

• React
• React Ace
• AlaSQL
• Material UI
• Emotion.js
• ESLint
• Prettier
• Commitlint

📌 Getting Started

To setup the project locally follow the steps below

Prerequisites

• Node.js

# Homebrew
brew install nodejs

# Sudo apt
sudo apt install nodejs

# Packman
pacman -S nodejs

# Module Install
dnf module install nodejs:<stream> # stream is the version

# Windows (chocolaty)
cinst nodejs.install

• Yarn

  npm install --global yarn

• Git

  # Homebrew
  brew install git

  # Sudo apt
  apt-get install git

  # Packman
  pacman -S git

  # Module Install (Fedora)
  dnf install git

🤖 Running the project.

1. Fork and clone the project to your local system
2. cd into the project and run

yarn install
yarn start

3. Open localhost:3000 to view the application

Performance

(The forformance of the website was audited using pagespeed.web.dev)

• First Contentful Paint: 0.5s
• Largest Contentful Paint: 1.0s
• Speed Index: 1.2s
• Total Blocking Time: 70ms
• Cumulative Layout Shift: 0

📉 Relevant Screenshots:

1. Image showing the SQL editor as well as queries history

2. Image showing the results table with paginationa, search bar, and export options

3. Image showing the side bar where all the available tables are listed

4. Image showing the backdrop where all the available fields of the selected table are listed