Deze blog is geschreven op basis van de Hackathon 2023.
Bij Your Next Concepts organiseren we elk jaar bij de start van de zomer een Hackathon. Iedereen dient innoverende, explorerende, en/of wilde ideeën in die buiten ons reguliere werk vallen. We stemmen op ideeën, en met de top drie gaan we een week lang aan de slag.
Een van de projecten die tijdens onze Hackathon is verkozen is het Scherm. In onze werkruimte hangt een scherm gekoppeld aan een raspberry-pi, waarop wat statistiekjes en informatie wordt getoond over het gebruik van onze producten. De applicatie die hierop draait hebben we natuurlijk zelf gebouwd, echter liep de informatie inmiddels een jaartje of drie achter. Hoog tijd dus om iets nieuws te ontwerpen!
Met een team van 4 engineers, twee front-end en twee back-end, zijn we aan de slag gegaan. Uit de eerste brainstorm werd al snel duidelijk wat we wilden: Vue3, uitbreidbaar, en interactief.
Onze drie hoofdproducten, SQill, EduTasQ, en Academy Attendance, gaan al een aantal jaartjes mee. De technologie stack die we gebruiken werkt goed, maar aan alles komt een einde. Zo ook voor de taal waarin we de front-end van producten hebben gebouwd: Vue2 (Eind dit jaar is Vue2 officieel end-of-life). Hoewel we nog enige tijd door kunnen, wordt de noodzaak om over te stappen naar Vue3 wel steeds dringender. We vonden het allemaal een leuke uitdaging om Vue3 beter te leren kennen, de verschillen van dichtbij te zien, en de problemen die we ongetwijfeld tegenkomen in een zandbak-omgeving (dat de Hackathon is) uit te pluizen.
Een les die we uit de vorige Hackathon hebben getrokken is dat de projecten al snel weer in de vergetelheid raken wanneer het reguliere werk weer voorrang krijgt. Voor het scherm, wat we de komende jaren elke dag weer zien, wilden we een oplossing bouwen die ook ná de Hackathon aan te passen is met nieuwe statistieken, notificaties, en andere informatie. Hiervoor zijn we tot een carrousel ontwerp gekomen dat panelen verschuift over het scherm. Elk paneel is een los component met informatie en kan toegevoegd of verwijderd worden. Zo kunnen we ook in de toekomst eenvoudig een component toevoegen, weghalen of aanpassen wanneer we behoefte hebben aan een update. Daarnaast kunnen we met een flexibele label-based datamodel onze data makkelijk in een uniform formaat opslaan, aggregeren en tonen.
Met een herontwerp van het scherm wat door alle werknemers te zien is, wilden we niet de kans laten schieten om de onderlinge binding tussen werknemers te versterken. Een interactief component waar iedereen aan deel kan nemen leek ons een leuke toevoeging in de werkruimte. In het verleden hebben we al veel leuke discussies gehad over het dilemma op dinsdag. Als proof-of-concept hebben we een component gebouwd die het dilemma van de huidige week toont. Met een slack-integratie kun je je stem uitbrengen op je favoriete dilemma, dat live naar het grafiekje op het scherm wordt gestuurd. Naast de interactieve grafiek hebben we ook Slack-commands toegevoegd die bepaalde effecten op het scherm weergeeft. Voor nu een vis (een terugkerende grap van de Hackathon van vorig jaar) die samen met het woord ‘Blub’ over het scherm zwemt, in de toekomst confetti particles en belangrijke notificaties?
We zijn erg blij met het resultaat van dit Hackathon project. Het raamwerk voor een uitbreidbare, modulaire applicatie staat en werkt goed, we hebben veel nieuwe integraties kunnen uitwerken (gitlab, slack, jira, open data van meteologie) en we hebben veel nieuwe ervaring kunnen opdoen met de nieuwe generatie van technologie (Vue3, Nuxt3, en Vite). Voor ons een geslaagde Hackathon!
.png){kind=small}
.png){kind=small}
.png){kind=small}
