An Epicodus Capstone project

Project Proposal / Overview

This is a learning project and my first foray into building mobile applications with React-Native. This application is intended to assist users in taking charge of and managing their health, by providing a centralized cloud-based solution for keeping track of, taking notes on, and mapping out, medications, medical appointments, and measuring day to day quality of life. The intended user of this application is someone dealing with chronic illness, or their caretaker. In order to make this accessible during medical appointments, application will be a mobile application and store data in the Firestore cloud database.

Sign In Page

REQUIREMENTS

This project uses the expo cli
To launch and run this program, you will require an IOS/Android Emulator, or to download the expo cli app for your mobile device.

SETUP

This project also requires an active firebase-firestore database. Please follow these instructions to set up and create your Firestore database.
Once your firestore databse is establishes, you will need to store your unique database api keys in a unique file detailed below.

CLONING

Copy the repo link as shown in the image below

Paste the link in the field provided by VsCode as shown in the image below
You will be prompted to open the directory once you have cloned it. Select ‘open’

INSTALL

INSTALLING WITH NODE

with the root project folder open in your code editor, execute the following in your terminal:

cd ProjectName

npm install

PROTECTING YOUR DATA

After retrieving your database api keys as described in the link above, you must create a ‘keys.js’ file in the ‘src’ directory and sub in your keys as listed below:

const keys = {
  REACT_APP_FIREBASE_API_KEY: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_AUTH_DOMAIN: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_DATABASE_URL: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_PROJECT_ID: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_STORAGE_BUCKET: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID: "YOUR DB INFO HERE",
  REACT_APP_FIREBASE_APP_ID: "YOUR DB INFO HERE",
}

export default keys;

Home Page

Features

In the current state, this application has the ability of creating database entries for medications, medical appointments, and Quality of Life ratings. Furthermore users are required to log in to access any features. Users only have access to the data they created within the system, and cannot access other users information.

Known Bugs

In retrospect it seems that almost everything that could have gone wrong did go wrong with this project. For example, utilizing the .env file to store and access keys was not functioning, and useing the standard workaround with the package ‘react-native-dotenv’ prooved similarly innefective. Additionally, the projects Jest tests will not run. I am unsure as to why, but even with some instructor assistance we were not able to resolve this issue.

This project reminded me what it felt like to learn HTML all over again, as styling was a constant problem. Text on buttons will frequently not appear, and sizing buttons also proved somewhat difficult. As any user can see, styling is basic at best, and lacks the quality of a final finished product. However, I enjoyed working on this application as a learning experience.

In its current form, user data is filtered by the authors email. In future versions this must be changed, but as users do not have the ability to change their email address, this is a functioning workaround in its current status.

Given the time constraints, I regularly had to decide on what could be ignored and what issues or components should be prioritized.

If I started Again

If I were to restart this project, and had more time, I would first focus on finding and following along with an extensive React-native tutorial which builds out visual aspects, animations, and styling of a mobile app. Working on the application logic was not difficult and well within my capabilities. However, I very much enjoyed the challenge. Though stressful at times, this was a great learning project, and I am excited to work on more mobile applications in the future!

User Stories

Medication List

As a user, I want to be able to create and manage a list of medications and supplements I am currently, or have previously been taking.
As a user, I want to be able to add new medications and supplements to the medication list.
As a user, I want to be able to remove medications and supplements from the medication list.
As a user, I want to be able to take notes on each medication/supplement, for the following fields: medication, prescribed by, prescribed date, purpose of prescribing, known side effects, dosage, quantity, frequency and amount of intake, and side effects I am experiencing/noticing.
As a user, I want to be able to update any medication/supplement list entry at any time.
As a user, I want any listing in my medication list, so long as I provide information regarding quantity and medication start date, to list when the medication will run out.

Appointment List

As a user, I want to keep track of my past, present, and upcoming medical appointments.
As a user, I want to store the following information regarding a medical appointment: Date and time of Appointment, medical professional I will be meeting with, purpose of appointment, questions I have before the appointment, notes from/during appointment, takeaway/what’s changed from the appointment (e.g., new medication).

Daily QOL Notes

As a user, I want the ability to rate my Quality Of Life for any given day, using several metrics: pain, nausea, overall rating.
As a user, I want the ability to take notes on any particular day to keep track of anything I might need (e.g., number of bowel movements, localization of pain, food or activity that caused me to feel nauseaus).
As a user, I want the ability to look back at any day, or see my QOL ratings side-by-side for a given week or month (perhaps in color-coded calendar) to provide concrete context and evidence when speaking with my health providers.

Calendar

As a user, I want the ability to access upcoming, current, and past QOL ratings, appointments, and notifications within a centralized calendar view.
As a user, I want the ability to sync prescription filling reminders, and medical appointments to my Google Calendar.

Notifications/Upcoming

As a user, I want a portion in the application to remind me of upcoming medical appointments, medication refil reminders etc.
As a user, I want the application to remind me to submit a QOL rating for the day via push notifications on my mobile device, and within the device itself.

API Consuming features

As a user, I want the option to pre-load information regarding a medication into my medication list entries when desired.
As a user, I want this applications calendar to sync with my Google Calendar.
As a user, I want the application to read my prescription labels and auto-populate a new prescription entry which I can then edit for accuracy.

Add New Medication Form

Diagrams

Home Layout Mockup

Component Scaffolding

ToDo List / Stretch Goals

Dry up Sign In page (WelcomeScreen.js)
Find API for Medication information
- Perhaps This
Study documentation for Google Calendar
Look into Calendars with firebase
Find React-native template to update app visuals with
- Incorporate transition animations
Update Home.js view with alerts for:
- Upcoming Appointment(s)
- Upcoming Medication Refils
- Reminder ifdaily QoL rating hasn’t been submitted
Update QoL page with more functionality:
- Prevent submitting more than one rating per day
- Provide data analysis of QoL ratings over last wee, month, year, etc