Actions on front end reflected for all users

Hi all,

Apologies if this is very basic or has been asked elsewhere. I tried searching but don’t know the correct phrasing to use for this question.

So basically I have a fitness app that allows users to create workout classes. Users can ‘Join’ the workout class, and they are taken to a separate ‘Class’ screen that displays the current exercise being performed, the exercise duration, time remaining in the class etc.

During the class, the information displayed needs to be consistent for all users in the class. For example, the host of a class can ‘skip’ an exercise, and these changes need to happen on the page for every single user, not just the host.

The way I’ve currently set this up is just using standard buttons or page states. For example, the host clicks the “Skip Exercise” button, and the current exercise will move on to the next exercise on the list. Currently when I preview this, it works fine from the hosts perspective, but these changes aren’t reflected from other users perspective.

I’m thinking I need to figure out some way to save after each action the host makes, so if they skip an exercise, it will save this and reflect it on the front end for all users?

The screenshot below shows the screen from the hosts perspective: They can skip exercises with the text button in the top right corner, and then down the bottom the exercise will move onto the next exercise in the list.

Let me know if there are any further details I can provide to assist. Thanks in advance!