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

• 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.