Problem you will solve

In this interview, we will discuss the implementation of a clinic system that helps clinicians monitor a group of participants with Raynauds. Raynauds is a condition where certain areas of the body feel numb and cool in specific circumstances.

The system consists of three main components:

• a Mobile Health app that allows participants to record when and where their Raynauds attacks occur.
• a RESTful backend that is connected to a database. This backend sends, receives and stores the data for all participants.
• a Web Portal for clinicians. This portal displays reports and analysis of the Raynauds records collected from the app.

A diagram of the system can be seen here:

We will explain what features you need to implement and what technology you need to use for each component in the following sections.

System Components

App

The app captures Raynaud attacks. Since multiple people will use it, we need to assign an identification for each participant in the database. The first feature is to generate an identification for each participant and show it on the app when they log in. Secondly, for the Raynauds record, we want to note the time and place of the attacks. Users should be able to edit their input if they make a mistake. For the location, users can choose between "indoor" and "outdoor" options instead of giving an exact location captured by devices. Lastly, the app should provide a report of the attack records from the past seven days.

Features

• An identification for the participant (app user)

  • Ask the participant to input the username for the first time using the app.
  • Send the username and device uuid to the server and save in database
  • Since the second time use of the app, the app should remember the username of the participant. Besides, the username should always be shown on top with words like "Hello, xxx"

• Report attack (Raynauds occurred) on a time (attacks may be reported MORE THAN ONCE in one day)

  • A date input for attack date
  • A time input for attack time
  • date and time should be local time
  • A location question:"Are you in the room?" with answer options: "inside"/"outside" (participant can only choose one)
  • Send this record to the RESTFUL BACKEND and save in database
  • Show a list of the day's records in app till next day in case of editing (i.e. in app, at the beginning of the day the records should be empty. Reported records will retain till the end of the day (11:59 PM), and can be edited. On the second day (12:00 AM), the list should be refreshed.
  • Update the record you already created within the day just in case you input the wrongly attack information

• Raynauds daily report

  • A bar chart to show the daily number of records reported by a participant past seven days since TODAY

Technique

You should use the following hybrid mobile frameworks to finish the mobile app part:

• Angular + Ionic + Capacitor (latest stable version recommended)

How to Demo you can run the app as mock one participant of the study on a simulator but it's better to run it on a real phone. You can choose either an Android Phone or an iPhone. For those of you don't have MacBook or iPhone, you can simply demo everything thing on Android.

---

RESTful Backend (server + database)

The RESTful Backend will collect the Raynauds attacks from participants and serve these data in the web portal. More details is shown below.

Features

• Save Profile of new participants

  • participant id
  • username
  • corresponding device uuid (it's OK you design as one participant only use one phone)

• Save Raynauds attack report records

  • attack id
  • attack date
  • attack time
  • date and time should be saved as UTC/GMT (or in milliseconds, to easily being transformed into local when display)
  • location

• Save Profile of Clinician to let them login in the Dashboard

  • clinician id
  • username
  • password

Technique

To implement RESTful Backend, you should use the following framework:

• Spring Boot + Spring MVC + Spring data JPA

To implement Database, you can choose one of the following databases:

• MySQL
• PostgreSQL

HINTS

• to let your mobile app to use your backend
  • if you are running the app on devices, you might need to deploy your backend to a server or use native feature (e.g., iPhone + Safari). Here is a tutorial for you to deploy a Spring MVC backend to heroku or ngrock
  • if you are running the app on simulators, you can use native feature (e.g., iPhone + Safari) or localhost.
  • If you could not complete all the tasks and will use the browser to demo, just run the localhost backend.
• You can use postman to test your RESTful Backend when you haven't finish your frontend.

---

Web Portal

Feature

• Login Page

  • A Login page to verify the identification of the clinician by username and password

• Patient List Page (a dashboard)

  • A list of all participants currently using the app (registered in the study) in table with columns: username, alert (or not), last time of report (the latest reported record's time), respectively
  • In the "alert (or not)" column, clinicians should be notified if a participant has not reported attacks for more than 2 days before today. An alert, such as a highlighted icon, should be shown. The participant with the alert should be displayed first. The longer a participant goes without reporting, the higher their priority. For example, if participant A has not reported for the past 3 days and participant B has not reported for the past 2 days, A should be sorted above B.

• Patient Detail Page

  • Any participant in the list on dashboard can be selected to navigate to the participant's detail page
  • A table to show all Raynauds records in a time reverse manner (the latest record should be shown on the top). The columns of the table is "attack date", "attack time", "location". If there are more than 10 records for a patient, you need to make a pagination.
  • A bar chart to show the daily number of records for the past seven days since TODAY

Technique

The web portal should be implement in Angular 2+ (latest version recommended). For page navigation between login page, patient list page and patient detail page, you need to use Angular Router) to implement.

How to Demo Show the development web portal in browser on your computer. No need to deploy on a server.

HINTS

• You can use any simple design to implement the portal. Well-designed user interfaces are not required.

Data size for Demo

To effectively demonstrate your system, particularly the dashboard and backend, it is necessary to create a dashboard list with a minimum of 10 participants. Additionally, for each participant, 14 days of Raynauds attack history data should be generated. It is important to include more than 2 days of missing reports for certain participants in order to showcase the alert feature. Therefore, in the backend, a minimum of 280 records for 10 patients over the past 14 days should be saved, with one of the participant simulated as the user of the mobile app.

Rules

• You have a two-week deadline to complete the project and schedule a Zoom demo with Leon (hah90@pitt.edu).
• Focus on implementing the system as much as possible. If you are short on time, prioritize the app, backend, and portal in that order. It is not recommended to partially develop all components without fully implementing any of them. For example, a fully functional app will receive a better grade than having partially developed components.
• Your code will be reviewed, and you will be asked about your development process.
• It is acceptable for your code to have defects, including bugs. If you finish the project quickly, consider how you can enhance the system and implement those improvements in your code.
• If you have any questions, please send an email at hah90@pitt.edu.
• This project should be completed independently. If you copy code from others, you will lose the opportunity. Additionally, if you cannot explain your code, you will fail.