My girlfriend coorganizes with friends a small christmass concert for other friends. It's always an amazing event that pushes you instantly into a christmass mood. And because I can't sing or play any instrument I decided to help with something I can actually do. I created a web with info about the concert, about performers and about each performed song.
The interesting part is: a now playing song can be set in administration of the web, which is then automatically refreshed on every client and highlighted in the program and it's lyrics are then displayed on "Now playing" page. Viewers than can join performers and sing songs together.
How is it built? I used this opportunity to try a Payload CMS as a backend and an administration. It stores data to Mongo DB and exposes them as GraphQL endpoint. Frontend is based on Next.js and it's new app router.
Now playing song is loaded by a client component querying every 5 seconds the GraphQL endpint and distributed using a custom use context to other client components which display the information. For a while I was thinking about using websockets, but I didn't have enough time to actually do it. Maybe next christmass?
