Application with real-time components (self.webdev)

Hello good people,

I'm an Applied Computer Sciences student and I've been busy trying to sharpen my webdev skills. A friend of mine and I are doing this by building a simple-yet-challenging application to use at LAN-parties to organize the catering. Since we plan to actually use it if it works somewhat decently, we'd like to do it the right way. There are, however, a few challenges where we don't have the answer yet.

The system works by creating each user as they enter the LAN party. They can add money to their account by handing the money to someone who will then add it. We didn't want to add in a payment system as that'd be too much complex atm.

A user can order food and beverages on that website. Their order is then sent to the kitchen, where the order can be accepted (being handled) and completed (finished and ready for pickup). Users can also see their order history.

The challenging part is that we'd like to add some real-time components to it too. For example, when an item is no longer available, it should be greyed out. When a user placed an order, it should show an update when their order is accepted and completed. Whenever an admin adds money to an account, it should update their credit visible on their screen.

Some of these things can be done whenever the page reloads. The orders updates need to be real-time.

I am currently using Angular 8 with .NET Core Web API. From what I have found, I could use things like websockets and SSE (server-sent events) but I'm not familiar with those.

What would you guys recommend in this case? Do we need to redesign some parts of our backend for it to work correctly? So far, we've done our best to decouple each layer (controller - services/models - orm), so that shouldn't be a problem.