Schoolproject
CineSwipe
Extra schoolproject waarin een filmkeuze-app is ontworpen en deels gerealiseerd. Gebruikers kunnen als groep door films swipen, waarna de app op basis van gezamenlijke voorkeuren een filmvoorstel doet.
Context en idee
CineSwipe is ontstaan vanuit het probleem dat het kiezen van een film met meerdere mensen vaak veel tijd kost. Iedereen heeft eigen voorkeuren en door het grote aanbod van streamingdiensten wordt kiezen alleen maar lastiger.
Het idee was een app waarin gebruikers samen een groep vormen en daarna door filmvoorstellen swipen. Net als bij Tinder keur je films goed of af. Op basis van de voorkeuren van alle groepsleden kiest de app daarna een film die het beste bij de groep past.
Het project begon na het onderdeel requirements engineering. In de eerste periode van leerjaar 4 hebben we in een groep van 3 studenten de eisen en wensen opgehaald. In de periode daarna is met een samengevoegd team van 7 studenten een start gemaakt met de realisatie.
Requirements
In de requirementsfase zijn we in gesprek gegaan met de opdrachtgever om de belangrijkste doelen, wensen en beperkingen van de app scherp te krijgen. Daarnaast hebben we een enquete gebruikt om ook de wensen van mogelijke gebruikers mee te nemen.
De requirements zijn uitgewerkt met de Volere-methode. Daarbij is onderscheid gemaakt tussen must-, should- en could-requirements. Voorbeelden van belangrijke eisen waren accountregistratie, inloggen, groepen aanmaken of joinen, filmvoorstellen swipen en een groepsresultaat tonen op basis van gezamenlijke voorkeuren.
Naast de requirements is er een risicoanalyse uitgevoerd. Daardoor werd duidelijk waar de grootste onzekerheden zaten, zoals het correct matchen van groepsvoorkeuren, het ophalen van filmdata en het bouwen van een flow die ook voor gastgebruikers simpel blijft.
Stakeholders
Eisen opgehaald bij de opdrachtgever en vertaald naar concrete functionaliteit voor groepsgebruikers en beheer.
Gebruikersonderzoek
Met een enquete onderzocht hoe gebruikers samen films kiezen en welke functies het keuzeproces makkelijker maken.
Snowcards
Requirements uitgewerkt tot snowcards, zodat de eisen per functie duidelijk beschreven, bespreekbaar en controleerbaar waren.
Ontwerp
Voor de realisatie is eerst een ontwerpdocument gemaakt in de stijl die ook bij het afstuderen wordt verwacht. Daarin zijn de belangrijkste onderdelen uitgewerkt met het 4+1-model, UML-diagrammen, wireframes en een databaseontwerp.
In de physical view is de app verdeeld in een React/Vite-frontend, een Node.js Express-backend, een MariaDB-database en externe services voor filmdata en e-mail. In de process view is de gebruikersflow uitgewerkt: inloggen of als gast deelnemen, een groep joinen, swipen, wachten op andere groepsleden en daarna een gezamenlijk resultaat ontvangen.
De wireframes hielpen om de app concreet te maken voordat er gebouwd werd. Denk aan schermen voor inloggen, registreren, groepen beheren, filters instellen, swipen, wachten op groepsleden en het tonen van het eindresultaat.
Realisatie
De realisatie was een extra opdracht zonder cijfer. Daardoor lag de inzet binnen het team wisselend. Ik heb vooral de technische basis verder opgepakt, met focus op het loginmechanisme, het groepssysteem en de basis van de swipe-flow.
De app is niet volledig afgemaakt, maar er staan wel sterke onderdelen in. Er is een fullstack basis opgezet met Docker, een frontend in React en een backend in Express. Ook zijn er modellen gemaakt voor gebruikers, groepen, groepsleden, films, swipes, matchsessies en resultaten.
Voor mij was dit project vooral waardevol omdat requirements, ontwerp en realisatie dicht bij elkaar kwamen. De keuzes uit het ontwerp moesten uiteindelijk ook echt vertaald worden naar routes, models, authenticatie, schermen en dataflows.
Technische onderdelen
Authenticatie
Inloggen en registreren zijn uitgewerkt met Express, bcrypt, JWT-tokens, refresh-cookies, e-mailverificatie, wachtwoord-reset, CSRF-controle en rate limiting.
Groepen
De app werkt met groepen, join-codes en groepsleden. Daardoor kunnen gebruikers gezamenlijk in dezelfde filmsessie terechtkomen.
Swipe-flow
In de frontend zijn swipeable movie cards gebouwd met React en Framer Motion, zodat gebruikers films kunnen accepteren of afwijzen met een duidelijke visuele interactie.
Database
Met Sequelize en MariaDB zijn modellen gemaakt voor gebruikers, groepen, films, swipes, matchsessies en resultaten.
Docker
De ontwikkelomgeving bestaat uit losse containers voor frontend, backend en database. Daardoor is de app eenvoudiger lokaal te starten.
Filmdata
Het ontwerp en de backend houden rekening met externe filmdata, zodat de app films kan ophalen, opslaan en later gebruiken in de swipe-sessies.
Resultaat
Het project heeft vooral een sterke basis opgeleverd voor een fullstack filmkeuze-app. De belangrijkste onderdelen die zijn opgezet zijn het authenticatiesysteem, de groepsstructuur, het datamodel, de Docker-omgeving en een werkende swipe-interface.
Omdat het project een extra opdracht was, is de applicatie niet volledig afgerond. Toch laat de code goed zien hoe requirements en ontwerp kunnen worden vertaald naar een technische basis met frontend, backend, database en beveiligingsonderdelen.
Wat ik geleerd heb
- Hoe je requirements ophaalt via gesprekken met een opdrachtgever en onderzoek onder gebruikers.
- Hoe de Volere-methode helpt om eisen concreet, bespreekbaar en controleerbaar te maken.
- Hoe je een ontwerpdocument maakt met 4+1-view, UML-diagrammen, wireframes en databaseontwerp.
- Hoe authenticatie in een fullstack app werkt met tokens, cookies, CSRF en wachtwoordbeveiliging.
- Dat projectafbakening en teamafstemming belangrijk zijn, vooral wanneer een opdracht naast het reguliere programma loopt.