Web Development

MedHappy

This Medication Reminder Application is an app to help users to keep track of and remind them about their medications and/or supplements. This reminder would be done through a notification, whether it be a popup on the website or a notification alert on the mobile app. User Authentication • Users can sign up, log in, reset password, and log out. App Homepage • Users can view their personalised medication reminders for the date selected • The user can also edit and delete the details of each individual reminder on the date and medicine selected • It pops up a notification alert when it is time to take the medication Adding a Reminder • The user can add the medication name and dosage information • Reminders can be added for specific days (e.g. every Monday) or custom frequencies (e.g. every 2 days) • Reminders can have a start and finish date or can be ongoing (no end date) • The user can set the reminder for multiple times per day Medication History Insights • In View All Reminders, the user can see their full list of medication reminders • They also have the option of editing and deleting reminders • We have included an export option so users can download an Excel sheet of their full reminder history Medical Facilities Nearby • Our map will display facilities near the user's location • The user can set the desired search radius using the slider User Profile • The user profile will show the users name, email, gender, date of birth, medical history (if they input it) and allergies. • Users can also update these fields.

My Contributions

Developed the ViewReminder page for displaying and managing all of a user's medication reminders with full CRUD operations. Created the MedicineDetails component for display, editing, and deletion, which later reused on the homepage. Built unified formatter functions to handle legacy single time strings and new time arrays into consistent UI display. Implemented Firebase auth persistence and loading states to prevent protected route flickering. Challenges & Solutions: • Inconsistent Data Formats: Legacy records used single time strings while newer ones used arrays. I built a unified formatter with type checking that handles both seamlessly. • Edit Form State Loss: Complex medication forms lost state during updates. I implemented controlled component patterns with comprehensive initialization logic. • Real-time Data Sync: Deleted or updated medications still showed until refresh. Created handler functions that update both Firestore and local state simultaneously for immediate feedback

For the MedicineContainer component on the homepage, I developed functionality to show date-specific medication reminders with full management capabilities. Integrated with teammate Mark's calendar to filter medications for the selected date. Reused the MedicineDetails component (built in View Reminder page) for the daily view. Integrated Web Notification API with Firebase countdown scheduling for medication alerts. Added lazy loading with React.lazy(). Challenges & Solutions: • Date Filtering Logic: Custom frequencies like "every 3 days" required precise date difference calculations and modular arithmetic. I created a filterMedicationsForDate function handling all schedule types. • Calendar-Component Sync: Component needed to react to both calendar date selections and user interactions. I designed a useEffect dependency system tracking both prop changes and internal state. • Notification Permissions: Different browsers handle the Web Notification API differently. Implemented permission detection with fallback behavior when denied.

Demo

Contributors

Mark Tracey

SM Week 1&2

Denise Carroll

SM Week 3

Joye Zhang

SM Week 4

Cathy Yue

SM Week 5

Luke Lyons

SM Week 6

Quick Links

View on GitHub Live Demo

Technologies

ReactFirebaseTypeScriptReal-time Sync

Project Documentation

MedHappy was proposed to address the issue of medication non-adherence among elderly patients. Our team identified that many seniors struggle with managing complex medication schedules, leading to missed doses and adverse health outcomes. The app aims to provide a user-friendly solution that offers timely reminders and real-time synchronization across devices.

The project was managed using Agile methodologies, with weekly sprints and regular team meetings to ensure progress and address any challenges. We utilized Jira for user stories, sprint management, and task management, Git and Gitlab for source code management and versioning.

React

Component-based UI development

TypeScript

Type-safe code for better maintainability

Firebase Authentication

Secure user login

Firestore

Real-time database synchronization

Tailwind CSS

Responsive UI design