Bouw Uw Border
- Type productBorder configurator applicatie
- In opdracht vanTuinplantenwinkel.nl
- Gebruikte technologieënReact, Next.js, Typescript, Tailwind UI, Tailwind CSS, Vercel, DatoCMS, Lightspeed
Afstudeerproject
Voor mijn afstudeerproject heb ik een applicatie ontworpen die mensen helpt met het maken van een ontwerp voor hun planten border (een vak planten in de tuin). Een half jaar heb ik onderzoek gedaan naar wat mensen precies nodig hebben bij een applicatie zoals deze, ik heb tests uitgevoerd en uiteindelijk door middel van meerdere versies en iteraties kwam hier een ontwerp en prototype uit.
Hiermee heb ik mijn opleiding ook mooi kunnen afronden.
Tijdens het project kwam Tuinplantenwinkel.nl naar mij toe en vroeg of ik deze applicatie ook echt wilde gaan bouwen nadat ik afgestudeerd was. Dit heb ik het afgelopen 9 maanden gedaan.
Van ontwerp naar werkende applicatie
Voor dit project moest ik echt mijn eigen krachten gebruiken, er was namelijk alleen een part-time developer bij Tuinplantenwinkel. Ik heb dus veel research gedaan, uitleg filmpjes gekeken en documentatie doorgenomen.
Uiteindelijk ben ik ontzettend trots op de applicatie die er is ontstaan. Ik vind het heel gaaf om te zien dat iets dat ik heb gebouwd, ook echt gebruikt wordt door mensen die er elke dag iets aan hebben.
De werking
Je begint met een aantal belangrijke punten over de tuin zoals de afmeting, je kiest uit welke stijl van planten je leuk vindt, en uiteindelijk kun je zelf de puntjes op de i zetten.
De technische details
Toen ik aan dit project begon was net Next.js 13 beschikbaar, dit kwam met veel veranderingen en een andere router, de App router.
Ik heb dit project kunnen gebruiken om precies te leren hoe deze nieuwe manier van Next.js werkt.
De informatie die een gebruiker invult in de applicatie wordt via een serialized url meegegeven naar de volgende pagina, zodat deze aan het einde gebruikt kan worden om voorstellen van planten te geven. De reden dat de url gebruikt word is dat hierdoor alle configuraties gedeeld kunnen worden met anderen.
Uiteindelijk komt het neer op een grote filter: er is een hele lange lijst met planten, en elke keer als de gebruiker een vraag beantwoord vallen er weer wat planten af. Wil de gebruiker geen kleurrijke planten? Dan gaan deze weg.
Zo komt er uiteindelijk een ontwerp uit dat is gebasseerd op de wensen van de klant.