Skip to content

Latest commit

 

History

History
81 lines (47 loc) · 2.21 KB

README.md

File metadata and controls

81 lines (47 loc) · 2.21 KB
Raw

React & Typescript SQL Editor

An SQL Editor built on React and Typescript.

Check out the demo

📝 Todos

  • Custom hook for parsing csv files.

  • General UI layout with live editor and table.

  • Pagination controls for table.

  • Mechanism to convert sql code to js/ts logic.

  • Option for exporting data as csv.

  • Dark v Light mode.


📓 Overview

  • This repository contains the source code for the task that was given as part of Atlan's frontend hiring challenge.

  • The objective was to build a SQL Editor in any JS framework of your choice. I have used React and Typescript. Users should be able to run queries on a set of tables and later export the result as a csv file.

  • As a fun learning exercise, I decided to create my own editor that is capable of parsing and running basic SQL queries.

  • The script that has been used here can accept simple select queries with the SELECT and WHERE keywords, followed by any number of conditions (Basic comparisons with <, >, =, <=, >= etc). You can also run queries with the ORDER BY keyword for sorting records w.r.t a given column.

  • There are many limitations to this method, and in a real world scenario, one would have to use a proper editor for writing and running SQL queries.

  • The app has been deployed on Netlify and can be found here

  • Examples of queries that can be run in this app are shown below (see screenshots)


🔥 Performance

Following is the lighthouse report summary for this webapp.



🎯 Quickstart

  • Clone this repository and install the dependencies locally
    git clone https://github.com/saket2508/Atlan-Frontend-Challenge-Task.git
    cd Atlan-Frontend-Challenge-Task
    npm install
  • To start the React App, run the following command from the root directory
    npm start
  • The app should have started on localhost:3000

🖼️ Screenshots