Skip to content

Full Stack Web App Example including Vue-Nuxt, Spring Boot, Grafana, Loki and Tempo

License

Notifications You must be signed in to change notification settings

PhilKes/movieland

Repository files navigation

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

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

https://localhost:9090

Grafana

https://localhost:3000

Dashboards:

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