Introductie
Binnen het vak ‘Angular’ kregen we als team van vijf studenten de opdracht om een volledige webapplicatie te realiseren die het beheer van een muziekfestival mogelijk maakt. Het resultaat: Laser Llama, een digitale festivaltool die zowel bezoekers als organisatoren ondersteunt.
Mijn hoofdverantwoordelijkheid binnen het project lag bij het bouwen van de frontend met Angular. Ik heb me toegelegd op het uitwerken van de beheersinterface voor organisatoren, het vormgeven van een intuïtieve gebruikerservaring en het koppelen van deze frontend aan de backend API.
Wat houdt “Laser Llama” in
Laser Llama bestaat uit twee delen:
- Een publieke website waar bezoekers de festivalinformatie kunnen raadplegen: line-up, podia en tickets.
- Een afgeschermde beheermodule waar de organisatie volledige controle heeft over de inhoud.
Gebruiksvriendelijke interface voor beheerders
Mijn focus lag op het ontwikkelen van de ‘admin’-omgeving. Deze biedt organisatoren de mogelijkheid om via duidelijke en gestructureerde schermen alles rond artiesten, optredens, tijdschema’s en podia te beheren. Door gebruik te maken van overzichtelijke formulieren en interactieve componenten konden we een vlotte werkervaring garanderen.
Voor het visuele aspect bouwde ik verder op het gekozen thema van het team: een donkere interface met felle neonaccenten die aansluiten bij de festivalsfeer. Elk onderdeel van de frontend werd met Angular opgebouwd, met herbruikbare componenten en duidelijke navigatie.
Aanpak en technische specificatie
Van idee tot uitvoering
Voor we aan de slag gingen met de code, hebben we als team gebrainstormd over het concept en de structuur van de applicatie. Nadat de globale richting bepaald was, werkten we samen aan de datamodellen en API-koppelingen.
Frontend in Angular
Ik bouwde de frontend van de beheermodule volledig in Angular, inclusief routing, componentstructuur, services en datakoppeling via HTTP. De frontend werd verbonden met een .NET Core API, die door een van mijn teamgenoten werd ontwikkeld. Hierdoor konden we alle beheersfunctionaliteiten (zoals aanmaken, bewerken en verwijderen van artiesten of optredens) in de frontend verwerken.
Authenticatie met Auth0
Samen met een teamgenoot zorgde ik voor de integratie van Auth0, waarmee gebruikers kunnen inloggen en beheerders toegang krijgen tot de juiste delen van de app. Dankzij rolgebaseerde toegang werd de veiligheid van de adminomgeving gegarandeerd.
Live zetten van de frontend
Na afwerking heb ik geholpen met het online zetten van de Angular-app via een externe webhost. De frontend communiceert live met de backend-API die op Azure draait, wat resulteerde in een volledig functionerende, publiek toegankelijke applicatie.
Reflectie
Het Laser Llama-project was voor mij een waardevolle kans om mijn vaardigheden in Angular op een realistische manier te verdiepen. Ik leerde hoe je een complexe frontend opbouwt, integreert met externe systemen en gebruiksvriendelijk maakt voor eindgebruikers.
Het was bijzonder leerrijk om vanaf nul een beheersplatform uit te werken, waarbij ik niet enkel focuste op de techniek, maar ook op de gebruikservaring. Dankzij dit project voel ik me veel sterker in het bouwen van moderne webinterfaces en begrijp ik beter hoe frontend en backend samenwerken in een full-stack context.