MovieLand - Full Stack Cinema Web App

This is a showcase project for a Full Stack Web Application for a cinema operator use-case scenario, to learn different frontend/backend frameworks.

Backend - Spring Boot 3

• JPA/Hibernate to interact with the database
• REST API for external access
• Async REST-Tasks with progress indication
• Role-based JWT Token Authentication
• Access to TMDB Movie Database API

Note: You need to get your own TMDB API Key to run the backend on your local machine, add it to the application.properties in the tmdbApi.apikey value.

Frontend - Vue

• Vue User Interface with Nuxt.js
• Axios as REST-Client
• Webpages for User Login/Registration, Reservations
• Admin Dashboard Page for Statistics, Managing, Generating
• QRCode Scanning of Reservation to validate tickets

Database - H2

• In-memory Data layer for Movies, Shows, User etc.
• (Postgresql was replaced with H2 to be able to user Free Tier on Azure)

Docker

Full Docker Support with Docker-compose

• To build and run the Fullstack Application from local Dockerfiles:

mvn clean install
docker compose -f docker-compose-local.yml up --build

• To run the Fullstack Application from latest Dockerhub images:

  docker-compose up --build

• Starts Spring REST API exposed to

  http://localhost:8080/api

  For Swagger-UI: http://localhost:8080/swagger-ui.html

• Starts Spring Admin exposed to

  http://localhost:8081

• Starts Vue Frontend exposed to

  http://localhost:4000

Deployment - Github Pages + Azure App Service

• Verify built in Test job
• Build all docker images from Dockerfiles
• Push all built images to Dockerhub
• Deploy NuxtJS frontend to Github Pages
• Deploy Spring Boot backend to Azure App Service

A preview version is deployed at https://philkes.github.io/movieland/

Note: The backend API calls can be slow, since it is deployed on the free tier of Azure

Development

To start all services to develop the Backend:

docker-compose -f docker-compose-dev.yml up --build

To test and build all services from local build (including backend):

docker-compose -f docker-compose-local.yml up --build

Overtime I implemented the frontend and backend in different frameworks/languages, check out other branches for other implementations.

Monitoring

Prometheus

http://localhost:9090

Grafana

http://localhost:3000

Dashboards:

• https://grafana.com/grafana/dashboards/6756-spring-boot-statistics/

Attribution

All Movie Posters, Descriptions, Meta-data are provided by the free TMDB Movie Database API.

This product uses the TMDB API but is not endorsed or certified by