Archives: Projects

Home
Projects

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.)

Photograph of blue ceramic hippo (William) from the Metropolitan Museum of Art

Data Visualization

260

The Metropolitan Museum of Art Data Visualization Project

This is a Data Visualization project using collection data from the Metropolitan Museum of Art. It uses Python, Pandas, Numpy, Plotly, and Dash.

LIKE THIS 260

I like museums and I am always curious about their collections. I want to know what kinds of artifacts the museum has, where the artifacts are from, when they were acquired, and so forth. To create a data visualization project I decided to use data from the Metropolitan Museum of Art in order to answer some of these questions.

While originally I planned to use the museum’s API, the interface did not allow for the easy collection of the data I was interested in. Therefore, I pivoted to using the CSV file the museum provided instead. This allowed me to learn how to use Pandas to create DataFrames that contain only the data needed for each visualization, which is much more efficient than working with the entire database at once.

Interactive global map of collection highlights

Unfortunately some of the data required a lot of cleaning. For instance, there is no ISO standard for “France (probably)” or “New Spain.” Similarly, the year of acquisition was sometimes missing. The former I could clean up by hand, and for the latter I used Numpy to represent the lack of data in a format that was easy to work with.

To create the data visualizations I used Plotly. While this creates beautiful visualizations, it also has some annoying limitations, such as being unable to control what order the departments are listed in on a particular chart. While this is not concerning for a single chart, it unfortunately means that there can be inconsistency between charts, as you can see by comparing the line and stacked bar charts above.

In order to put all of the visualizations into a single web page I used Dash, along with a little HTML and CSS to clean things up a bit.

Technologies used:

- Python
- Pandas
- Numpy
- Plotly
- Dash
- CSS

See the source code on github!