AMPA Manual
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 29
| Download | |
| Open PDF In Browser | View PDF |
AMPA Manual Summary and motivation. This application was created by Alfredo Sebastian Rosadilla Ribeiro required as technical quiz by Betsson group company. The name AMPA it is a short name for "Angular Movie Presentation Application". Quiz requirements. - - Movies List Search. List Movies. Clicking on a particular movie will redirect you to the selected movie detail page. Movie detail - Show selected movie detail information. - Navigate back to movie list. Pages should have proper urls and navigation should work as expected: - using the back and forward button of the browser should take to the correct page - reloading the current page should work as expected Technologies required - [Angular](https://angular.io/) (6 or higher) - [TypeScript](https://www.typescriptlang.org/) - [Rxjs](https://github.com/ReactiveX/rxjs) - [Sass](http://sass-lang.com/) You may use any 3rd party libraries which can facilitate your development. Extra Credit - Filter by Genre Apply [Redux](http://redux.js.org/) application state management to your application. You may use any 3rd party libraries which can facilitates your development Unit tests Polished design Responsive design - Animations If you get the demo in good shape and have extra time, add your own flair and features. Current Views. - Login page. Home page. Search page. Favorites page. Movie detail page. Account configurations. Shell. The shell is a wrapper component that appear in the child router-outlet, this component wraps every view except the login. It is fully responsive composed by header, footer, sidebar and alert components. Has the responsibility to provide the user navigation through the application. - Mobile view - The footer it will fixed to bottom page. - It will appear. - Home Page. - Favorite list icon. - Redirect to favorite list page. - Home icon. - It keep fixed in all mobile views except login. - Redirect to home page. - Notification icon - Show up an information alert. - Search, Favorite and Account Configurations page. - Back icon. - Redirect to last page, if doesn't exist, redirect to home page. - Home icon. - It keep fixed in all mobile views except login. - Redirect to home page. - Notification icon - Show up an information alert. - Movie details. - Back icon. - - - - Redirect to last page, if doesn't exist, redirect to home page. Home icon. - It keep fixed in all mobile views except login. - Redirect to home page. Favorite icon - Allow to the user mark current movie as favorite. Header. - Search icon. - Redirect to search view. - Hamburger menu icon. - Open a sidebar that show. - Name of user logged. - Navigation pages. - Logout option. - Remove credentials and redirect to login page. Desktop view - Header. - User icon. - Show up a menu including. - Current username. - Account configurations option. - Redirect to Account configurations page. - Logout option. - Remove credentials and redirect to login page. - Search icon. - Redirect to search view. - Navigation pages. - Notification icon - Show up an information alert. Features by view. Login. - - - Full responsive. Switch application language between English and Spanish. Use session storage or local storage depends of remember toggle value. - Login with remember me switched on, gonna save the session in localStorage so if the user open other tabs the session will continues. - Login with remember me switched off, it will create a session only in current tab. Create an user instance that expirate at 30 minutes, simulate communication with some api similar to OAuth (token, expiration_token). The form only validate username and password not be empty. - If the user uncomplete username or password the application it will show up an error message. - Whatever string not empty it allowed to be logged. The user cannot access to other pages without get credentials. Home. - - Full responsive. Show a movie grid card component. - This component it’s full responsive and it will adapt to different responsives situations. - Adapt content to movies amount and viewport dimensions. Show a cover image, this one represent the newest movie. All movie request include a delay for represent lazy load feature, each movie image will be storage in a blob file inside service memory, this approach was selected to allow the tester user simulate lazy load effect for each reload page action. - Each request delay between 0 to 3 seconds. - For the current case was avoided use virtual scroll and pagination features. Search page. - - - Full responsive view. Show a movie grid card component. - This component it’s full responsive and it will adapt to different responsives situations. - Adapt content to movies amount and viewport dimensions. Filter the list of movies by search field. - Filter by - Movie name. - Movie Description. - Movie Genres. In Desktop view show up a list of genres, when user clicks over those automatically fills the search field with the genre selected. Movie detail page. - - Full responsive view. Show up the movie information, including - Name. - Description. - Genres. - Rate. - Duration. - Image. - A video - Represents movie trailer, always show deadpool trailer. In Desktop version the favorite icon appear on the right top corner of information section. Show an alert when click on favorite icon. Account configurations. - Full responsive view. Show user application configurations. - Username. - Change language. - Switch between Spanish and English. - Change Password. - Show up an information alert. - Change Application theme. - Switch between a huge number of theme combinations. - Theme only apply for current tab and current session. - If close session or tab the theme returns to basic colors. - Non priority functionability. Favorite list page. - Full responsive view. Show favorite movies. Project Distribution. ├── LICENSE ├── README.md ├── angular.json ├── docs │ ├── analytics.md │ ├── backend-proxy.md │ ├── coding-guides │ │ ├── angular.md │ │ ├── e2e-tests.md │ │ ├── html.md │ │ ├── sass.md │ │ ├── typescript.md │ │ └── unit-tests.md │ ├── corporate-proxy.md │ ├── i18n.md │ ├── readme.md │ ├── routing.md │ └── updating.md ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── proxy.conf.js ├── reports │ ├── coverage │ │ ├── base.css │ │ ├── block-navigation.js │ │ ├── index.html │ │ ├── lcov.info │ │ ├── prettify.css │ │ ├── prettify.js │ │ ├── sort-arrow-sprite.png │ │ ├── sorter.js │ │ └── src │ │ ├── app │ │ │ ├── app.component.ts.html │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├── components │ ├── components.module.ts.html │ ├── favorites │ │ ├── favorites-routing.module.ts.html │ │ ├── favorites.component.ts.html │ │ ├── favorites.module.ts.html │ │ └── index.html │ ├── home │ │ ├── home-routing.module.ts.html │ │ ├── home.component.ts.html │ │ ├── home.module.ts.html │ │ └── index.html │ ├── index.html │ ├── login │ │ ├── index.html │ │ ├── login-routing.module.ts.html │ │ ├── login.component.ts.html │ │ └── login.module.ts.html │ ├── movie-detail │ │ ├── index.html │ │ ├── movie-detail-routing.module.ts.html │ │ ├── movie-detail.component.ts.html │ │ └── movie-detail.module.ts.html │ ├── search │ │ ├── index.html │ │ ├── search-routing.module.ts.html │ │ ├── search.component.ts.html │ │ └── search.module.ts.html │ └── user-profile │ ├── index.html │ ├── user-profile-routing.module.ts.html │ ├── user-profile.component.ts.html │ └── user-profile.module.ts.html ├── index.html ├── material.module.ts.html ├── services │ ├── alert │ │ ├── alert.service.ts.html │ │ └── index.html │ ├── authentication │ │ ├── authentication.guard.ts.html │ │ ├── authentication.service.ts.html │ │ └── index.html │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├── business │ │ ├── business.module.ts.html │ │ ├── index.html │ │ └── movies │ │ ├── index.html │ │ ├── movie.mock-data.ts.html │ │ ├── movie.model.ts.html │ │ ├── movies.service.ts.html │ │ └── service.mock.ts.html │ ├── i18n │ │ ├── i18n.service.ts.html │ │ └── index.html │ ├── index.html │ ├── index.ts.html │ ├── logger │ │ ├── index.html │ │ └── logger.service.ts.html │ ├── route │ │ ├── index.html │ │ ├── route-reusable-strategy.ts.html │ │ └── route.service.ts.html │ ├── services.module.ts.html │ └── theme │ ├── index.html │ └── theme.service.ts.html └── shared ├── components │ ├── alert │ │ ├── alert.component.ts.html │ │ └── index.html │ ├── footer │ │ ├── footer.component.ts.html │ │ └── index.html │ ├── header │ │ ├── header.component.ts.html │ │ └── index.html │ ├── icon-input │ │ ├── icon-input.component.ts.html │ │ └── index.html │ ├── loader │ │ ├── index.html │ │ └── loader.component.ts.html │ ├── movie-card │ │ │ │ │ ├── index.html │ │ │ │ │ └── movie-card.component.ts.html │ │ │ │ ├── movie-grid │ │ │ │ │ ├── index.html │ │ │ │ │ └── movie-grid.component.ts.html │ │ │ │ └── shell │ │ │ │ ├── index.html │ │ │ │ └── shell.component.ts.html │ │ │ ├── index.html │ │ │ ├── index.ts.html │ │ │ └── shared.module.ts.html │ │ ├── environments │ │ │ ├── environment.ts.html │ │ │ └── index.html │ │ ├── index.html │ │ ├── polyfills.ts.html │ │ └── test.ts.html │ └── junit │ └── TESTS-xunit.xml ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ ├── components.module.spec.ts │ │ │ ├── components.module.ts │ │ │ ├── favorites │ │ │ │ ├── favorites-routing.module.ts │ │ │ │ ├── favorites.component.html │ │ │ │ ├── favorites.component.scss │ │ │ │ ├── favorites.component.spec.ts │ │ │ │ ├── favorites.component.ts │ │ │ │ └── favorites.module.ts │ │ │ ├── home │ │ │ │ ├── home-routing.module.ts │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.scss │ │ │ │ ├── home.component.spec.ts │ │ │ │ ├── home.component.ts │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └── home.module.ts │ ├── login │ │ ├── login-routing.module.ts │ │ ├── login.component.html │ │ ├── login.component.scss │ │ ├── login.component.spec.ts │ │ ├── login.component.ts │ │ └── login.module.ts │ ├── movie-detail │ │ ├── movie-detail-routing.module.ts │ │ ├── movie-detail.component.html │ │ ├── movie-detail.component.scss │ │ ├── movie-detail.component.spec.ts │ │ ├── movie-detail.component.ts │ │ └── movie-detail.module.ts │ ├── search │ │ ├── search-routing.module.ts │ │ ├── search.component.html │ │ ├── search.component.scss │ │ ├── search.component.spec.ts │ │ ├── search.component.ts │ │ └── search.module.ts │ └── user-profile │ ├── user-profile-routing.module.ts │ ├── user-profile.component.html │ ├── user-profile.component.scss │ ├── user-profile.component.spec.ts │ ├── user-profile.component.ts │ └── user-profile.module.ts ├── material.module.ts ├── services │ ├── alert │ │ ├── alert.service.spec.ts │ │ └── alert.service.ts │ ├── authentication │ │ ├── authentication.guard.spec.ts │ │ ├── authentication.guard.ts │ │ ├── authentication.service.spec.ts │ │ └── authentication.service.ts │ ├── business │ │ ├── business.module.spec.ts │ │ ├── business.module.ts │ │ └── movies │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├── movie.mock-data.ts │ │ ├── movie.model.ts │ │ ├── movies.service.spec.ts │ │ ├── movies.service.ts │ │ └── service.mock.ts │ ├── i18n │ │ ├── i18n.service.spec.ts │ │ └── i18n.service.ts │ ├── index.ts │ ├── logger │ │ ├── logger.service.spec.ts │ │ └── logger.service.ts │ ├── route │ │ ├── route-reusable-strategy.ts │ │ ├── route.service.spec.ts │ │ └── route.service.ts │ ├── services.module.spec.ts │ ├── services.module.ts │ └── theme │ ├── theme.service.spec.ts │ └── theme.service.ts └── shared ├── components │ ├── alert │ │ ├── alert.component.html │ │ ├── alert.component.scss │ │ ├── alert.component.spec.ts │ │ └── alert.component.ts │ ├── footer │ │ ├── footer.component.html │ │ ├── footer.component.scss │ │ ├── footer.component.spec.ts │ │ └── footer.component.ts │ ├── header │ │ ├── header.component.html │ │ ├── header.component.scss │ │ ├── header.component.spec.ts │ │ └── header.component.ts │ ├── icon-input │ │ ├── icon-input.component.html │ │ ├── icon-input.component.scss │ │ ├── icon-input.component.spec.ts │ │ └── icon-input.component.ts │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├── loader │ │ │ ├── loader.component.html │ │ │ ├── loader.component.scss │ │ │ ├── loader.component.spec.ts │ │ │ └── loader.component.ts │ │ ├── movie-card │ │ │ ├── movie-card.component.html │ │ │ ├── movie-card.component.scss │ │ │ ├── movie-card.component.spec.ts │ │ │ └── movie-card.component.ts │ │ ├── movie-grid │ │ │ ├── movie-grid.component.html │ │ │ ├── movie-grid.component.scss │ │ │ ├── movie-grid.component.spec.ts │ │ │ └── movie-grid.component.ts │ │ └── shell │ │ ├── shell.component.html │ │ ├── shell.component.scss │ │ ├── shell.component.spec.ts │ │ └── shell.component.ts │ ├── index.ts │ ├── shared.module.ts │ └── styles │ ├── classes.scss │ ├── colors.scss │ ├── index.scss │ ├── media-queries.scss │ └── mixins.scss ├── apple-touch-icon.png ├── assets │ ├── images │ │ ├── Thumbs.db │ │ ├── american-gangster.jpg │ │ ├── ant-man.jpg │ │ ├── bad-boys.jpg │ │ ├── bridge-of-spies.jpg │ │ ├── deadpool.jpg │ │ ├── fast-and-furious-7.jpg │ │ ├── gangster-squad.jpg │ │ ├── gridiron-gang.jpg │ │ ├── jurassic-world.jpg │ │ ├── legend.jpg │ │ ├── mission-impossible-rogue-nation.jpg │ │ │ ├── now-you-see-me.jpg │ │ │ ├── project-x.jpg │ │ │ ├── running-scared.jpg │ │ │ ├── sicario.jpg │ │ │ ├── southpaw.jpg │ │ │ ├── spectre.jpg │ │ │ ├── straight-outta-compton.jpg │ │ │ ├── the-dark-knight.jpg │ │ │ ├── the-hangover.jpg │ │ │ ├── the-man-from-uncle.jpg │ │ │ ├── the-matrix.jpg │ │ │ ├── the-tournament.jpg │ │ │ ├── tracers.jpg │ │ │ └── we-are-the-millers.jpg │ │ └── video │ │ └── deadpool.mp4 │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.scss │ ├── main.ts │ ├── polyfills.ts │ ├── robots.txt │ ├── test.ts │ ├── theme │ │ ├── theme-variables.scss │ │ └── theme.scss │ ├── translations │ │ ├── en-US.json │ │ └── es-EN.json │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.5 Linearized : Yes Producer : Skia/PDF m69 Page Count : 29EXIF Metadata provided by EXIF.tools