Een afbeelding waarop de UI van de weekmenuplanner te zien is.

Stageproject: Menu Planner

MenuPlanner is een webapplicatie ontwikkeld tijdens mijn stage bij Afternoon Software Solutions.
De tool helpt bezorgers om klanten en hun maaltijdkeuzes eenvoudig te beheren.
Ik bouwde het klanten- en bestellingsscherm met Blazor en ontwierp de interface eerst in Figma.
De applicatie is geoptimaliseerd voor gebruik op tablet en gekoppeld aan een Entity Framework database.

Project Overzicht

MenuPlanner is een webapplicatie die ik ontwikkeld heb tijdens mijn stage bij Afternoon Software Solutions, een klein softwarebedrijf dat maatwerkoplossingen bouwt voor KMO’s. De applicatie is bedoeld voor een klant die maaltijden aan huis levert aan mensen die niet meer (willen) koken. Klanten kunnen hun menu per dag kiezen, bestaande uit een soep, hoofdgerecht en dessert. De webapp wordt gebruikt door bezorgers en medewerkers om eenvoudig klanten en hun bestellingen te beheren.
Mijn opdracht was om twee belangrijke schermen te ontwikkelen: één voor het registreren en beheren van klanten, en één voor het beheren van hun bestellingen. Omdat de applicatie bedoeld is voor gebruik op tablets, heb ik bij het ontwerpen sterk gefocust op gebruiksvriendelijkheid: grote knoppen, voldoende ruimte tussen elementen, en modals in plaats van aparte pagina’s. De ontwerpen heb ik eerst uitgewerkt in Figma. Daarna heb ik deze vertaald naar werkende componenten in Blazor, waarbij ik telkens rekening hield met herbruikbaarheid en leesbaarheid.
Voor de backend zette ik de nodige datamodellen op en koppelde ik alles via Entity Framework. Omdat het project op dat moment nog niet officieel bevestigd was door de klant, werd er gewerkt met lokale data in plaats van een live databasekoppeling.
Dit project was voor mij een waardevolle ervaring waarin ik zelfstandig een project van A tot Z mocht aanpakken. Blazor was nieuw voor mij, maar het klikte al snel dankzij mijn ervaring met C# en component-based denken. Ik ben trots op het resultaat en heb er veel van geleerd.

Belangrijkste Kenmerken

  • Klantenbeheer: Bezorgers kunnen eenvoudig klanten toevoegen en wijzigen, inclusief dieetvoorkeuren en allergieën.
  • Bestellingen per week: Per dag van de week kunnen gebruikers aangeven welke maaltijd de klant wenst, met overzichtelijke structuur en collapsible elementen.
  • Tabletvriendelijk ontwerp: De UI is ontworpen voor bediening op tablet, met grote knoppen en modals voor een vlotte gebruikerservaring.
  • Gebouwd met Blazor: Frontend en logica zijn uitgewerkt in Blazor, met herbruikbare componenten.
  • Database met Entity Framework: De applicatie maakt gebruik van een relationele database die werd opgezet met Entity Framework.

Mijn Rol in het Project

Mijn opdracht was om voor een toekomstig project enkele kernschermen uit te werken in Blazor. Ik startte met het opzetten van de database en ontwierp de volledige UI in Figma. Daarna ontwikkelde ik het klantenregistratieformulier en het bestellingscherm, telkens met herbruikbare componenten en validatie. Tot slot schreef ik een testdocument uit waarmee collega’s mijn werk manueel kunnen testen zonder technische kennis.

Gebruikte Technologieën

  • ASP.NET Blazor: Gebruikt voor het bouwen van de webinterface met component-based structuur.
  • Entity Framework Core: Voor het opzetten en koppelen van de database aan de applicatie.
  • Figma: Voor het ontwerpen van de gebruikersinterface.
  • CSS: Custom styling zonder gebruik van frameworks zoals Bootstrap.
  • Visual Studio: Gebruikt als ontwikkelomgeving voor het Blazor-project.