--- title: "Mitt hobbyprosjekt: Quizerator" url: "https://www.bekk.christmas/post/2024/10/quizerator" authors: ["Kjetil Svalestuen"] published: "2024-12-10" updated: "2024-12-11T20:24:13Z" language: "nb-NO" type: "article" tags: ["Hobby"] keywords: ["quiz", "quizerator", "ai", "react", "typescript", "bun", "websocket"] series: "Mitt hobbyprosjekt" --- # Mitt hobbyprosjekt: Quizerator Quizerator er et spill for å konkurrere i flervalgsspørsmål, med en enkel vri – du slipper å komme på spørsmålene selv! ## Kort fortalt Quizerator er et nettbasert flerspillerspill for flervalgsspørsmål der en språkmodell lager spørsmål ut fra et valgt tema, og spillerne kan så redigere og spille quizen i sanntid. Prosjektet viser også hvordan en enkel arkitektur med React, TypeScript, Bun, Supabase og OpenAI kan brukes, og at det ofte lønner seg å holde kompleksiteten nede fremfor å optimalisere for tidlig. - **Passer for:** Utviklere som er interessert i hobbyprosjekter, webspill og bruk av språkmodeller i produkter - **Fint å kunne fra før:** Grunnleggende kjennskap til webutvikling, React og TypeScript _Generert med KI_ ## Hva er prosjektet? Quizerator er et multiplayer, web-basert spill der du konkurrerer i flervalgsspørsmål. For å spille en runde trenger du noen gode venner eller kollegaer, 3-6 minutter og et tema for quizzen. Spillet gjennomføres omtrent som en Kahoot – du oppretter et spill, og deltagerne blir med via en kode. Så svarer alle på spørsmålene etter beste evne, og de raskeste blir belønnet med flest poeng. Men Quizerator har et ess i ermet. Vanligvis trenger du en dedikert quizmaster til å komme på noen treffende spørsmål og presentere dem på en fornuftig måte. Det slipper du her! Du trenger bare å skrive inn et passende tema, og appen tryller frem et ønsket antall spørsmål helt på egen hånd. Herifra kan du tilpasse quizzen ved å endre, slette eller legge til spørsmål. Men hvis du føler deg ekstra modig, kan du «prøve lykken» og starte quizzen uten at noen i gruppen kjenner fasiten! ## Hva inspirerte deg til å lage det? Kahoot og andre, lignende plattformer har ofte begrensninger på features og antall spillere, med mindre du betaler for en abonnementsløsning. Etter et ubeleilig møte med slike begrensninger, i et øyeblikk av «_hvor vanskelig kan det være?_», satte jeg i gang med å lage min egen variant. Dette er kanskje ikke verdens nobleste motiv, men det trigget en prosess. Nå er det gleden av å utforske spennende teknologi og takle nye utfordringer som driver prosjektet fremover. Utfordringer som å styre med sanntidskommunikasjon mellom webklienter. Eller den evinnelige kampen for å minimere hallusineringer av en språkmodell. ## Hva er tech-stacken? Quizerator er i all hovedsak et spill, med høye krav til brukerinteraksjon og fleksibilitet. Derfor valgte jeg å skrive frontenden som en Single Page Application (SPA), i stacken jeg er aller mest komfortabel med – React og Typescript. Jeg er også over snittet glad i CSS, og koser meg med å skrive et eget, lite komponentbibliotek på si. Backenden kjører på Bun, et raskere alternativ til Node med _batteries included_. Blant annet får du innebygget støtte for Typescript, HTTP og ikke minst Websockets. Quizzene og annen data er lagret i Supabase, som også håndterer brukerdata og -autentisering. Quizgenereratoren integrerer mot ChatGPT 4o via OpenAI sitt API. ## Hva er en ting du har lært? Grunntanken er å bygge et robust og ukomplisert produkt. Derfor har jeg ikke fokusert på å lære meg et nytt programmeringsspråk eller rammeverk. Jeg tok utgangspunkt i React og Typescript, teknologier som for meg er synonymt med fart og flyt. Det betyr imidlertid ikke at jeg ikke har lært noe. Min største lærdom handler om å unngå tidlig optimalisering. Quizerator kjører på Fly.io, en applikasjonsplattform som skryter av endeløse muligheter for skalering av applikasjonen din. Det skal være enkelt å fyre opp nye servere etter behov, og rive dem ned når trafikken synker. Det var bare ett problem. For serveren min dealer med informasjon om quizzer, aktive spill og tilkoblede spillere. Og alt dette er lagret i minnet. Hvordan skal denne staten synkroniseres mellom serverne, og hvordan skal spillerne kobles til riktig server? Jeg brukte mye tid i sommer på å utforske disse problemstillingene. Ett slik forsøk handlet om å flytte all state fra serveren til en database hos Supabase, for en _serverless_ tilnærming. I teorien høres dette forlokkende ut. I praksis førte det til helt nye utfordringer knyttet til synkronisering, race conditions og middelmådig responstid. For all del, dette er interessante problemer. Men for min del var dette raskeste vei til manglende motivasjon. Jeg kjører nå applikasjonen på én server, og trives godt med mindre kompleksitet. Det er nok utfordringer å bryne seg på, for det _var_ faktisk ganske vanskelig å lage en quizzplattform. Fikk du også lyst på en utfordring? Til neste kaffepause med teamet, lag en skreddersydd quiz med Quizerator! 🚀 ## Relevante lenker anbefalt av forfatteren - [Quizerator.eu](https://quizerator.eu/)