{"id":31158085,"url":"https://github.com/arnobt78/embedded-motor-engine-speed-temperature-measurement--cpp-dotnet-react-fullstack","last_synced_at":"2025-09-18T23:30:54.652Z","repository":{"id":306511354,"uuid":"1026434545","full_name":"arnobt78/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack","owner":"arnobt78","description":"This project demonstrates a complete workflow for real-time machine data monitoring, from a native C++ engine (mock or real, via DLL) to a .NET backend (with SignalR and EF Core) to a modern React frontend. It is designed for learning, prototyping, and as a reference for real-world industrial or IoT dashboards.","archived":false,"fork":false,"pushed_at":"2025-09-17T23:52:58.000Z","size":25697,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-18T01:24:34.004Z","etag":null,"topics":["asp-net-core","cpp","cpp-dot-net","cpp-dotnet-react","dll","dotnet-react","ef-core","embedded-cpp","embedded-devices","motor-engine-speed-temperature-reading","nginx","nginx-configuration","nginx-docker","react-testing-library","react-vite-tailwindcss-typescript","realtime-notification","realtime-rechart","signalr","ssl-cert","xunit-test"],"latest_commit_sha":null,"homepage":"https://motor-speed-temperature.netlify.app","language":"TypeScript","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/arnobt78.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-25T22:14:49.000Z","updated_at":"2025-09-17T23:53:01.000Z","dependencies_parsed_at":"2025-09-18T01:34:41.595Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack","commit_stats":null,"previous_names":["arnobt78/embedded-motor-engine-speed-temperature-measurement--cplus-dontnet-react","arnobt78/embedded-motor-engine-speed-temperature-measurement--cpp-dotnet-react-fullstack"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React-FullStack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275852061,"owners_count":25540136,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["asp-net-core","cpp","cpp-dot-net","cpp-dotnet-react","dll","dotnet-react","ef-core","embedded-cpp","embedded-devices","motor-engine-speed-temperature-reading","nginx","nginx-configuration","nginx-docker","react-testing-library","react-vite-tailwindcss-typescript","realtime-notification","realtime-rechart","signalr","ssl-cert","xunit-test"],"created_at":"2025-09-18T23:30:53.163Z","updated_at":"2025-09-18T23:30:54.629Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","readme":"\n# Embedded Motor Engine Speed Temperature Measurement Dashboard C++, .Net, React Project\n\n![Screenshot 2025-07-25 at 23 11 13](https://github.com/user-attachments/assets/7eb6ad46-73a4-4170-a10e-75ff6b4b9966)\n![Screenshot 2025-07-25 at 23 11 36](https://github.com/user-attachments/assets/7d0562ee-b9f7-4655-a486-c8e4c49a06b9)\n![Screenshot 2025-07-25 at 23 11 49](https://github.com/user-attachments/assets/c304f109-e689-4bda-b496-be94f741155b)\n![Screenshot 2025-07-25 at 23 13 54](https://github.com/user-attachments/assets/a01c4b2a-a9ce-480f-bc7c-50dbb4f5648c)\n\n---\n\n## Project Overview (motor-dashboard, motor-speed-backend, motor-speed-frontend)\n\nThis project demonstrates a complete workflow for real-time machine data monitoring, from a native C++ engine (mock or real, via DLL) to a .NET backend (with SignalR and EF Core) to a modern React frontend. It is designed for learning, prototyping, and as a reference for real-world industrial or IoT dashboards.\n\n- **Live-Demo:** [https://motor-speed-temperature.netlify.app/](https://motor-speed-temperature.netlify.app/)\n- **Backend-Live:** [https://embedded-motor-engine-speed-temperature.onrender.com/](https://embedded-motor-engine-speed-temperature.onrender.com/)\n\n---\n\n## Features\n\n- Real-time motor readings with SignalR\n- Animated 3D gear and shadow\n- Grouped reading list by date with color-coded cards\n- Notification sidebar for highest/lowest temp and RPM\n- Real-time charts with Recharts\n- Unit \u0026 integration tests (backend: xUnit, frontend: React Testing Library)\n- Nginx config for routing, HTTPS/SSL\n- Dockerized backend, frontend, and Nginx\n- Responsive, modern UI\n\n---\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Architecture \u0026 Technology Stack](#architecture--technology-stack)\n3. [Project Structure](#project-structure)\n4. [How It Works: C++ → C# → React](#how-it-works-c---c---react)\n5. [Backend: .NET, C++ DLL, and Real-World Integration](#backend-net-c-dll-and-real-world-integration)\n6. [Frontend: React, Vite, Tailwind, shadcn/ui](#frontend-react-vite-tailwind-shadcnui)\n7. [Real-Time Communication with SignalR](#real-time-communication-with-signalr)\n8. [Database \u0026 Persistence (EF Core)](#database--persistence-ef-core)\n9. [API Endpoints \u0026 Data Flow](#api-endpoints--data-flow)\n10. [Running the Project](#running-the-project)\n11. [Testing](#testing)\n12. [Docker Usage](#docker-usage)\n13. [Features \u0026 Functionality](#features--functionality)\n14. [Extending \u0026 Reusing Components](#extending--reusing-components)\n15. [Real-World Practical Notes](#real-world-practical-notes)\n16. [Keywords](#keywords)\n17. [Conclusion](#conclusion)\n\n---\n\n## Architecture \u0026 Technology Stack\n\n- **C++ (EngineMock):** Native library simulating motor data (speed, temperature).\n- **.NET 8+ (ASP.NET Core):** Backend API, SignalR hub, P/Invoke to C++ DLL, EF Core for persistence.\n- **React (Vite):** Frontend UI, real-time charts, notifications, settings, CSV export.\n- **SignalR:** Real-time WebSocket-style updates from backend to frontend.\n- **Entity Framework Core:** Database ORM for storing readings.\n- **Tailwind CSS + shadcn/ui:** Modern, responsive, and accessible UI.\n- **Docker \u0026 Nginx:** Containerized deployment, HTTPS, and routing.\n\n---\n\n## Project Structure\n\n```bash\nmotor-dashboard/\n├── motor-speed-backend/\n│   ├── EngineMock/           # C++ mock engine (DLL/SO/DYLIB)\n│   ├── Server/\n│   │   ├── MotorServer/      # ASP.NET Core backend\n│   │   │   ├── Controllers/  # API endpoints\n│   │   │   ├── Data/         # EF Core DbContext\n│   │   │   ├── Hubs/         # SignalR hub\n│   │   │   ├── Models/       # Data models\n│   │   │   ├── Services/     # EngineService (P/Invoke)\n│   │   │   ├── Migrations/   # EF Core migrations\n│   │   │   ├── ...           # Config, Program.cs, etc.\n│   │   └── Tests/            # Backend tests\n│   └── Tests/                # Integration/unit tests\n├── motor-speed-frontend/\n│   ├── src/\n│   │   ├── components/       # React UI components\n│   │   ├── lib/              # Utilities (date, etc.)\n│   │   ├── services/         # API/auth helpers\n│   │   ├── types/            # TypeScript types\n│   │   └── ...               # App, main, etc.\n│   ├── public/               # Static assets\n│   ├── ...                   # Config, Dockerfile, etc.\n├── nginx.conf                # Nginx config for HTTPS/routing\n└── README.md                 # This file\n```\n\n---\n\n## How It Works: C++ → C# → React\n\n1. **C++ EngineMock:**  \n   - Simulates a real motor controller, exporting `GetMotorSpeed()` and `GetMotorTemperature()` via a shared library (DLL/SO/DYLIB).\n   - In a real project, this could be replaced with a library that reads from CAN, USB, EtherCAT, or other industrial protocols.\n   - **Example:**\n\n     ```cpp\n     extern \"C\" {\n         int GetMotorSpeed();\n         int GetMotorTemperature();\n     }\n     ```\n\n2. **.NET Backend:**  \n   - Uses P/Invoke (`[DllImport]`) to call the C++ functions directly from C#.\n   - `EngineService` samples the engine, stores readings in SQLite (via EF Core), and broadcasts new readings to all clients using SignalR.\n   - API endpoints allow fetching all readings, sampling new data, and health checks.\n   - **Example:**\n\n     ```csharp\n     [DllImport(LIB_NAME)]\n     public static extern int GetMotorSpeed();\n     ```\n\n3. **React Frontend:**  \n   - Connects to the backend SignalR hub for real-time updates.\n   - Fetches historical data via REST API (using axios).\n   - Displays readings in charts, lists, and notifications, with CSV export and settings.\n\n---\n\n## Backend: .NET, C++ DLL, and Real-World Integration\n\n### C++ Mock Engine\n\n- `EngineMock/motor_engine.cpp` and `motor_engine.hpp` define and export mock functions.\n- Compiled as a shared library (`libmotor_engine.dylib`, `.so`, or `.dll`).\n\n### P/Invoke in C#\n\n- `EngineService.cs` uses `[DllImport]` to call C++ functions.\n- Example:\n  \n  ```csharp\n  [DllImport(LIB_NAME)]\n  public static extern int GetMotorSpeed();\n  ```\n\n### Real-World Integration\n\n- Replace `EngineMock` with your real C++/C library for CAN/USB/EtherCAT.\n- Use P/Invoke for direct calls, or C++/CLI wrappers for more complex interop.\n- For advanced scenarios, use a message queue, gRPC, or a microservice for hardware abstraction.\n\n### Entity Framework Core\n\n- `AppDbContext` manages the `MotorReadings` table.\n- Migrations and schema are managed via EF Core CLI.\n\n### SignalR\n\n- `MotorHub` broadcasts new readings to all connected clients in real time.\n\n---\n\n## Frontend: React, Vite, Tailwind, shadcn/ui\n\n- **Vite** for fast dev/build.\n- **React** for UI, with functional components and hooks.\n- **Tailwind CSS** and **shadcn/ui** for styling and accessibility.\n- **Recharts** for real-time data visualization.\n- **SettingsModal**, **NotificationSidebar**, **AnimatedMotor**, etc., are reusable components.\n\n---\n\n## Real-Time Communication with SignalR\n\n- Backend pushes new readings instantly to all clients via SignalR.\n- Frontend uses `@microsoft/signalr` to subscribe and update UI in real time.\n\n---\n\n## Database \u0026 Persistence (EF Core)\n\n- All readings are stored in SQLite by default (can be swapped for SQL Server, PostgreSQL, etc.).\n- Migrations ensure schema is up to date.\n\n---\n\n## API Endpoints \u0026 Data Flow\n\n- `GET /api/motor` — fetch latest readings\n- `GET /api/motor/sample` — trigger a new reading (from C++ engine)\n- `GET /health` — health check\n- `GET /swagger/index.html` — OpenAPI docs\n\nFrontend uses axios to call these endpoints and SignalR for real-time updates.\n\n---\n\n## Running the Project\n\n### Prerequisites\n\n- Docker \u0026 Docker Compose\n- Node.js (for frontend dev)\n- .NET 8+ SDK (for backend dev)\n- C++ compiler (for building EngineMock)\n\n### Local Development\n\n```sh\ndocker-compose up --build\n```\n\nOr run backend and frontend separately:\n\n**Backend:**\n\n```sh\ncd motor-speed-backend/Server/MotorServer\ndotnet run\n```\n\n**Frontend:**\n\n```sh\ncd motor-speed-frontend\nnpm install\nnpm run dev\n```\n\n---\n\n## Testing\n\n### Backend (xUnit)\n\n- Unit and integration tests are in `motor-speed-backend/Tests/` and `motor-speed-backend/Server/Tests/`.\n- To run all backend tests:\n  \n  ```sh\n  dotnet test motor-speed-backend/Tests/\n  dotnet test motor-speed-backend/Server/Tests/\n  ```\n\n- Example test (C#):\n  \n  ```csharp\n  [Fact]\n  public async Task Sample_ShouldReturnValidReading() {\n      var svc = new EngineService(...);\n      var reading = await svc.Sample();\n      Assert.InRange(reading.Speed, 800, 3000);\n  }\n  ```\n\n### Frontend (React Testing Library)\n\n- Tests are in `motor-speed-frontend/src/components/__tests__/`.\n- To run all frontend tests:\n  \n  ```sh\n  cd motor-speed-frontend\n  npm test\n  ```\n\n- Example test (React):\n  \n  ```tsx\n  import { render } from '@testing-library/react';\n  import AnimatedMotor from '../AnimatedMotor';\n  test('renders without crashing', () =\u003e {\n    render(\u003cAnimatedMotor rpm={1200} /\u003e);\n  });\n  ```\n\n---\n\n## Docker Usage\n\n### Overview\n\n- Both backend and frontend have their own `Dockerfile` for containerization.\n- The project uses `docker-compose.yml` to orchestrate backend, frontend, and Nginx for HTTPS/routing.\n\n### Building and Running with Docker Compose\n\n```sh\ndocker-compose up --build\n```\n\nThis will:\n\n- Build the C++ engine, .NET backend, and React frontend\n- Start all services and Nginx for HTTPS\n- Serve the dashboard at `https://localhost/` (or as configured)\n\n### Backend Dockerfile Example\n\n```dockerfile\nFROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base\nWORKDIR /app\nCOPY . .\nRUN dotnet build\nENTRYPOINT [\"dotnet\", \"MotorServer.dll\"]\n```\n\n### Frontend Dockerfile Example\n\n```dockerfile\nFROM node:20-alpine AS build\nWORKDIR /app\nCOPY . .\nRUN npm install \u0026\u0026 npm run build\nEXPOSE 5173\nCMD [\"npm\", \"run\", \"preview\"]\n```\n\n### Nginx\n\n- Handles HTTPS, static file serving, and reverse proxy to backend/frontend.\n- Self-signed certs for dev in `/etc/nginx/certs/` (see nginx.conf)\n- For production, replace with real certs\n\n---\n\n## Features \u0026 Functionality\n\n- Real-time motor readings (SignalR)\n- Animated 3D gear and shadow\n- Grouped reading list by date, color-coded\n- Notification sidebar for highest/lowest temp and RPM\n- Real-time charts (Recharts)\n- CSV export\n- Health check endpoint\n- OpenAPI/Swagger docs\n- Dark mode toggle\n- Settings modal (max readings, dark mode)\n- Responsive, modern UI\n\n---\n\n## Extending \u0026 Reusing Components\n\n- All React components are modular and reusable.\n- Backend services and controllers are easily extensible for new endpoints or hardware.\n- To use in another project, copy the relevant component/service and update types as needed.\n\n---\n\n## Real-World Practical Notes\n\n- **Hardware Integration:**  Replace the mock C++ engine with your real hardware library. Use P/Invoke or C++/CLI as needed.\n- **Protocols:**  For CAN/USB/EtherCAT, use a vendor SDK or open-source stack, and expose a C API for .NET interop.\n- **Security:**  Add authentication/authorization for production.\n- **Scalability:**  Swap SQLite for a production DB, use Redis for SignalR backplane if scaling out.\n\n---\n\n## Keywords\n\nC++, C#, .NET, ASP.NET Core, React, Vite, SignalR, WebSocket, EF Core, SQLite, Docker, Tailwind CSS, shadcn/ui, CAN, USB, EtherCAT, P/Invoke, C++/CLI, real-time, dashboard, IoT, industrial, chart, notification, CSV, OpenAPI, Swagger, modular, reusable, microservice, hardware integration\n\n---\n\n## Conclusion\n\nThis project is a practical, modern, and extensible template for real-time machine dashboards, bridging native C++ code, .NET backend, and a beautiful React frontend. Use it for learning, prototyping, or as a foundation for your next industrial or IoT project.\n\n---\n\nHappy coding! 🚀  \nThank you!\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fembedded-motor-engine-speed-temperature-measurement--cpp-dotnet-react-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fembedded-motor-engine-speed-temperature-measurement--cpp-dotnet-react-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fembedded-motor-engine-speed-temperature-measurement--cpp-dotnet-react-fullstack/lists"}