Overview
This project enables users to upload CSV files, dynamically creates SQL tables based on file headers, and provides an interactive frontend for data retrieval, filtering, and pagination.
Features
- File Upload
Users upload a file through the frontend.
The backend reads file headers and dynamically creates a corresponding SQL table.
Data from the file is inserted into the newly created table.
- Dynamic Table Creation
Table names are derived from the uploaded file name or a unique identifier.
Columns are created dynamically based on file headers.
- Dynamic Data Display
Users select a table from a dropdown or file list in the frontend.
The app fetches the table schema dynamically from the backend.
Data is displayed with pagination.
- Dynamic Filtering
Input fields for filters are generated based on column names.
Users input filter criteria (e.g., Name = John or Age > 30).
The backend processes filters and returns filtered results.
- Filtered Results with Pagination
Filtered data is displayed in the table.
Pagination is supported for both filtered and unfiltered data.
Backend: Key Functionalities
- Upload Endpoint
Reads the uploaded file.
Creates a table dynamically using headers as columns.
Inserts data into the table.
- Fetch Table Schema
Returns column names for a specified table.
- Filter and Paginate Data
Dynamically constructs SQL queries based on user inputs.
Supports filtering and pagination simultaneously.
Frontend: Key Features
- File Upload
Users upload a file, triggering backend processing.
Displays the uploaded table for selection.
- Dynamic Filters
Generates filter input fields based on table schema.
Sends filter criteria to the backend.
- Pagination
Integrates React Paginate to display results page-by-page.
Updates displayed data dynamically as users apply filters or navigate pages.
User Journey Example
- Upload a File
Upload employees.csv with headers: Name, Age, Department.
Backend creates a table employees with columns Name, Age, Department and inserts the data.
- Select a Table
Select employees from the table list.
The app fetches column names dynamically.
- Apply Filters
The app generates input fields for Name, Age, and Department.
Enter filters, e.g., Age > 25 and Department = HR.
- View Results
Filtered results are displayed in the table.
Pagination allows navigating through results.
Tech Stack
Frontend: React.js, React Paginate
Backend: Python, flask ,SQL
Database: MySQL / SQL Server
Installation
- Clone the repository
git clone https://github.com/Talal-q19/Data-visualization.git
- Install dependencies
Backend:
cd backend
Frontend:
cd frontend
- Run the application
Backend: python app.py
Frontend:npm start