MagLoft - Angular Developer Test

This development test was created to evaluate relevant frontend skills for a full stack developer at MagLoft.

A briefing video and demo of the desired result is available here.

Preparation

The candidate should be familiar with relevant technologies before attempting this developer test.

The following resources should help acquiring the necessary experience to work on this test:

1. Angular 2+
   • Getting Started
   • Using Forms for User Input
   • Components Overview
   • Component Interaction
2. GraphQL
   • Introduction to GraphQL
   • Apollo Angular Getting Started
3. RxJS / Observables
   • RxJS Overview
   • Angular RxJS Guide

Briefing

The objective of this developer test is to create a searchable list of Anime movies based on the AniList GraphQL API.

The following user stories should be implemented:

1. A user can browse a list view of Anime movies with thumbnail, title and description.
2. A user can click on a search result to open then corresponding movie website on AniList in a new browser tab.
3. A user can filter their list by prividing a search term. The list will then only show results that match the given search term.
4. A user can browse up to 10 search results at the same time, and further browse through the remaining items by pagination.
5. A user can see a loading indicator while waiting for search results.
6. A previously browsed result set is cached in memory, so that returning to a page that was previously loaded returns the results quickly.

Requirements

The following technical requirements should be met when implementing the above user stories:

1. RxJS: RxJS should be used as a pattern to manage GraphQL API workloads. Observables, Subjects and Pipes should be used to map the user input (pagination page, search term) to received search results.
2. Debounce: The search term input should use a debounceTime of 500ms to avoid sending unnecessary requests.
3. Components: The following Angular Components should be created:
   • Pagination Component: src/app/components/pagination/pagination.component.*
   • Video Component for individual search results: src/app/components/video/video.component.*
   • App Component for overall layout and application logic: src/app/app.component.html
4. TSLint/TSC: All ESLint rules need to pass, and all typescript compiler warnings / errors need to be resolved.

About this Repository

This repository serves as a starting point to implement the above requirements. The project is based on the most recent angular version and was generated using the angular project generator.

The following libraries and scaffolds have been added:

1. GraphQL: apollo-angular and graphql-codegen were installed and configured to provide a working GraphQL API Client and Typings.
2. CSS Framework: materialize.css has been installed and relevant CSS classes have been created in app.component.scss to assist with the design of the app.

Developer Test Process

1. Read these instructions and briefing carefully.
2. Watch the briefing video.
3. Optional: Book a meeting with me to clarify on any questions regarding the developer test and briefing.
4. Work on the developer test. Remember to keep track of the time you spend!! (important).
5. Once the implementation is completed, make sure all Lint tests are passing and the project builds (ng build) without warnings and compiler errors.
6. Create a ZIP file of the project and email it to tobias.strebitzer@magloft.com and nick.martin@magloft.com
7. Include in your email: a) how many hours you spent b) was the test easy, moderate or hard.

Bonus Tasks

The following tasks are optional and should only be addressed once the test requirements are met. Choose any of the following bonus tasks, in no particular order:

• E2E Tests: Implement end-to-end tests for relevant functionality of the app
• Continuous Integration: Implement continnuous integration on a public fork of this github repository, to lint, test and compile the application
• PWA Features: Implement various PWA features like making the app installable, app shortcuts, offline capabilities, or native device sharing, using Angular Service Workers.
• SSR: Implement Server-side rendering using Angular Universal

Installation

Run yarn to install the project.

Development server

Run yarn serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

GraphQL

This project uses graphql-codegen and apollo-angular to generate a client library and Typings for the AniList GraphQL API.

Run yarn generate:graphql to generate the client and typings based on the schema located at src/graphql/*.graphql. This will generate src/graphql/index.ts which contains the necessary client and typings.