Web Development

MedHappy

A cloud-based medication reminder system that helps users manage complex medication schedules with real-time sync across devices.

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. Key Features: • Adding, updating and tracking user's medications either for themselves or a family member • Tracking the progress on each medication through a progress bar visual • A notification system that would alert the user when their medications or supplements need to be taken

My Contributions

For the ViewReminder component, I developed functionality for displaying and managing all of a user's medication reminders. Key Features: • Asynchronous data retrieval from Firebase using user authentication context • Proper error handling and loading states for smooth UX • Transforms complex Firebase document structures into usable UI format • Handles edge cases like missing fields or malformed dates Challenges & Solutions: Authentication Flow: Protected routes showed flickering during auth checks. We designed a loading state in the auth context that prevented premature rendering. Inconsistent Time Formats: Some records used legacy single time strings while others used arrays. I developed a unified formatter function with type checking and transformation logic. Edit Form State Management: Forms would lose state during updates. I implemented controlled component patterns with comprehensive initialization logic. Data Synchronization: Deleted/updated medications would still appear until page refresh. Created separate handler functions that update both Firebase and local state for immediate visual feedback. Code Implementation: • Primary ViewReminder component for auth, data fetching, and structure • Nested MedicineDetails component for display, editing, and deletion • Helper functions for formatting dates, times, and frequency patterns • Hidden reference table for Excel export functionality • Comprehensive error handling and loading state management

For the MedicineContainer component on the homepage, I developed functionality to show date-specific medication reminders with full management capabilities. Key Features: • Filters medications to show only those relevant for selected date • Complete medication management interface (view, edit, delete) • Collapsible medication details for clean interface • Based on Mark's calendar functionality with date-based filtering Challenges & Solutions: Authentication Persistence: Users were logged out after page refresh. Implemented proper auth persistence to maintain sessions. Date Filtering Logic: Custom frequency calculations required precise date difference calculations and modular arithmetic. Created a comprehensive filterMedicationsForDate function. State Synchronization: Component needed to respond to both user interactions and prop changes. Implemented useEffect dependency system tracking both prop and state changes. Date & Time Edge Cases: Malformed or missing data caused crashes. Implemented robust formatter functions with comprehensive error handling. Code Implementation: • Fetch username from Firebase and display at homepage • Set "Today" as default date on login • MedicineContainer for date filtering and structure • Reused MedicineDetails component for daily view • Sophisticated date filtering algorithms • State management for internal and prop-based updates

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

Links

View on GitHub

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