Query By Example (QBE) Web Application

A modern, interactive web application that demonstrates the Query By Example concept. This application allows users to query a database by providing example data instead of writing SQL queries.

🚀 Features

Core QBE Functionality

• Query By Example Interface: Input example values to find similar records
• Advanced Query Builder: Build complex queries with multiple conditions and operators
• Real-time SQL Generation: See the SQL queries generated from your examples
• Interactive Results: View, sort, and export query results

Database Features

• Multiple Tables: Employees and Products tables with sample data
• Schema Information: View table structure and column details
• Sample Data Preview: See example records to understand the data

User Interface

• Modern Design: Beautiful, responsive UI with gradient backgrounds
• Tabbed Interface: Switch between QBE, Query Builder, and Data View modes
• Real-time Search: Search and filter data across all fields
• Pagination: Navigate through large datasets
• Export Functionality: Download results as CSV files

Advanced Features

• Column Statistics: View statistical information for numeric columns
• Sorting: Click column headers to sort data
• Responsive Design: Works on desktop and mobile devices
• Loading States: Visual feedback during query execution

🛠️ Technology Stack

Backend

• Node.js with Express.js
• SQLite database for simplicity
• RESTful API endpoints
• CORS enabled for cross-origin requests

Frontend

• React.js with modern hooks
• Axios for API communication
• Lucide React for beautiful icons
• CSS Grid & Flexbox for responsive layouts
• Custom CSS with modern styling

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd QBE

2. Install dependencies

   # Install server dependencies
   npm install
   
   # Install client dependencies
   cd client
   npm install
   cd ..

3. Run the application

   # Start both server and client in development mode
   npm run dev

   Or run them separately:

   # Terminal 1 - Start the server
   npm run server
   
   # Terminal 2 - Start the client
   npm run client

4. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000

🎯 How to Use

1. Query By Example

1. Select a table from the sidebar (Employees or Products)
2. Fill in example values in the form fields
3. Click "Execute Query" to find similar records
4. View results and generated SQL query

Example:

• Table: Employees
• Department: "Engineering"
• Position: "Engineer"
• Result: Finds all employees in Engineering department with "Engineer" in their position

2. Advanced Query Builder

1. Switch to the "Query Builder" tab
2. Add multiple conditions with different operators
3. Use operators like =, !=, >, <, LIKE, NOT LIKE
4. Execute the query to see results

3. Data View

1. Switch to the "View Data" tab
2. Browse all records in the selected table
3. Use search to filter data
4. Click column headers to sort
5. Export data as CSV

📊 Sample Data

Employees Table

• Columns: id, name, department, salary, position, hire_date
• Sample Records: 8 employees with various departments and positions

Products Table

• Columns: id, name, category, price, stock, supplier
• Sample Records: 8 products with different categories and suppliers

🔧 API Endpoints

Database Operations

• GET /api/tables - Get all available tables
• GET /api/table/:tableName/schema - Get table schema
• GET /api/table/:tableName/sample - Get sample data
• GET /api/table/:tableName/all - Get all data from table

QBE Operations

• POST /api/qbe/query - Execute QBE query
  • Body: { tableName: string, exampleData: object }
  • Returns: { query: string, values: array, results: array, count: number }

🎨 Key Features Explained

Query By Example Concept

QBE allows users to query databases by providing example data rather than writing SQL. The system automatically generates SQL queries based on the provided examples.

Example:

• User provides: { department: "Engineering", salary: 75000 }
• System generates: SELECT * FROM employees WHERE department LIKE '%Engineering%' AND salary = 75000

Real-time SQL Generation

The application shows the exact SQL query being executed, helping users understand how their examples translate to database queries.

Interactive Interface

• Form Validation: Ensures proper data types
• Dynamic Operators: Shows relevant operators based on column type
• Live Preview: See sample data to understand the structure

🚀 Development

Project Structure

QBE/
├── server/
│   └── index.js          # Express server with API endpoints
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── App.js        # Main application
│   │   └── index.js      # React entry point
│   └── package.json
├── package.json          # Root package.json
└── README.md

Available Scripts

• npm run dev - Start both server and client
• npm run server - Start only the server
• npm run client - Start only the client
• npm run build - Build the React app for production
• npm run install-all - Install all dependencies

🔮 Future Enhancements

• More Database Support: PostgreSQL, MySQL integration
• Advanced QBE Features: Range queries, fuzzy matching
• Query History: Save and reuse previous queries
• User Authentication: Multi-user support
• Custom Tables: Allow users to create their own tables
• Query Templates: Pre-built query examples
• Data Visualization: Charts and graphs for results

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📝 License

This project is licensed under the MIT License.

---

Query By Example - Making database queries accessible to everyone! 🎯