Anabel Hospitality IoT Alert System Integration Part 1

Challenge Objectives

• The purpose of this challenge is to integrate part of the UI with the backend API.

 

Project Background

• Anabel is planning to build an MVP for a web service that utilizes IoT technology, that will help their clients (hotel owners) with monitoring both assets in their properties and their employees’ locations, and safety within the properties for different purposes.

 

Technology Stack

• Angular 9

• HTML5

• Javascript

• CSS

• Golang

• REST

• MongoDB

 

User Roles

The system supports multiple different roles, which are listed below:

• Anabel Super Admin (SA)

  • Full access to all data and user interface of the web app

• Anabel Account Manager (AM)

  • Same as SA, but with access to specific clients only

• Client Super Admin (CSA)

  • Full access to all the data specific to one client

• Client Group Admin (GA)

  • Access to the actual individual user credentials only

  • Full access to multiple sites, but only the sites in their named group

• Client Property / Site Manager (SM)

  • No client-level data access

  • No site address and site physical attributes

  • Full access to a single site operational data

• Property / Site User (SU)

  • Read access to site data

  • Mainly an operator of the system with no write access except for their specific credentials

• No access users

  • These are users added to the system but will not have a login or access

  • Client Contact (CC) - Accounting, Operations, etc.

  • Site Staff (SS) - Staff wearing badges, or retrieving assets and not wearing a badge

 

Please carefully check the user entitlement document, it’s a major requirement to properly implement that down to the field level. Some of these might also require changes to the UI (to disable certain fields for editing based on roles).

If minor fixes are needed to the API during the integration, please just do it and include the updated API code in your submission as well.

 

Page & API Integration

The focus of this challenge is to finish integrating the UI with the APIs listed below:

• Security

  • POST /login

    • Login page

  • POST /logout

    • After login, user can log out from the top right corner pull down menu

  • POST /initiate-forgot-password

    • Can be initiated from the login page

  • POST /change-password

    • After login, user can click the avatar on top right corner to enter user profile page and change password

  • PUT /user-confirmation

    • When an admin creates a user that can login, an email is sent to the user’s inbox, clicking that link should trigger the user-confirmation process.

    • In the prototype, you can visit the /user-confirmation?token=xxx page to see the user confirmation page. We need that fully integrated with the API, including errors like invalid token, expired token, etc.

• User

  • GET /me

    • Get the info that’s displayed on user profile page

  • POST /users

    • Create users, this is used in Client Details -> Admin Users tab and Contacts tab

  • GET /users

    • List all users, this is used in Client Details -> Admin Users tab and Contacts tab

  • PUT /users/{id}

    • Update users, this is used in Client Details -> Admin Users tab and Contacts tab

  • DELETE /users/{id}

    • Delete users, this is used in Client Details -> Admin Users tab and Contacts tab

  • GET /users/{id}

    • Get user details, this is used in Client Details -> Admin Users tab and Contacts tab

• Client

  • POST /clients

    • Create client, used on clients page

  • GET /clients

    • List clients, used on clients page

  • GET /clients/{clientId}

    • Get client details, used on client details page

  • PUT /clients/{clientId}

    • Update client, used on clients page

  • DELETE /clients/{clientId}

    • Delete client, used on clients page or client details page

  • PUT /clients/{clientId}/archive

    • Archive client, used on clients page or client details page

  • GET /clients/{clientId}/site-groups

    • Get client site groups, used on Site Info -> Address tab

    • On the add or edit admin user pop up, when the admin type is Group Admin, a Site Group Name field is shown. The value of this field is saved into the site groups list for this client.

  • GET /clients/{clientId}/user-groups

    • Get client user groups, used on Client Details -> Group Definition page

• File

  • POST /files

    • Upload files to aws s3, used in several places. For example: when creating a client, users need to upload the logo.

 

General UI Requirements

• You are expected to build the prototype following the provided design unless otherwise specified.

• Angular 9 must be used, and browser compatibility requirements must be covered.

• This app should be built using ngrx for state management.

• The UI should be fluid and generally responsive to different screen sizes (desktop only, but need to support smaller size laptop screens).

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.

• Do NOT use global z-indexes.

• No errors with production build.

• Must pass standard lint and NPM audit.

• The data to be displayed must come from local JSON files and cannot be hardcoded.

• The pages should clearly indicate invalid input as shown in the design.

• Must follow Angular best coding practices.

• These will be considered as major requirements.

 

HTML Requirements

• HTML should be valid HTML5 compliant.

• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• All HTML code naming should not have any conflicts or errors.

• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• No inline CSS styles- all styles must be placed in an external stylesheet.

• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 

Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all CSS so developers can follow the code.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• All CSS naming should not have any conflicts.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Use CSS3 Media Queries to load different styles for each page and don't build different pages for different devices / layout.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.

• Make sure npm run build works without any errors.

 

Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. 

• Use typescript and linter for code quality

 

Licenses & Attribution

• Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

Browser Requirements

Windows: IE 11+, Chrome (latest)

Mac: Safari (latest), Chrome (latest)

 

 

Final Submission Guidelines

• Code that covers all the requirements.

• A detailed README file including information on how to set up, run, and verify your application.