Movie Exercise Challenge

The goal of the exercise is to make a fullstack movie application within 1 week.

Requirements:

• Create technical design doc to describe solution to a given execise
• Create client side:
  • Create the layout exactly like the homepage design below
  • Font-family is Helvetica
  • The top banner needs to be a carousel (a slideshow with 3 images)
  • Request the Get Popular, Get Top Rated, Get Upcoming APIs and populate the data into the content grid view, scroll down the grid view to see more movies, select Popular/Top Rated/Upcoming to see the relevant content grid view.
  • Request the Get Movie List or Get TV List APIs to get the genres and fill up to dropdown Genre
  • Optional
    • Create unit tests to verify your tasks is a plus
    • UI with a nice looking and user-friendly design is a plus
    • The pages should be responsive on different browsers is a plus
    • Design your web app to close as much as your production code is a plus
• Create server side:
  • Write UTs + ITs to verify tasks
  • Optional
    • Caching
    • Performance Testing
• Delivery:
  • The source code should be published on Github with a ReadMe.md file to describe the assignment project information including third parties, how to build and run the web app.
  • This assignment is designed to gauge your skills and give us an idea of how you approach tasks relevant to the Fullstack developer role. It would be great if you could send this over to us within 7 days

Application Architecture

• Project structure
  • client - Single page application using Angular 8 as front-end technology to develop Movie UI
  • server - CRUD RESTFul APIs for Movie Management System
• Technical design: link

Output

Configure Movie data using GUI

By default, there are 3 movies are populated by the server side when running. To populate more movies for testing, accessing to http://localhost:9080/#/movie-management then click on 'populate movie data' table (wait for 1 minute).

Movie Management Page

Movie Page

Desktop layout	Mobile Layout

Tools used

For building and running the application we need:

• JDK 1.8
• Maven 3
• Node 10
• MariaDB
• InteliJ, Visual Studio Code

Technology Stack

Server

• Tomcat server
• Spring Boot
• Spring REST DATA
• Spring JPA

Client

• Angular 8
• Bootstrap 4

Using the application

Using in produciton

1. Start MariaDB/MySQL then create moviedb database

2. Build the application

mvn clean install

3. Run the application

cd server 
mvn clean spring-boot:run -Pprod

Using in Development

Application profiles

The application supports to work on multiple profiles

• local - for local local (running on port 9080 and using H2 databse)
• dev - for local development (running on port 9080 and using MariaDB databse)
• prod - for local production (running on port 8080 and using MariaDB databse)

Note: Application will use the local profile by default.

Start the backend server

server > mvn clean spring-boot:run -Plocal

the server running on port 9080

Start the client

client > npm run start

Visit to http://localhost:4200 to view the home page

Using H2 database in local development

in-memory database running inside application in local mode, access it at http://localhost:9080/h2-console/ by deault

Using HAL Browser

Access it at http://localhost:9080/api/v1

Running tests

1. Integration tests

server > mvn integration-test

2. UI tests

client > npm run test

Code quality