- This application helps users to query the tables available in database via SQL.
- Users can execute SQL queries & view the results.
- Users can select a query from a set of pre-defined queries.
- Users can view the table schema & corresponding type of each column in the sidebar.
- Users can sort any column of the result by clicking on the column name header.
- Users can navigate the entire result using pagination.
- Users can export the queried result into CSV format.
View the live demo of the application here 👉 SQL Playground.
- React JS
- Tailwind CSS
- react-json-to-csv
- react-syntax-highlighter
- react-table
- Performance Report is calculated using Page Speed Insights
- Desktop Performance Report
- Mobile Performance Report
- Used
useMemohook to avoid re-calculating same information for rendering tables. - Used dynamic imports & code-splitting to create separate bundle for table data to optimize time to interactive.
- Made the website responsive to maintain consitent performance for mobile & tablet users.
- Fixed image rendering issues & accessibility issues recommended by lighthouse report.
- Using vercel to deploy this application which uses it's edge network to cache requests & improve initial load time.
- Clone the repository
- Run npm install to install required dependencies
- Finally, run npm start to run the application and open the browser to view the site on localhost.
- Use Node JS version
16.17.0to run the application on local
- Portfolio: jaynil.gaglani
- Linkedin: Jaynil Gaglani
- Twitter: @Jaynil1611
- Github: @Jaynil1611
Give a ⭐️ if you like this repository!
Made with ❤️ by Jaynil Gaglani