Challenge Overview
Challenge Objectives
-
Develop UI prototype for Iris Customer app
Project Background
In this project we will be developing a frontend web app that displays various customer information - app users are call centre agents that want to see all the relevant information for the current caller. Application will later be integrated into a CRM app.
Technology Stack
-
Angular
-
SCSS
Assets
We’re starting a new Angular project - it is up to you to create the base project structure.
Marvel app link and design assets are available in the forums
Individual requirements
We are implementing the complete app in this challenge and only the desktop version is in scope.
Application is a single page app that shows user profile information in several tabs.
All the data is loaded on app load by calling one API endpoint (data is not reloaded when changing tabs). User profile page will be loaded using deep url like /user/{mccpId} and the mccpId will be used to fetch user data from the api.
We don’t have access to the actual api in this challenge, but we do have api specification (swagger) and you can create sample json files to show data for different users (use an interceptor to return static json user data - we will remove the interceptor later and call the actual api). Mapping of api data to ui elements is available in the document shared in the forums.
Bootstrap and/or material design components can be used for the UI.
Create common components for header, footer, layout.
No data should be hardcoded in the components - use services to fetch sample data.
Note
Code structure and code style is very important in this challenge and will be scored in the major requirements scorecard section - submission with clean code structure and minor UI issues is strongly preferred over a submission with pixel perfect UI and bad code style (use of ‘any’ for data type, using tables for layout, duplicated code are examples of what to avoid - use small and generic components where possible).
Submission Guidelines
-
Submit the full app code
-
Submit a Readme with details on how to configure, build, run the app