MHealth Asthma Education App
In this project, I served as the primary software developer that worked with a team of Computer Science and Medicine professors to develop technical requirements and implement project code for an interactive Asthma education application. I began this project with a demo application to model the application off of and finished with a comprehensive ReactJS application with interactive learning modules. Additionally, in the final semester working with the team, we added another developer to the team and built a robust backend and interactive games to support crucial Asthma-related learning.
Here is a link to a running version of the application: MHealth Asthma Education App. Note: this is an earlier version of the app before we added gamification and backend. This version of the app is coded entirely by me.
In this project my mentor, Dr. Anthony Peruma, and myself developed technical requirements. We communicated with Dr. Donna-Marie Palakiko and tailored development based on input from herself and her research cohort.
I strengthened my problem-solving and technical implementation skills while working on this project. I wanted to highlight a few key project features that show off technical skill.
Mobile Responsive Application
One potential use case for this application was to allow children/families to view the learning modules on an iPad or similar device in a medical waiting room. Consequently, it was essential for this site to be mobile-responsive. This was one of the first major technical features that I had to build as a relatively new undergrad student. I was able accomplish this and make the application switch between the different format layouts (portrait and landscape) when a device is flipped. The different aspects are seen below:
StackedCard Component
The core of this project revoles around Asthma-related learning modules. This information is showcased in the StackedCards ReactJS component which I built off an online template but with significant modifications. The module of interactive cards each contain much of the relevant asthma information. This component shows technical accomplishment in handling data management and propigation, use of ReactJS states and effects, and integration of advanced moving ReactJS graphics.
Module Completion / Local Storage
Another key technical design of this application is completion of learning modules and saving this completion. In the initial design of the application there was not a robust backend with user signups. I therefore had to figure out how to persist module completion over multiple sessions without a database for saving. After research, I decided on LocalStorage to accomplish this, using a browser cache to save user progress in the learning process. The design of this technical feature shows depth to this project that was not purely frontend dev.
PixiJS Games
After completing the intitial version of the learning application. Our team received feedback to make the application more enjoyable for children. Our sponsor therefore decided to apply a gamification version to the app. We expanded our dev team and my role revolved around building the PixiJS games. This required me to learn a completely new framework and research the proper way to embed this within a running ReactJS application. This allowed me to develop my creative game design skills as well as problem solving skills to create 3 types of new learning games for the application. I thought that in particular this was a fun process, except for a quite tight timeline for project completion.
Conclusion
Ultimately, I was able to develop and showcase my software skills in this project, consisting of proficiency in multiple frameworks. This application also fits within my desire to be in the tech field to implement real world solutions. Asthma learning is a very crucial tool to many families and can save lives. I am glad I was able to be a part of a team that could build this application.
MHealth Asthma Education App: https://mhealthapps.github.io/Asthma-WebApp/