The inteface for an Upcoming Movies Web App.

• Front-end and back-end were made separately.
• The Back-end is a REST API, following the multi-layer pattern, made in Spring Boot.
• The Front-end is an application in Vue.
• It was done in this way in order to promote decoupling.

• What was and was not considered boilerplate code:
  • Framework files, libraries, third parties and configuration files were all considered boilerplate. For instance, in the front-end application there was a server.js configuration file to communicate with heroku which was considered boilerplate code. Also, a main.js and App.vue files, which were generated by a code generator, but included some additional settings to connect with routes.js and third party libraries that were considered boilerplate. Routes.js was not considered boilerplate because it is the application's route file and is necessary for review.
• Communication with the API: Because a storage tool,a database, is used, and the API listing method already includes all the necessary data, communication with the API was performed only once, when starting the application.
• What was considered an unnecessary file: The .gitignore from develop was explicitly removed because it was considered an unnecessary file and README was kept only on the master.
• How to organize in git: separate repositories for the front-end and back-end were made.

• Back-End:

  • To compile and run:
    • Install Maven on your machine.
    • Link with installation instructions:
      • On Windows: https://howtodoinjava.com/maven/how-to-install-maven-on-windows/
      • On Linux and MacOs: https: //www.baeldung.com/install-maven-on-windows-linux-mac
    • Go to folder UpcomingMoviesWebApp.
    • Compile the program. To compile:

      • Install postgres, if not already installed, in your local machine. Link for installation:

      • go to application.properties and change the configurations to run on your local machine instead of heroku (folder resources inside src/main).

        • For example :

        spring.datasource.url= jdbc:postgresql://localhost:5432/moviewebapp

        spring.datasource.username= {your postgres username}

        spring.datasource.password= {your postgres password}

        spring.jpa.hibernate.ddl-auto= create -- it's set to create in order to autommatically create the database in hibernate. for production set to validate --

      • In the terminal, go to the folder where pom.xml is located, and type:

        mvn clean package

      • To execute the application:

      • Go to the folder named target, where the application jar is located and type:

        java -jar upcomingmovieswebapp-0.0.1-SNAPSHOT.jar

• Front-End:

  • Go to this git repository and clone or download the application : https://github.com/KhadijeElzein/UpcomingMoviesWebAppInterface

  • To compile and run:

    • Install node.js and npm package manager

      • Link with installation instructions:
        • With package manager: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages
        • With installer : https://nodejs.org/en/download/

    • To install all needed dependencies, go to the application folder and type:

      npm install

    • To run the application, go to the application folder and type:

    npm run dev

Observations:

• The back-end application is running on port 9093, if you want to change just go to application.properties and change server.port to the port you desire.
• For the application to work the back-end must be executing when you execute the front-end, but because in the front-end repository, the front-end is referencing heroku that won't be a problem.
• Do not forget to install jdk 8 in your computer, because the back-end is executed in Java.

• Back-End:
  • lombok : Is a Java library that automatically writes getters and setters and constructor methods with annotations. It was used to facilitate the development in that sense.
  • postgresql connector: Is a connector for the postgres database. It was used to permit for the application to communicate with the database.
  • Spring boot: Spring boot is a framework to create stand-alone, production-grade Spring based Applications. It was use to facilitate the development of an Java EE application, with a built-in tomcat server. Spring boot web was used and Spring data jpa. Spring web was used for the construction of the REST API, with a rest controller and Spring data jpa was used to communicate with the database and make database queries with Hibernate. Hibernate is an object-relational mapping tool for the Java programming language. It is used for mapping an object-oriented domain model to a relational database.
• Front-End:
  • Vue Resource : Is used for handling ajax requests in Vue applications. It was used to make the request to the back-end API.
  • Vue Router: Is the official router for Vue.js. It was used for the routes in the front-end.
  • Bootstrap Vue: It was used integrate Bootstrap v4 components with Vue.js. For making the interface look prettier with Bootstrap.

• List all movies: http://localhost:9093/v1.0/movies
• See the details of a specific movie:http://localhost:9093/v1.0/movies/ {movie id}
• Filter and list the movies by title: http://localhost:9093/v1.0/movies?title= {movie title or part of title}

If, for any reason, the application does not show any movies, just refresh the browser and it will load.