Challenge Overview
Challenge Summary
Welcome, the goal of this challenge is to update the Angular UI prototype from the provided design to support mobile and tablet.
After this the application should be fully responsive.
Project Overview
Please check the project background here
Technology Stack
Angular 9, TypeScript, SCSS, HTML 5
BROWSER REQUIREMENTS
For mobile and tablet:
Android: chrome
iOS: Safari, chrome
Assets
The following items are shared on the forum
- Design source file developed on Adobe Xd
- Marvel App
- Adobe XD Handoff
Individual requirements
The full design is NOT in scope, some of them will be implemented in the future. Please implement the following:
- Login pages
- Register Pages
- Password Recovery pages
- Header:
- Home Page: This will empty for now.
- Edit profile pages
- Administrators pages
- Keyholder Pages
- Device Pages
- Space Pages
- Access history Pages
- Config Pages
- Permission Management
Below are the out of scopes throughout the application
- All elements on the dashboard (Summary, pie charts, Access History, Last 24h Access)
- All map functionality (All Locations, Sites, Spaces, Access History, etc.)
- Global Search
- Avatar Images (Profile, Administrators, and Keyholders), use first letters of the first name and last, e.g. if Ben Whittaker then show “BW” in the user image circle
- Last 24H Access (right nav)
- All bar charts
- View All Locations
- App Tour
- Tile Views
- Help
GENERAL REQUIREMENTS
- DO NOT BREAK existing functionalities for Desktop.
- No Duplicate code is very important
- User angular modules to separate each module aka Administrator, Devices, Spaces, Access History, Configuration
- Do not use browser alerts
- Add proper code comments
- Show loading spinners when populating data from API / local JSON to UI.
- Implement validation errors.
- Follow angular best practices
- No linting errors.
- No errors with prod build.
- All data should come from JSON, don’t use inline HTML for content.
Final Submission Guidelines
Submit the zip containing
- Update Angular source code with a detailed readme