An accessible Full-Stack web application for patients and Caregivers to more easily manage their medications
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Kapture.2024-08-08.at.13.16.39.mp4
As a certified nursing assistant who worked on the frontlines during the pandemic, I gained valuable insights into the healthcare system. I wanted to leverage the skills I had acquired in the inpatient setting to create a meaningful project. The idea came to me after hearing about my mother's struggles to manage my ill grandfather's 20+ medications while living across the country. She diligently maintained countless spreadsheets, updating them each time his medication changed. Hearing about this and numerous incidents where home health nurses had made mistakes dispensing his medication due to not having access to up-to-date information inspired me to build an application to solve these issues. The app would serve patients like my grandfather and caregivers like my mother, providing an accessible solution for medication management.
- Shadcn UI Components
- React-pdf
- React-hook-form
- zod - validation
- twilio
- Users can register for an account and sign in
- Users can add medications to their list
- Users can view their medicaitons List
- Users can schedule medications
- Caregivers can request access to patient accounts
- Users can download a pdf of their medication List
- Users can sign up for text message notifications when a medication runs out
Developing MediTrak in just three weeks posed numerous challenges, from planning and designing to building and deploying. I hoped to streamline this process by using the Shadcn ui library, but this decision brought its own hurdles. While Shadcn allows for easy copy-pasting of components into the codebase, modifying their functionality to fit my use cases proved difficult, requiring frequent referral to the Shadcn and Radix documentation.
The most persistent issue arose while developing the medication schedules feature. When users add medications to their list, they are prompted to schedule each medication in the schedule tab consecutively. However, if a user moved too quickly between medications, a flush resync error would be thrown by the Radix UI checkboxes in the form. Despite thoroughly examining the documentation and researching similar issues faced by other users, I found no solutions that wouldn't compromise the user experience. I determined that the ongoing process needed about four seconds to complete when the component re-rendered. To address this, I implemented a four-second progress bar that appears after each form submission, allowing the process to finish before the user proceeds.
While using multiple new technologies like Shadcn, Zod, React Hook Form, and React PDF presented various challenges, I embraced the opportunity to expand my skill set. By diligently reading the documentation and persevering through debugging when issues arose, I not only overcame these hurdles but also gained valuable knowledge and experience. Tackling these challenges head-on allowed me to grow as a developer and deliver a more robust, user-friendly application.
To get a local copy up and running follow these simple example steps.
- Get a free API Key from Twilio for text notifications https://www.twilio.com/docs
- Clone the repo
git clone https://github.com/kepsteen/MediTrak
- Install NPM packages
npm install
- Create a .env from the example
PORT=8080 DATABASE_URL=postgres://dev:dev@localhost/changeMe TOKEN_SECRET=changeMe //Optional TWILIO_ACCOUNT_SID=changeMe TWILIO_AUTH_TOKEN=changeMe
- Change git remote url to avoid accidental pushes to base project
git remote set-url origin github_username/repo_name git remote -v # confirm the changes
Email - [email protected]
LinkedIn