Real-Time Machine Data Monitoring: C++ to React Dashboard

Overview

This repository showcases a complete workflow for real-time machine data monitoring. It connects a native C++ engine—either mock or real, via DLL—to a .NET backend using SignalR and Entity Framework Core. The modern React frontend enhances user interaction and provides a seamless experience. This project serves as a learning tool, a prototype, and a reference for real-world industrial or IoT dashboards.

Table of Contents

• Technologies Used
• Installation
• Usage
• Features
• Project Structure
• Contributing
• License
• Releases

Technologies Used

• C++: For the embedded engine.
• .NET Core: Backend framework for the application.
• SignalR: For real-time notifications.
• Entity Framework Core: For database management.
• React: Frontend framework for building user interfaces.
• Nginx: For web server management and configuration.
• Docker: For containerization of the application.
• Tailwind CSS: For styling the frontend.
• TypeScript: For type safety in JavaScript.
• XUnit: For testing the application.

Installation

To get started with this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/Josh-Hil/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React.git
   cd Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React

2. Install .NET Core: Ensure you have .NET Core installed. You can download it from the official site.

3. Set up the backend:

   • Navigate to the backend directory:

     cd Backend

   • Restore dependencies:

     dotnet restore

   • Run the application:

     dotnet run

4. Set up the frontend:

   • Navigate to the frontend directory:

     cd Frontend

   • Install Node.js dependencies:

     npm install

   • Start the frontend:

     npm start

5. Configure Nginx: Refer to the nginx.conf file in the Config directory for the setup.

6. Docker setup: If you prefer using Docker, run:

   docker-compose up

Usage

After installation, you can access the application at http://localhost:3000. The dashboard displays real-time data from the C++ engine. You can monitor engine speed and temperature readings. The application also supports real-time notifications for any significant changes.

Features

• Real-Time Monitoring: Get instant updates on engine speed and temperature.
• User-Friendly Dashboard: Intuitive UI built with React.
• Data Visualization: Charts and graphs to represent engine data.
• Notifications: Receive alerts for critical readings via SignalR.
• Database Integration: Store and manage data using Entity Framework Core.
• Responsive Design: Works well on various devices.
• Testing Framework: Built-in tests using XUnit for reliability.

Project Structure

The project is organized as follows:

Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React/
│
├── Backend/
│   ├── Controllers/
│   ├── Models/
│   ├── Data/
│   ├── Startup.cs
│   └── Program.cs
│
├── Frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── tailwind.config.js
│
├── Config/
│   ├── nginx.conf
│   └── docker-compose.yml
│
└── README.md

Contributing

We welcome contributions to improve this project. Please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/YourFeature

3. Make your changes and commit them:

   git commit -m "Add some feature"

4. Push to the branch:

   git push origin feature/YourFeature

5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Releases

To download the latest release, visit the Releases section. Download and execute the necessary files to get started with the application.

For additional updates, you can always check the Releases section.

Acknowledgments

• Thanks to the open-source community for their contributions.
• Special thanks to contributors who helped improve this project.

Contact

For any questions or feedback, please reach out via GitHub issues or contact me directly.