Introduction
The TOP Nutrition App is a Progressive Web app (PWA) written in React (TypeScript), with all of its data stored locally using Dexie.js (IndexDB). The idea first arise in 2022 when I was looking for a solution to track macro-nutrients intake to help losing weight. Instead of using the existing apps I found on app store, I would like to have the data in my full control and be kept entirely locally. Additionally I would like to implement features based on my own need, therefore I decided to roll out my own solution, and the result is this app.
Despite being a "nutrition app", it is also capable of tracking your workout sets (which revolves around weight-lifting workouts), food containers (which is a feature I added to help me track my meal prep), and even an achievement system added in to motivate myself to achieve various goals.
Features
Here is an non-exhaustive list of what this app can do:
- Daily food intake logging
- Workout sets logging
- Visualize weights used / volumes trend for strength training exercises
- Track food containers
- Measurement logging
- Meal prep functionality
- Track food stock (incomplete)
- Achievement system (incomplete)
Design decisions
I was eager to start dieting in Summer 2022 and I strive to prevent myself from actually starting to diet by waiting to finish an app that takes forever to start functioning. Therefore, the initial goal is to build an app that can log the food intake and be available on my phone as soon as possible. Since I am already familiar with React and I know I can host an app on GitHub Page, I decided it to be a PWA written in React. To reduce extra setup of servers / databases and keep the data within the device, I decided to use IndexDB to store the data locally.
Significance
Although there are some features that are still in progress and there are a few minor bugs that I hardly find time to fix (since they don't really affect usability), it actually helped me shredding 12kg (76kg to 64kg) and I have been using it daily since 2022 to track my workouts and food consumption. Of course, your own determination and discipline are still the key of success in losing weight and no apps or tools could help you if you have neither of those. But as a developer, building my own nutrition app that could help myself out with noticeable results is still one of the things I am proud of.
Outlook
Since the app has fulfilled its purpose and I already have built a habit of logging my food consumptions and workouts. I decided it would be a good time to take this idea one step further: I would rebuild the most frequently used features with React Native and distribute it on App Store. This does not mean I will stop maintaining the PWA version nor does it imply I find it difficult to maintain the existing code base. But rather:
- Based on the experience I acquired from developing this app, I am confident in fine-tuning the data structure to make it more extensible.
- There are features that I would like to implement that is impossible to achieve in a PWA. For example a lock screen widget that shows the timer and home screen widget that shows the current calories consumption.
- It would be a good chance to pick up React Native again and test my adaptability of using new frameworks / environments.
- I could distribute and potentially monetize it.
After all this would not disrupt my diet effort since I already have this working PWA and I will continue to maintain it until the native version is complete and stable enough to replace the PWA.
Screenshots
Main page
Main page of the app that shows you the summary of the marco-nutrition you have consumed today. Also shows you a list of food you have logged in today.
Exercise page
This page shows the list of sets of exercises you do today. This is also the page I stare at most of the time when I am at the gym. The timer in blue will be visible in all pages.
Food container detail page
Meals that you prepared and kept in food boxes can be recorded as food containers in which the contents are also tracked. If you consume the contents, you can add the macros in the container to your daily consumption. This page shows the contents and the macros of a container
Workout summary page
This shows a calendar on which each day of workouts are marked in different colors, so you can review the types of workouts and sets you have done previously.
Workout summary page
When you prepare multiple meals at once and store them in different food boxes, you can use this meal prep form to divide macros of food you added amongst the selected food containers you have registered (it’s assumed that the contents are equally divided). This saves you time to do the math and instead focus on making the food.
