README.md

Amazing Data Filter Application

Welcome to the Amazing Data Filter Application, a robust and user-friendly platform engineered to help users manage and refine large datasets seamlessly. Leveraging cutting-edge technologies such as React, Node.js, Express, MySQL this application delivers an exceptional data processing experience for individuals and organizations alike.

Key Features

• Effortless Data Import & Export: Upload datasets in various formats (CSV, JSON, Excel) and export filtered results with just a click.
• Dynamic Filtering Options: Apply multiple filters to narrow down datasets based on custom criteria like date ranges, categories, or numerical thresholds.
• Real-Time Updates: Experience immediate updates to filtered results without the need for page reloads.
• Custom Visualization: Generate charts and graphs (e.g., bar, line, pie) to visualize filtered data insights using Chart.js.
• Responsive Design:: Access the application on any device, ensuring flexibility and convenience.

Technology Stack

• Frontend: Built with React.js for a dynamic, responsive, and user-friendly interface.
• Backend: Powered by Node.js and Express.js for robust and scalable server-side processing.
• Database: MySQL ensures efficient storage and retrieval of Amazing Data Filter data.
• Hosting: Deployed on modern hosting platforms for high availability and performance.

---

Live Dashboard

Visit the Amazing Data Filter Application

---

Frontend Dependencies

The frontend of this project utilizes a range of modern libraries and frameworks:

"dependencies": {
  "@canvasjs/react-charts": "^1.0.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.10",
    "@mui/styled-engine-sc": "^6.0.0-alpha.10",
    "@mui/x-date-pickers": "^6.19.4",
    "@tinymce/tinymce-react": "^4.3.2",
    "antd": "^5.12.5",
    "axios": "^1.6.2",
    "buffer": "^6.0.3",
    "dayjs": "^1.11.10",
    "dompurify": "^3.0.8",
    "dotenv": "^16.4.4",
    "formik": "^2.4.5",
    "hooks": "^0.3.2",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.2",
    "jspdf-autotable": "^3.8.3",
    "pexels": "^1.4.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^4.12.0",
    "react-router": "^6.20.1",
    "react-router-dom": "^6.20.1",
    "react-toastify": "^9.1.3",
    "styled-components": "^6.1.6",
    "tinymce": "^7.2.1",
    "uuid": "^9.0.1",
    "yup": "^1.3.3"
}

---

Backend Dependencies

The backend is robustly designed with the following tools:

"dependencies": {
  "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "jsonwebtoken": "^9.0.2",
    "mysql2": "^6.12.0",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^3.1.9",
    "path": "^0.12.7"
}

---

How to Run Locally in Client side

1. Clone the repository:

   git clone https://github.com/swapnilahmedshishir/DataSearchQueryMangementSystem.git

2. Navigate to the project folder and install dependencies:

   npm install

3. Start the frontend:

   npm run dev

4. Visit http://localhost:5173 in your browser to explore the application.

5. Admin Login info Email: admin@gmail.com & password: 1234

6. 

Developer Info

Hi, I'm Swapnil Ahmed Shishir, a passionate web developer. This project showcases my expertise in creating modern web applications with React, MySQL, and Nodejs.
Feel free to connect for collaborations or feedback!

---