Cycle Time - Mobile App API Integration Challenge

Challenge Objectives

• Integrate the app with the backend API. 

Project Background

We are building a tool for user to observe, record, and tracking their employee activities within their company/shop/store and gather statistical report in order to gather necessary information for further usage (education, set a SOP, etc). 

Technology Stack

• Ionic 5 + Sqlite for mobile app
• Android 4+
• iOS 9+

Requirements

General Requirements

• Input validation and login failure must be handled properly. You should show validation error rather than disable the submit button directly. 
• Please use rxjs instead of Promise
• Make sure the UI looks fine on a smaller screen. (iphone5s, iphone 6, iphone 6s, iphoneXR screen sizes are in scope). 
• Loading indicator should be displayed when calling the API. 

You can find the latest marvel app here: https://marvelapp.com/76j7jcb
And here are the two previous mobile UI prototype challenges:

• http://www.topcoder.com/challenge-details/30100237/?type=develop&noncache=true
• http://www.topcoder.com/challenge-details/30101182/?type=develop&noncache=true

The latest code is in the gitlab repo: https://gitlab.com/cycle-time/mobile-app
And the backend code is in the https://gitlab.com/cycle-time/backend

You are responsible for fixing all the UI issues as well as integrate the backend APIs. 
It's better that you run the backend locally, and if you see any backend issues, please post in the forum and we will try to fix them quickly. 

Here is the UI to API mapping details:

• Login
  • 02 Login.png - Login with POST /login API
  • Social login is not needed
  • On forgot password screen, call POST /forgotPassword to receive the new password to login.
• Register
  • 04 Register.png - call POST /signUp API to register. 
• Projects Screen
  • 05A - Call GET /projects?responseFormat=Metadata to get the projects. This API supports paging, so you need to allow user to slide up to load next page of data. 
  • 05B - Call GET /comments?entityType=Project&entityId=:id to get project comments, sorted by createdOn desc. And if user scroll up in the list, it should load next page. 
  • 05B - Call POST /comments API to post the comment for this project
  • 06A / 06B - ���Call POST /projects/:id/userInvitations to invite people. 
  • 06A - Call DELETE /projects/:id to delete a project
  • 06A - when click Edit button, call GET /projects/:id?responseFormat=GetForEdit and use the data to populate the edit page
  • when click the project name / description, call GET /projects/:id?responseFormat=Metdata and use the data to populate the view project page
• Project Details
  • 07A - the data is from GET /projects/:id?responseFormat=Metdata
  • 07B - for process comments, use GET /comments?entityType=Process&entityId=:id, and add comment with POST /comments
  • 08A/08B - GET /projects/:id/userInvitations to get the user invitation details
  • invite user / edit project / delete project is the same as above
  • 09 - call GET /processes/:id?responseFormat=GetForEdit when edit the process
  • 09 - call DELETE /processes/:id to delete the process
  • 09 - call GET /processes/:id?responseFormat=Metadata when user open the process details screen
• Process Details
  • 10 - the data is from GET /processes/:id?responseFormat=Metadata
  • 11 - edit task - call GET /tasks/:id?responseFormat=GetForEdit to get the data
  • 11 - delete task - call DELETE /tasks/:id to delete the task
  • 11 - mark as complete - call PUT /tasks/:id/complete to complete the task
  • 11 - add photo/video to task - call POST /files with taskId
• Task Details
  • 12 - call GET /tasks/:id?responseFormat=Metadata
  • 13 - call POST /tasks/:id/observations to post the obversation
  • export - use the export task API to download the file. 
• Stop Watch
  • 16. All Clips - GET /tasks
  • 17. Favorite Clips - GET /tasks?starred=true
  • call PUT /tasks/:id/star or PUT /tasks/:id/unstar to star or unstar a clip
• Help (17 Help.png)
  • This page is static
• Settings (18 A Settings.png)
  • Account Settings (18 B Account Settings.png) - GET /me - which is called after logged-in. and call PUT /me to update account info
  • Measurement Settings (18 C Measurement Settings.png) - use unitOfMeasurements APIs
• New Project (19 .png)
  • call POST /projects to create project
• New Process (20 A.png)
  • call POST /processes to create process
• New Task (21 A.png)
  • call POST /tasks to create task
• Edit Project (24.png)
  • call GET /projects/:id?responseFormat=GetForEdit to get the data to edit.
  • call PUT /projects/:id to update the project. 
  • call POST /files to upload file. 
• Edit Process (25.png)
  • call GET /processes/:id?responseFormat=GetForEdit to get the data to edit
  • call PUT /processes/:id to update the process
  • call GET /users to get the people list
• Edit Task (27.png)
  • call GET /tasks/:id?responseFormat=GetForEdit to get the task to edit
  • call PUT /tasks/:id to update the task
  • call GET /users to get the people list
• Project Reports (29.png)
  • call GET /projects?responseFormat=Report to get the data
  • Use export API to export the project data.
• Process Report (31A - 31E)
  • call GET /processes/:id?responseFormat=Report to get the data

Final Submission Guidelines

• Patch file
• Deployment and Verification Guide