Elderberry Caregiver Application

Try it out

• Try on expo (Recommended)
  
• Local install
  

Project Info

• Tools
• Directory structure

Try it out 🧑‍🔬

Try it on expo (Recommended) 👍

1. Download the expo app

   On Google Play Store

   On App Store

2. Create an expo account

3. Open the camera app on your device and scan the code below

   

   OR

   Open this link on your device

Local Installation 💻

1. Download the expo app

   On Google Play Store

   On App Store

2. Clone repo

   $ git clone 'https://github.com/huawei-hackathon/caregiver-app.git'
   
   $ cd caregiver-app
   

3. Yarn install

   $ yarn
   

4. Start expo server

   $ expo start
   

5. Scan QR code on http://localhost:19002

Project Info 🙋

Languages & tools 🔧

App building

• React Native was used to code the application. React Native allows apps written in Javascript to be run on both iOS and Android.

Graph plotting

• Responsive Linechart to plot beautiful line charts within project
• Victory for bar charts

Other Functionality

• Expo AV for audio recording and playback
• React Native Webview to render html reports within the application
• Axios for calling our API server running on Huawei ECS

Styling

• Native Base enables clean app design quickly

App state management

• Redux for app state management

• React Navigation for app navigation

  
  

Directory Structure 📁

Pages

Other than general components, components are in silo together within the page that they are used.

pages
├── ChatPage
│   ├── components
│   │   ├── RecordModal.js
│   │   └── TextModal.js
│   └── index.js
├── Homepage
│   ├── components
│   │   ├── AnomalyCard
│   │   │   ├── AnomalyPopover.js
│   │   │   └── index.js
│   │   ├── FoodCard
│   │   │   ├── AddButton.js
│   │   │   ├── ContentList.js
│   │   │   ├── EditFoodGroupModal.js
│   │   │   └── index.js
│   │   ├── HeartCard
│   │   │   └── index.js
│   │   ├── RoomCard
│   │   │   └── index.js
│   │   ├── SleepCard
│   │   │   └── index.js
│   │   └── StepsCard
│   │       └── index.js
│   └── index.js
├── activityPages
│   ├── HeartPage
│   │   ├── Chart.js
│   │   └── index.js
│   ├── MealPage
│   │   ├── Datepicker.js
│   │   ├── OnemealComponents.js
│   │   └── index.js
│   ├── SleepPage
│   │   ├── chart.js
│   │   └── index.js
│   └── StepcountPage
│       ├── chart.js
│       └── index.js
├── login
│   ├── index.js
│   └── loginPage.js
├── pastRecord
│   ├── DoctorCode.js
│   └── index.js
├── profile
│   ├── InfoCard.js
│   └── index.js
└── signup.js

Redux

To prevent unnecessary API calls, we used redux to store state with the option for users to refresh data if the need arises. Data is also updated upon entering the app.

redux
├── reducer
│   ├── index.js
│   ├── profile.js
│   ├── updateData.js
│   └── updateFoodData.js
├── state.js
└── store.js