Batao Matchmakers
De Batao Matchmakers-app is ontwikkeld voor de Webwinkel Vakdagen als een interactieve manier om bezoekers kennis te laten maken met verschillende webshops van Batao. Gebruikers beantwoorden vragen en ontdekken met welke webshop ze het beste matchen.
De applicatie werd gebouwd als web-app en later omgezet naar een Android-app met Capacitor, zodat deze soepel werkt op mobiele apparaten tijdens het event. Het doel was om op een speelse en moderne manier te laten zien wat Batao kan realiseren, en bezoekers actief te betrekken bij het merk.
Gebruikte technologieën
Mijn rol binnen het project
Binnen dit project heb ik me voornamelijk beziggehouden met de styling en gebruiksvriendelijkheid van de app. Ik werkte aan het Webshops-overzicht, inclusief auto-scroll en handmatige scroll voor grotere lijsten, en aan de Vragenpagina, waar gebruikers vragen beantwoorden om een match te krijgen.
Daarnaast heb ik de oorspronkelijke web-app volledig omgezet naar een Android-app met behulp van Capacitor, zodat de app volledig op mobiele apparaten functioneel en vloeiend werkt. Mijn focus lag erop dat de app er verzorgd uitzag, makkelijk te navigeren was en responsief bleef op verschillende schermformaten.
Webshops-overzicht
Voor het Webshops-overzicht heb ik het scherm volledig gestyled met Tailwind CSS en geoptimaliseerd voor een vloeiende gebruikerservaring tijdens de Webwinkel Vakdagen. Bezoekers kunnen hier eenvoudig door alle deelnemende webshops bladeren. Voor grotere lijsten met webshops heb ik zowel auto-scroll als handmatige scroll toegevoegd, zodat de interface soepel en overzichtelijk blijft, ongeacht het aantal items.
Vragenpagina
De Vragenpagina vormt de kern van de matching-functionaliteit. Hier beantwoorden bezoekers meerdere vragen om te ontdekken met welke webshop ze het beste matchen. Sommige vragen worden alleen getoond afhankelijk van eerdere antwoorden, waardoor de flow dynamisch en persoonlijk is.
Alle vragen zijn opgeslagen in de database, zodat ze eenvoudig beheerd en uitgebreid kunnen worden. In React wordt vervolgens de juiste volgorde en weergave geregeld, inclusief conditional rendering voor vragen die afhankelijk zijn van eerdere antwoorden. De pagina is volledig responsive opgebouwd met Tailwind CSS, zodat alles goed werkt op verschillende schermformaten, van mobiele telefoons tot tablets.