Přítelkyně s kamarády a kamarádkami pravidelně spolupořádá předvánoční koncert pro další kamarády a kamarádky. Je to vždycky úžasná akce, která hned hodí člověka do vánoční atmosféry. Jelikož ale neumím zpívat, ani hrát na hudební nástroj ani jinak zvučit, rozhodl jsem se přispět tím co umím. Udělal jsem jim malý webík s informacemi o koncertě, o účinkujících a o písničkách.
V administraci je i možnost nastavit právě hranou písničku, kterou pak web zvýrazní v programu koncertu a zobrazí její text v na stránce "Právě hrajeme". Diváci v publiku se tak mohou přidat a zpívat s účinkujícími.
Na čem to je postavený? Vyzkoušel jsem si na tom Payload CMS jako backend s administrací. Ten ukládá data do Mongo DB a vystavuje naklikané informace pomocí GraphQL. Frontend je postaven na Next.js a jeho novém app routeru.
Aktuální písnička se se zjišťuje pomocí klientské komponenty GraphQL dotazováním každých 5 sekund a informace se pak distribuuje pomocí vlastního use contextu do dalších klientských komponent, které informaci zobrazují. Uvažoval jsem chvíli nad využitím websocketů, ale nezbyl mi na to čas. Třeba to vylepším příští vánoce.
