ic_fluent_resize_20_filledCreated with Sketch.
Yantrix

Redux Examples ​

Traffic light ​

Traffic light is a classic example of a finite state machine. A traffic light system follows a strict sequence of states (e.g., Red → Green → Yellow → Red). In this example, states are being switched whenever you press a "Switch" button below the traffic light block. You can press "Reset" to return to the initial state of the application. (All lights are disabled)

Demo ​

You can check out the working example here.

Source code ​

Source code for the example is located here.

Diagram ​

ic_fluent_resize_20_filledCreated with Sketch.

Installation and usage ​

If you want to install this example locally, follow these steps:

  1. Clone the Yantrix repository:
git clone https://github.com/tfcp68/yantrix.git
  1. Open the example folder:
cd yantrix
cd examples
cd 01-traffic-light
  1. Install the dependencies:
pnpm install
  1. (Optional) To re-generate the automata (for example, if you want to play around with the state diagram), use the following command:
yantrix codegen ./src/diagrams/traffic-light.mermaid -l TypeScript -o src/generated/TrafficLightAutomata.ts -c TrafficLightAutomata
  1. To run the project in development mode:
pnpm dev

You can check out the example application at http://localhost:5173.

  1. To build for production:
pnpm build