Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cminhho/movie-exercise-challenge
Movie Exercise Challenge (Spring Boot + Angular 8)
https://github.com/cminhho/movie-exercise-challenge
angular8 spring-boot spring-jpa spring-rest-data
Last synced: 8 days ago
JSON representation
Movie Exercise Challenge (Spring Boot + Angular 8)
- Host: GitHub
- URL: https://github.com/cminhho/movie-exercise-challenge
- Owner: cminhho
- Created: 2019-07-25T07:21:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T02:30:52.000Z (about 2 years ago)
- Last Synced: 2024-11-16T21:16:28.659Z (2 months ago)
- Topics: angular8, spring-boot, spring-jpa, spring-rest-data
- Language: Java
- Homepage:
- Size: 56.1 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
- [Maven 3](https://maven.apache.org)
- [Node 10](https://nodejs.org/en/)
- 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
```shell
mvn clean install
```
3. Run the application
```shell
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
```shell
server > mvn clean spring-boot:run -Plocal
```
the server running on port 9080
#### Start the client
```shell
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
```shell
server > mvn integration-test
```
2. UI tests
```shell
client > npm run test
```
### Code quality