Projects Category: Web App

Home
Web App

Web App

Medication Information Tracker Project

This is an ongoing project to create a web app for keeping track of a user’s medications, including what doctor prescribed them, what pharmacy filled them, and any relevant information about the medications themselves. It also allows users to set refill reminders.

LIKE THIS 49

Screenshot of Introductory page of Medication Tracker

Technologies used:

- Python
- Flask
- SQLite
- Jinja
- HTML/CSS/Javascript

See the source code on github!

After watching a loved one struggle with remembering what all of their medications were for and who prescribed them, I thought that it would be helpful to have an app to keep track of that kind of information. I designed it so that it was very flexible – the only required field for a medication is its name – allowing users to store as much or as little information as they choose.

I opted for Flask over Django because its lightweight nature makes it extremely flexible, allowing me to use only the components that I need. Since this was only the second project I have used Flask and Jinja on (and my first time using Javascript) developing it has allowed me to expand my knowledge of these technologies.

This is a work in progress, so I expect to add more features (and perhaps give it a prettier front-end!) in the future.

Planning Process

Having never tackled a project of this complexity, I wanted a way of tracking the status of each part of the project. These screenshots show the progress of the project over time.

I mapped out each screen of the project, adding some along the way, when I realized I needed them. The color-coding allows me to quickly assess the progress of each page, ranging from the gray “I have not created this page” to the green “This is done except for making it look pretty.”

Sadly, I did not think to take screenshots of the early stages, so the project is already underway in the initial screenshot.

Application tour

The following screenshots illustrate how the app works and the features that are currently available. Please feel free to take a tour! If you prefer to jump to a specific topic, the tour is split into several sections:

I hope you enjoy seeing the application in its current stage of development!

Home page and adding medications

This starts with a brand-new user and shows how to add medications to her account. It also demonstrates what information the user can provide for each medication, along with showing how to set refill reminders.

Screenshot of home page — This is the initial (empty) home page for a new user.

Screenshot of Add Medication page — The Add Medication page is where users input information about new medications they are taking. While the name of the medication is required, all other information is optional, so users can provide as much or as little information as they wish.

Screenshot of user home page — Once a medication is added, it is listed on the user's home page.

Managing medication information

Since their home page only displays a summary of a user’s medications, this demonstrates how to view details for a medication and how to edit the information they have provided for that medication. It also introduces the Manage Medications page, where a user can take certain bulk actions on their medications.

Screenshot of Detailed Medication Information page — Users can view the detailed information for a medication by clicking on its name.

Screenshot of Edit Medication page — Any details can be edited in case the information changes or users simply wish to add more information.

Screenshot of Manage Medications page — Users can view all of their medications in one place on the Manage Medications page.

Doctors and pharmacies

In addition to storing information on their medications, users can choose to enter information about doctors and pharmacies as well. This can be done when a user originally enters a medication, but users can also choose to add them directly. This demonstrates how to view a list of doctors/pharmacies, along with how to view and edit detailed information about each entry.

Screenshot of Doctor List — Users can view a contact list for their doctors.

Screenshot of Pharmacy List — Users can view a similar list for their pharmacies.

Screenshot of Add Pharmacy page — Users can add a doctor or pharmacy directly from their contact list.

Screenshot of Detailed Doctor Information page — Users can view detailed information on any of their doctors or pharmacies by clicking on their name on the relevant contact list.

Screenshot of edit information page for a doctor — Users can add more details or change information through the Edit Doctor Information or Edit Pharmacy Information page.

Screenshot of Detailed Pharmacy Information page — If a doctor or pharmacy is added through the Add Medication page, their detail page will be mostly empty.

Getting help

One of my pet peeves are applications without good help sections. Therefore, I have written an extensive help section to provide users (and potential users) with support in using the app. While I do not expand every entry here, these screenshots illustrate the breadth of the help section.

User profile page

Lastly, what would an application be without a user profile page? In addition to allowing a user to change their username, display name, email, and password, users can also quickly see what medications they have set refill reminders for (and how far in advance they wish to be reminded.)