┌─────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ Google App Engine │
│ │
│ ┌─────────────┐ │
│ │ │ │ ┌───────────┐
│ │ Firebase ◄──────Token Verification──┐ │ │ │
│ │ │ │ │ │ TMDb │
│ └────▲────────┘ │ │ │ │
│ │ │ │ └─────▲─────┘
│ │ │ │ │
│ ┌────┼───────────────────────────────────┼─────────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │ │
│ │ │ │ Spring Boot App │ │ │
│ │Login/Register │ │ │ Movie API Call
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ ┌──┴───────────┐ ┌─────────────┴──────────────────────┐ ┌───────────────────┐ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ │ │ Angular App ├─────────► WebSecurityConfigurerAdapter.java ├────────────► MovieService.java ├─┼───┼────────┘
│ │ │ │ │ │ │ │ │ │
│ │ └──────────────┘ └────────────────────────────────────┘ └───────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────┘
This is a Spring Boot / Angular app hosted on google app engine. The static UI generated by Angular is in src/main/resources/static folder. I've used Angular for User Management using Firebase on Google App Engine. It takes care of Registration, Verification, Login etc.
Once the user has logged in, the MovieService.java makes a call to the TMDb API and gets latest top five popular movies currently running in Australia using the two API calls given below:
https://api.themoviedb.org/3/genre/movie/list?api_key=*****®ion=AU
https://api.themoviedb.org/3/movie/popular?api_key=*******®ion=AU
from which I parse the top five movies and send a json response back to Angular app in the following format
{
"movies": [
{
"id" : 1,
"title" : "Orphan: First Kill",
"genre" : ["Horror", "Thriller"],
"poster_url": "https://image.tmdb.org/t/p/w500/wSqAXL1EHVJ3MOnJzMhUngc8gFs.jpg"
},
{
"id" : 2,
"title" : "Fall",
"genre" : ["Thriller"],
"poster_url": "https://image.tmdb.org/t/p/w500/spCAxD99U1A6jsiePFoqdEcY0dG.jpg"
},
{
"id" : 3,
"title" : "Bullet Train",
"genre" : ["Action", "Comedy", "Thriller"],
"poster_url": "https://image.tmdb.org/t/p/w500/tVxDe01Zy3kZqaZRNiXFGDICdZk.jpg"
},
{
"id" : 4,
"title" : "Pinocchio",
"genre" : ["Fantasy", "Adventure", "Family"],
"poster_url": "https://image.tmdb.org/t/p/w500/g8sclIV4gj1TZqUpnL82hKOTK3B.jpg"
},
{
"id" : 5,
"title" : "Beast",
"genre" : ["Adventure", "Drama" ,"Horror"],
"poster_url": "https://image.tmdb.org/t/p/w500/iRV0IB5xQeOymuGGUBarTecQVAl.jpg"
},
]
}
Angular then uses https://material.angular.io/ to display the results in UI