Jarno Hennes
Back to selected work

Building a complete movie experience in Next.js

CinemaVerse

A bilingual movie platform with accounts, reviews, ratings, watchlists and a protected admin area.

Frontend development and API integration

  • Next.js
  • React
  • TypeScript
  • SWR
  • Spring Boot
  • PostgreSQL
Visitor side · The catalogue combines filtering, ratings and personal watchlist actions.
Context
Full-Stack Software Development
Team
Jarno Hennes and Akasha Lo Bue
My role
Frontend development and API integration
Frontend
Next.js, React, TypeScript, SWR and CSS Modules
Backend
Java, Spring Boot, Spring Security, JPA and PostgreSQL
Experience
Dutch and English, dark and light modes

Project and context

For the Full-Stack Software Development course, I built CinemaVerse together with Akasha Lo Bue. The first frontend used local movie data and then grew into a bilingual platform with dynamic API data, accounts, roles, reviews, ratings, watchlists and a protected admin area.

Movie overview and filters

The visitor experience starts with a scannable movie catalogue. Genre controls update the results immediately, while ratings and watchlist actions remain visible within the same clear structure.

Step 1 · Active filters immediately produce a new result set and a visible result count.

Movie details and reviews

From the overview, visitors open a detail page with metadata, a trailer, average rating and reviews. Signed-in users can publish a review and can edit or remove only their own contribution.

Step 2 · The detail page brings metadata, a trailer and average rating together.
Step 3 · Only the author sees actions to edit or remove their own review.

Personal watchlist

Each user can manage a personal watchlist. The same content remains clear in dark and light modes, and after signing in the user returns to the movie where the action started.

Step 4 · Signed-in users keep a personal selection in dark mode.
Step 4 · The same personal watchlist preserves its hierarchy in light mode.

The administrative side

While visitors discover movies and use personal features, an authorised administrator manages the catalogue. The protected input flow combines role checks, validation, genres and actors. After being stored through the API, the new movie appears immediately on the visitor side.

Administrative side · A protected form combines validation, genres, actors and media URLs.
From admin to visitor · The saved movie immediately appears as a complete detail page.

Responsibilities within the team

My focus was the Next.js frontend and API integration. Akasha mainly handled the Spring Boot backend, database, security, API endpoints and tests, and also contributed to the frontend. We discussed integration problems together and tested solutions across the frontend-backend boundary.

My role

I worked on the movie overview, detail pages, authentication, registration, reviews, watchlists, the admin form, responsive design and connecting these screens to the API. My role focused on the frontend but required continuous coordination with the backend.

Main challenge

The main challenge was transforming the local frontend step by step into a role-aware application with dynamic data without making the visitor experience complicated. Loading states, errors, authentication and API responses had to come together predictably in every screen.

Result

Through that collaboration, CinemaVerse grew into a cohesive platform with a modern interface and a secure backend. The project demonstrates both my frontend skills and my ability to solve technical problems together and work within a full-stack team.