Skip to main content

The Project

In this section, you will explore each app and learn about their key characteristics. The first part will briefly explain the overall project structure, and the second section will focus on the apps themselves.

Project structure#

The project consists of a few configuration files, as well as 3 apps in the src folder: dashboard, order-management, wago-connector. The fish folder contains all relevant local twins used in the apps. For a more detailed explanation on how to set up an Actyx project, please check out our dedicated guide for this.

├── src/
│   ├── dashboard
│   ├── order-management
│   ├── wago-connector
│   └── fish/
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── package.json
├── package-lock.json
└── tsconfig.json


Order Management App#

The Order Management is a React app. Open App.tsx to inspect the business logic.

The order in this example is created through the UI and only contains information about the duration, machine, and name. In reality, this event would be generated by your ERP system (e.g. through an API) and have much more associated information – the underlying logic would be similar though.

Dashboard App#

Just as the Order Management app, the Dashboard app is a React app. Open Orders.tsx or Machines.tsx and have a look at the logic of the Order Management app.

Machine App#


The PLC used for this example is a Wago PLC.

While this app is integrating with the above Wago PLC, the underlying logic is model-independent and would be similar for any other machine integration.

Need help?

If you run into problems or want to give feedback you are welcome to join our community forum, Discord chat, raise an issue in the GitHub repo or write us an e-mail to [email protected].