Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philkes/movieland
Full Stack Web App Example including Vue-Nuxt, Spring Boot, Grafana, Loki and Tempo
https://github.com/philkes/movieland
docker fullstack grafana javascript jwt-authentication loki nuxtjs prometheus spring-boot vue vuetify
Last synced: 1 day ago
JSON representation
Full Stack Web App Example including Vue-Nuxt, Spring Boot, Grafana, Loki and Tempo
- Host: GitHub
- URL: https://github.com/philkes/movieland
- Owner: PhilKes
- License: apache-2.0
- Created: 2020-02-02T16:43:29.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T08:31:31.000Z (10 months ago)
- Last Synced: 2024-04-24T06:20:59.108Z (9 months ago)
- Topics: docker, fullstack, grafana, javascript, jwt-authentication, loki, nuxtjs, prometheus, spring-boot, vue, vuetify
- Language: Java
- Homepage: https://philkes.github.io/movieland/
- Size: 14.7 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```shell
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
For Swagger-UI: http://localhost:8080/swagger-ui.html
* Starts **Spring Admin** exposed to
* Starts **Vue** Frontend exposed to
## 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](https://azure.microsoft.com/en-us/products/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:
```shell
docker-compose -f docker-compose-dev.yml up --build
```
To test and build all services from local build (including backend):
```shell
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
