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 which accepts SQL queries in the form of user inputs, then runs the given query, and displays the result within the application.
- A web-application that supports limited number of syntactically correct SQL queries and displays their respective outputs.
- The application uses static data to display results.
- The application also supports for a Clear Console button to clear the output area.
- The application is built on ReactJS
- Packages Installed
styled-components
@mui/icons-material
@mui/material
- SELECT * FROM [table name]
- SELECT COUNT(*) FROM [table name]
- SELECT [column names] FROM [table name]
- UPDATE [table name]
- CREATE [table name]
- DELETE [table name]
- stockData
- softDrinks
- currentTables Contains the table names of the available tables
sql-webapp-demo.mov
-
Updates the component only when submit is triggered and hence reducing number of redundant renders.
-
Reduced updates in the query state by using a pseudo state.
-
createTable.jsx component creates a React Table element from json array.
-
To add query resolution for advanced queries such as GROUP BY, JOINS and Nested Queries.
-
To add a functional backend with database implementation instead of resloving queries in the frontend..
-
To add a history button for the user to take a look at the query and output history.
-
Implement server side-pagination with datagrid for viewing large tables.