MedicationTrackingApp

This is the final project of Electrical Engineering Lab (Networking and Multimedia) in NTUEE. We use MediaPipe to track the user's medication intake with Pi cam and store the data into Supabase. We also build this app with React Native Expo Router to display the user's medication history and remind the user to take their medication between the time intervals he/she sets. Feel free to give us a star (❁´◡`❁). Your support is our energy to create better projects! Live demo

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🚀 Reference

🤖 Introduction

Our Idea

Flow

Medication-taking posture not triggered

Successfully triggered the medicine-taking posture

Schema

App Interface

⚙️ Tech Stack

• React Native Expo
• Tanstack Query
• TypeScript
• Tailwind CSS/Nativewind
• Supabase
• MediaPipe
• OpenCV

🔋 Features

👉 Robust Authentication: Secure and reliable user login and registration system with Supabase authentication. Password will be hashed before stored in Supabase.

👉 Medication Tracking: Use MediaPipe to track the user's medication intake and store the data into Supabase.

👉 Medication Reminder: Create a new notification in Supabase and remind the user to take medication simultaneously.

👉 Medication Logs: Store the user's medication logs in Supabase and display it the app simultaneously.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites Make sure you have the following installed on your machine:

• Git
• Node.js (node version higher than v20..)
• pnpm
• Android Studio or Xcode
• Python
• pip

1. Cloning the Repository

git clone https://github.com/ChenBingWei1201/MedicationTrackingApp.git
cd MedicationTrackingApp

2. Install the project dependencies

# MedicationTrackingApp
pnpm i

3. Set Up Environment Variables

# MedicationTrackingApp
cp .env.development .env.local

in .env.local

# Supabase
EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_ANON_KEY=

Replace the placeholder values with your actual Supabase credentials. You can obtain these credentials by signing up on the Supabase website.

4. Running the app

• Android (android studio must be installed)

# MedicationTrackingApp
pnpm android

it will open the app in android emulator

• iOS (xcode must be installed)

# MedicationTrackingApp
pnpm ios

it will open the app in ios simulator

5. Running the MediaPipe Model to track the user's medication intake

read the README.md in the mediapipe folder

🚀 Reference

• Expo
• React Native Full 8 Hours Course (Expo, Expo Router, Supabase)
• Tanstack Query
• Supabase
• Nativewind
• MediaPipe