{"id":24149106,"url":"https://github.com/abdulbasit110/dashboard","last_synced_at":"2026-04-08T12:34:18.769Z","repository":{"id":233890077,"uuid":"787980248","full_name":"Abdulbasit110/Dashboard","owner":"Abdulbasit110","description":"A real-time data dashboard using Node.js, TypeScript, MySQL, and React. Developed at the National Center of Artificial Intelligence NEUROCOMPUTATION LAB, it visualizes device data in real-time with ApexCharts and Socket.io.","archived":false,"fork":false,"pushed_at":"2024-06-11T13:00:23.000Z","size":4105,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T14:28:10.667Z","etag":null,"topics":["ant-design","dataanalytics","express","mysql","reactjs","real-time","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Abdulbasit110.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T14:48:23.000Z","updated_at":"2025-06-17T06:58:36.000Z","dependencies_parsed_at":"2024-05-09T09:28:18.047Z","dependency_job_id":"9a2ee8a7-02a6-44ea-a93f-cc378647064d","html_url":"https://github.com/Abdulbasit110/Dashboard","commit_stats":null,"previous_names":["abdulbasit110/admin-panel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Abdulbasit110/Dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulbasit110%2FDashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulbasit110%2FDashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulbasit110%2FDashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulbasit110%2FDashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abdulbasit110","download_url":"https://codeload.github.com/Abdulbasit110/Dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdulbasit110%2FDashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31556235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","dataanalytics","express","mysql","reactjs","real-time","tailwindcss","typescript"],"created_at":"2025-01-12T08:35:32.866Z","updated_at":"2026-04-08T12:34:18.716Z","avatar_url":"https://github.com/Abdulbasit110.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Real-Time Data Dashboard\nInternship project for: \n## National Center of Artificial Intelligence NEUROCOMPUTATION LAB \nvisit : https://nedncl.com/\n\n## Overview\n\nThis project demonstrates a real-time data dashboard that visualizes data from a device using ApexCharts. The application consists of a backend server written in Node.js and TypeScript, a MySQL database, and a frontend built with Vite and React.js, AntDesign, Tailwind CSS that updates charts in real-time using Socket.io.\n\n## Table of Contents\n\n- [Project Structure](#project-structure)\n- [Setup Instructions](#setup-instructions)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Database Setup](#database-setup)\n  - [Running the Servers](#running-the-servers)\n- [Usage](#usage)\n- [API Endpoints](#api-endpoints)\n- [Socket Events](#socket-events)\n- [Development Notes](#development-notes)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Project Structure\n\n```\n.\n├── server\n│   ├── app.js\n└── package.json         // Node.js server for real-time data collection      // SQL script for setting up MySQL database\n├── client\n│   ├── src\n│   │   ├── App.jsx       // Main React component\n│   │   ├── index.jsx     // Entry point for React\n│   │   ├── components    // Directory for React components\n│   │   └── styles.css    // CSS for styling the dashboard\n│   ├── public\n│   │   └── index.html    // Main HTML file\n│   ├── vite.config.js    // Vite configuration file\n│   ├── package.json      // Project configuration and dependencies\n├── servertypescript\n│   ├── app.ts         // TypeScript server for API endpoints\n│   ├── app.js\n│   ├── tsconfig.json     // TypeScript configuration file\n├── README.md             // Project README file\n└── package.json          // Project configuration and dependencies\n```\n\n## Setup Instructions\n\n### Prerequisites\n\n- Node.js \n- MySQL \n\n### Installation\n\n1. Clone the repository:\n    ```bash\n    git clone https://github.com/Abdulbasit110/Dashboard.git\n    cd Dashboard\n    ```\n\n2. Install dependencies for backend, frontend, and typescript-server:\n    ```bash\n    cd server\n    npm install\n    cd ../client\n    npm install\n    cd ../servertypescript\n    npm install\n    ```\n\n### Database Setup\n\n1. Update the database configuration in your `typescript-server/server.ts` file:\n    ```typescript\n    const dbConfig = {\n      host: 'localhost',\n      user: 'your_username',\n      password: 'your_password',\n      database: 'your_database'\n    };\n    ```\n\n### Running the Servers\n\n1. Start the backend server:\n    ```bash\n    cd server\n    node app.js\n    ```\n\n2. Start the TypeScript server:\n    ```bash\n    cd servertypescript\n    npm run dev\n    ```\n\n3. Start the frontend server:\n    ```bash\n    cd client\n    npm run dev\n    ```\n\n4. Ensure all servers are running on their respective ports (3001 for backend, 8080 for TypeScript server, and 5173 for frontend).\n\n## Usage\n\n- Open your browser and navigate to `http://localhost:5173` to view the real-time data dashboard.\n- The charts will update automatically as data is received from the backend server.\n\n## API Endpoints\n\n- **GET /api/data** - Fetches data from the MySQL database.\n\n## Socket Events\n\n- **receivedData** - Event emitted by the backend server when new data is received from the device. The frontend listens to this event to update the charts in real-time.\n\n## Development Notes\n\n- The backend server collects real-time data from the device and emits it via Socket.io.\n- The TypeScript server handles API requests to fetch data from the MySQL database.\n- The frontend visualizes data using ApexCharts and updates in real-time using Socket.io.\n\n## Learnings\n\nDuring this project, I learned the following:\n\n1. **Node.js and Express**: I learned how to set up a Node.js server and use Express to handle real-time data collection from a device.\n2. **TypeScript**: I gained experience in writing TypeScript code for server-side applications, including setting up API endpoints and connecting to a MySQL database.\n3. **MySQL**: I learned how to set up and interact with a MySQL database, including creating tables and writing queries to fetch data.\n4. **React.js with Vite**: I learned how to build a frontend using React.js and Vite, including setting up components and managing state.\n5. **Socket.io**: I learned how to use Socket.io for real-time communication between the backend server and the frontend, enabling live data updates.\n6. **ApexCharts**: I gained experience in integrating ApexCharts into a React application to visualize data dynamically.\n7. **Project Structure**: I learned how to structure a full-stack project, separating concerns between backend, frontend, and TypeScript API server.\n8. **Deployment and Development Workflow**: I gained insights into deploying and managing multiple servers, ensuring they work together seamlessly.\n\n## Contributing\n\nContributions are welcome! Please create a pull request or open an issue to discuss any changes.\n\n## Thank you\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulbasit110%2Fdashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdulbasit110%2Fdashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulbasit110%2Fdashboard/lists"}