A simple meal tracking app
View Site
Table of Contents
- React
- Redux
- React-Router
- Firebase (Authentication and Realtime Database)
- Chart.js
- Material-UI v5
- As a Guest or with Google
- Calculate your daily calories for fat loss or muscle gain
- Adjust your macros to fit your needs
- Create new individual meal plans
- Save a meal as breakfast, lunch, dinner, or snack
- Edit or delete meal entries
- Total calories and macros for your meals are calculated in the bottom row with a +/- calorie/macros needed to hit your target goal
- Save your meal plans with your user account
My main issue is that meal plans are saved on a calender so when you log back in you start with a blank slate to input the meals for your current day. However I prefer to eat the same meals for a couple weeks, so I find this doesn't work for me. I like to have a record of it to remember what I'm supposed to be cooking and eating without having to search back through the calender. I also find them cluttered and difficult to navigate.
You can create new meal plans but when you log back in you'll see your latest meal plan. You can create and save as many new plans as you like. Features are simple, no clutter from the fitness app trying to make more money off you by adding more features that only make the app more confusing to navigate and use.
Years ago I lost 110 lbs and have kept it off and ever since developed a passion for fitness and nutrition. What started off first as calculating my calories and macros using a calculator, pen, and paper eventually evolved to storing it in a word doc, then to creating more and more complex excel spreadsheets with formulas, tables, and graphs to keep track of my meals and progress. So naturally I thought why not take all that knowledge I have built up and centralize it by creating an app that fits my needs.
- I wrote out user stories and features using Notion: Link to Notion: User Stories & Features
- I organized my work using Notion
- I created a Kanban board using Notion to track tasks and bugs: Link to Notion: Task & Bug Tracker
- Code: Handling Guest and Google Sign
-
Code: Calculating BMR, TDEE (Maintenance), and Daily Calories
-
Code: Calculating Suggested Macros
-
Form Validation
- User Warning if Calories Are Too Low
-
Code: Handling user inputed percentages to calculate macros in grams for protein, carbs, and fats
-
Alerts User If Fats are Too Low or Too High
-
Code: Custom hook to get input and input validation values when calculating calories and macros
-
Code: Custom hook to get input data when adjusting macros
- Code: Persists logged in user and user id
- Integrate Food API
- Quick Add Meals: Favorite/Save meals to quickly add later
- Weight Log: A weight log to track your daily weight with graph and calculations to see trends
- Better closeable tabs (will also fix padding issue for meal plans on mobile)
- Notes feature
- Add option to maintain calories
- Improve Meal Planner UI
- Better responsiveness of meal plan tables and inputs
- Persist the selected inputs on profile page
See the open issues for a full list of proposed features (and known issues).
Men:
BMR = (10 x weight in kg) + (6.25 height in cm) - (5 x age in years) + 5
Women:
BMR = (10 x weight in kg) + (6.25 height in cm) - (5 x age in years) - 161
2. Find the Total Daily Energy Expenditure (TDEE) to Find Maintainence Calories Using Katch-McArdle Activity Multipliers
TDEE = (BMR x Activity Level)
Katch-McArdle Activity Multipliers
Sedentary: 1.2
Lightly Active: 1.375
Moderately Active: 1.55
Very Active: 1.725
Extremely Active: 1.9
Rates
Slow = 0.5% per lb of bodyweight
Moderate = 0.7% per lb of bodyweight
Fast = 1% of per lb of bodyweight
Lbs to Lose/Gain per Week = Weight (lbs) x Rate of Fat Loss/Muscle Gain
Caloric Deficit/Surplus = (Rate of Fat Loss/Muscle Gain (lbs) per Week x 3500 kcal) / 7 days
Fat Loss:
Daily Calories = TDEE - Caloric Deficit
Muscle Gain:
Daily Calories = TDEE + Caloric Surplus
Protein (g) = 1 g per lb of bodyweight
Fats (g) = 0.3 g per lb of bodyweight
Carbs (g) = Whatever is left over = Daily Calories - (Protein (kcal) + fats (kcal)) / 4 grams of carbs/kcal
Updating (nested) state using hooks without mutating data was the biggest challenge. My meal plans are stored in an array with nested objects that have further nested objects and arrays. At first I wasn't sure how to safely update a nested array directly inside the setState hook without mutating the data. Eventually I figured I could just create new block scoped variables to update the nested data and then setState with the new object.
Material UI provides a tabs component however it doesn't allow for you to dynamically add new tabs and close them. So I had to code my own functionality. What I did was add an add and delete button to the sides of the tab window. To add a new one you click add, to delete a tab you have to first select the tab you want to delete and then the delete button, as opposed to having the delete button inside of each tab. This is not an ideal solution and I have to improve upon it in the future. The two buttons on each side also cause a padding issue on mobile, the meal plan's container leaves a padding the width of the buttons on the sides.
Added buttons, created an addMealPlan function which adds a new meal plan to the array and a deleteMealPlan which removes it from the array
I also had to address a new issue this caused which was setting the active tab once the selected tab was deleted, and then also the naming of the tabs which are labeled as Meal Plan ${mealPlanArray.length + 1}... (Meal Plan 1, Meal Plan 2, Meal Plan 3...) with the issue being that if you delete a tab, lets say you have 3 meals plans and you delete Meal Plan 2, the new tab would be named Meal Plan 3 and now you have a duplicate (Meal Plan 1, Meal Plan 3, Meal Plan 3). I fixed this by looping the array (forEach) and checking for duplicates and making sure if one is found that it's named Meal Plan 3 (1), if even that one exits it'll be named Meal Plan 3 (2) and so forth.
Preventing Duplicate Tab Names
The Meal Plan is a table which is not truly capable of being viewed on mobile so I had given up on creating a solution as I don't really see this being an app to be used on mobile. It doesn't break but it sure is ugly and not effective. The improvement I would like to make is just give the whole table a scroll bar. Again, not great because it's a table afterall, but it's the only solution I think would make sense. The other option being keeping the meal name and calories column, and getting rid of the rest on mobile.