Overview
This documentation outlines the development process of my application, built using React Native and Supabase. The project focuses on creating a seamless interface for interacting with a glucose monitoring system, enabling real-time data handling and user engagement through a mobile application.
My role: UI Designer, Lead Developer
Timeline: 4 Weeks
Tools used: React Native, TypeScript, Supabase, Supabase Auth, Github
Context: Project for Clients Glucose Monitoring System
The Process
Step 1: Research and Planning
Understanding the requirements and planning the architecture.
Step 2: Design
Discussing UI designs for the application.
Step 3: Development
Building the application using React Native and Supabase.
Step 4: Testing and Deployment
Ensuring functionality and deploying the app.
The Design
The design basically is separated into 2 parts: Patients and Doctors. This design ensures the app interaction is easy to use and yet informative. Here are the pages with some context on how it works.
First and foremost, the login page. This is where the user will enter their credentials to access the app. The design is simple and straightforward, ensuring that users can easily log in without any confusion. Next to it is none other than the sign up page, where users will be able to create their account as a Patient or Doctor (It's not recommend for anyone to just create a doctor but for this context lets just say they can. Ideally it would either be from the company or the hospitals authority).
Patients Side
After logging in, the user will be directed to the dashboard. This is where the user will be able to see their latest glucose levels from the glucose monitoring system and input whether they are fasting, just before eating, or after eating. In the context of this project, the user will be able to compare the glucose monitoring system with their own finger pricking test results.
The history page is where the user will be able to see their glucose levels over time. This is where the user will be able to see their progress and how they are doing.
As most apps will have, the profile page is where the user will be able to see their profile and edit their information.
Doctors Side
After logging in, the doctor will be able to see the patients that are under their care. This is where the doctor will be able to see the patients glucose levels and filter based on diabetes type.
The Patient Data page allows the doctor to see the patients that took their glucose levels on that current day. This is where the doctor can monitor and send some remarks to the patients.
What I've Learned
This was a collab project with a Master's Degree Student that created the Non-Invasive Glucose Monitoring System. Working with this app was really exciting since I learned a lot on diabetes and ways to monitor it. I had worked with Supabase during my university days, so returning to it felt refreshing. React Native was new to me, but I had prior experience in mobile development.
If there was more time and resources, I would love to make this project into an actual product for the general public to use.
Next Steps:
I think there are more things I could add on to it, stuff like API integrations, syncing with Apple Health or Googles thing, or even the whole doctors process could've been more detailed and refined. Heck maybe modern smart watches could measure blood glucose and everything can be handled there.