Jarno Hennes
Terug naar geselecteerd werk

Een complete filmervaring bouwen in Next.js

CinemaVerse

Een tweetalig filmplatform met accounts, reviews, ratings, watchlists en een afgeschermde adminomgeving.

Frontendontwikkeling en API-integratie

  • Next.js
  • React
  • TypeScript
  • SWR
  • Spring Boot
  • PostgreSQL
Bezoekerskant · De catalogus combineert filtering, ratings en persoonlijke watchlistacties.
Context
Full-Stack Software Development
Team
Jarno Hennes en Akasha Lo Bue
Mijn rol
Frontendontwikkeling en API-integratie
Frontend
Next.js, React, TypeScript, SWR en CSS Modules
Backend
Java, Spring Boot, Spring Security, JPA en PostgreSQL
Ervaring
Nederlands en Engels, dark en light mode

Project en context

Voor het vak Full-Stack Software Development bouwde ik samen met Akasha Lo Bue CinemaVerse. De eerste frontend werkte met lokale filmdata en groeide daarna uit tot een tweetalig platform met dynamische API-data, accounts, rollen, reviews, ratings, watchlists en een afgeschermde adminomgeving.

Filmoverzicht en filters

De bezoekerservaring start bij een scanbare filmcatalogus. Genreknoppen passen de resultaten onmiddellijk aan, terwijl ratings en watchlistacties binnen dezelfde overzichtelijke structuur zichtbaar blijven.

Stap 1 · Actieve filters geven direct een nieuwe resultaatset en een zichtbaar resultaataantal.

Filmdetails en reviews

Vanuit het overzicht opent de bezoeker een detailpagina met metadata, trailer, gemiddelde rating en reviews. Aangemelde gebruikers kunnen een eigen review plaatsen en alleen hun eigen bijdrage bewerken of verwijderen.

Stap 2 · De detailpagina brengt metadata, trailer en gemiddelde rating samen.
Stap 3 · Alleen de auteur ziet acties om de eigen review te bewerken of verwijderen.

Persoonlijke watchlist

Iedere gebruiker kan een eigen watchlist beheren. Dezelfde inhoud blijft helder in dark en light mode en na het aanmelden keert de gebruiker terug naar de film waar de actie begon.

Stap 4 · Aangemelde gebruikers bewaren een persoonlijke selectie in dark mode.
Stap 4 · Dezelfde persoonlijke watchlist behoudt haar hiërarchie in light mode.

De administratieve kant

Waar bezoekers films ontdekken en persoonlijke acties uitvoeren, beheert een bevoegde administrator de catalogus. De afgeschermde invoerstroom combineert rolcontrole, validatie, genres en acteurs. Na opslag via de API verschijnt de nieuwe film direct aan de bezoekerskant.

Administratieve kant · Een afgeschermd formulier bundelt validatie, genres, acteurs en links naar media.
Van admin naar bezoeker · De opgeslagen film verschijnt meteen als volwaardige detailpagina.

Taakverdeling binnen het team

Mijn focus lag op de Next.js-frontend en API-integratie. Akasha nam voornamelijk de Spring Boot-backend, database, beveiliging, API-endpoints en tests op zich en droeg ook bij aan de frontend. We bespraken integratieproblemen samen en testten oplossingen over de grens tussen frontend en backend.

Mijn rol

Ik werkte aan het filmoverzicht, de detailpagina's, authenticatie, registratie, reviews, watchlists, het adminformulier, responsive ontwerp en de koppeling van deze schermen met de API. Die rol was frontendgericht, maar vereiste voortdurend afstemming met de backend.

Belangrijkste uitdaging

De grootste uitdaging was de lokale frontend stap voor stap ombouwen naar een rolbewuste applicatie met dynamische data, zonder de bezoekerservaring ingewikkeld te maken. Loading states, fouten, authenticatie en API-responses moesten in elk scherm voorspelbaar samenkomen.

Resultaat

CinemaVerse groeide dankzij die samenwerking uit tot een samenhangend platform met een moderne interface en een beveiligde backend. Het project toont zowel mijn frontendvaardigheden als mijn vermogen om technische problemen samen op te lossen en binnen een full-stackteam te werken.