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 that accepts SQL queries in the form of user inputs, then runs the given query and displays the result within the application.
Try out the website : REACT SQL Editor
See the video explanation of the project on YouTube: 
- Material UI: Material-UI is a popular and comprehensive UI library for React that embraces Google's Material Design principles. With a vast collection of customizable components, pre-designed layouts, and themes.
- Code Mirror: CodeMirror is a versatile and highly customizable code editor component for the web. It offers developers a rich set of features, including syntax highlighting, code completion, line numbering, and more.
✅ Lazy Loading for Table Data: During the initial load, the application retrieves the list of available tables, deferring the actual data retrieval until the user clicks on a specific table. This approach optimizes the initial loading time, providing a user-friendly experience by fetching and displaying data only upon request.
✅ Fully functional SQL Code editor: A key functionality of our application is enabling users to input and execute their own SQL queries. This flexibility empowers users to interact with the database using personalized commands, catering to a variety of data analysis requirements.
✅ Output Table Pagination: The application implements paginated table data presentation to improve the handling of large datasets. Instead of overwhelming users with an extensive list, the data is organized into manageable pages (20 per page), enhancing readability and navigation.
✅ Saving the already used query output as memory cache: Simplify the querying process by saving and reusing predefined queries and tables within the application. This feature boosts efficiency and minimizes the need for repetitive input.
✅ Data Export Capability: Our application allows users to export query results in JSON format, providing a convenient way to save and share data. Additionally, the feature to save queries eliminates the need for repetitive typing, enhancing user efficiency.
✅ Elevated User Interface and Experience: Our project focused extensively on enhancing the UI/UX for the SQL query React app. Through meticulous attention to detail, we have elevated the visual aesthetics, streamlined navigation, and optimized user interactions. The result is a sophisticated and user-friendly environment, meticulously crafted to maximize user engagement and satisfaction.
SELECT * FROM 'territories' WHERE 'territoryDescription' = 'Wilton';SELECT * FROM 'orders' WHERE 'shipVia' = 3;;SELECT * FROM 'orders' WHERE 'shipVia' = 3;;SELECT * FROM 'orders' WHERE 'shipName' = 'Wartian Herkku';SELECT * FROM 'orders' WHERE 'shipName' = 'Wartian Herkku';SELECT * FROM 'shippers' WHERE 'companyName' = 'Federal Shipping';
Page Load time of this website on desktop is around 0.6sec.
We can check code spnappyness GTmetrix Grade.
Laptop performance view (web.dev Report)
Mobile performance view (web.dev Report)
-
Dynamic Data Retrieval: A highly efficient optimization strategy employed in our React SQL editor project revolves around dynamic fetching. This approach entails fetching table rows exclusively upon user request, mitigating unnecessary data load during the initial phase and optimizing overall application performance.
-
Memoization for Enhanced Efficiency: We have implemented a thoughtful optimization technique in the Sidebar and Table components, particularly when handling intricate calculations. Through the strategic use of memoization, we have intelligently cached the results of computationally intensive functions. This ensures that computations are executed only when inputs change, preserving valuable processing time and contributing to a more responsive and faster user interface.
-
Minimized Component Rerenders: In our relentless pursuit of superior performance, we have carefully minimized the frequency of component rerenders for elements that share static values within our React application. This meticulous approach enhances efficiency and responsiveness, contributing to an optimized user experience.
In the project directory, you can run:
To install all the packages in package.json. This will install all the dependencies and devDependencies.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified, and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
