This week I built the frontend of the Magic Pillbox web app and made significant progress on the main user flow. I implemented the core pages including landing page, home dashboard, setup page, setup guide, logs page, signup age and login page along with a shared navigation bar to connect them all together. The setup page allows the user to add, edit, delete and clear medications while enforcing valid compartment assignments. The assignments make sure that caregivers/anyone filling up the pillbox can only assign pills to compartments 1 to 7 and prevent duplicate compartment use. The guide page includes the full step by step loading instructions for the pillbox. The home dashboard currently shows
- device status
- next dose
- countdown
- reminder information
- streaks
- refill alerts
- compartment status
- configured medications.
I also added a calendar style logs page with date-based summaries and detailed adherence records as stated by our use case requirements. I also added in app reminder banner and notification support.
There were some issues that i came across with time formatting, mock data consistency, page routing but was able to solve the after thorough debugging. Overall, the main frontend structure of the app is now built. This is on schedule with what our group had originally planned for our interim demo.
The goal for the coming weeks is to correctly integrate the software system with hardware and backend logic.
