app.post("/api/user", (req, res) => { const userId = new ObjectId(req.user._id); const { age, sex, height, weight, activity, goalAction } = req.body; // These are from the name attributes in the ejs file // Parsing user inputs const parsedHeight = parseFloat(height); const parsedWeight = parseFloat(weight); const parsedAge = parseInt(age); const activityFactor = parseFloat(activity); // Was parsing a success? if (isNaN(parsedHeight) || isNaN(parsedWeight) || isNaN(parsedAge) || isNaN(activityFactor)) { return res.status(400).send('Invalid input values.'); } // calculatig the BMR let bmr; if (sex === 'female') { bmr = 10 * parsedWeight + 6.25 * parsedHeight - 5 * parsedAge - 161; // Female equation } else { bmr = 10 * parsedWeight + 6.25 * parsedHeight - 5 * parsedAge + 5; // Male equation } // calculate TDEE based on activity level const tdee = bmr * activityFactor; // adjustigg for weight goal let dailyCalories; switch (goalAction) { case 'maintain-goal': dailyCalories = tdee; break; case 'lose-goal-one': dailyCalories = tdee - 500; break; case 'lose-goal-half': dailyCalories = tdee - 250; break; case 'gain-weight-one': dailyCalories = tdee + 500; break; case 'gain-weight-half': dailyCalories = tdee + 250; break; default: // Did I do dailyCalories right? if (isNaN(dailyCalories)) { return res.status(500).send('Error calculating daily caloric intake.')}; // saving the caloric intake to the CaloricIntake model const caloricIntakeData = new CaloricIntake({ userId: userId, weightGoal: goalAction, activity: activity, weight: parsedWeight, height: parsedHeight, sex: sex, age: parsedAge, bmr: bmr.toFixed(0), tdee: tdee.toFixed(0), dailyCalories: dailyCalories.toFixed(0), }); if (!req.user || !req.user._id) { return res.status(400).send('User is not authenticated or ID missing.'); } // So I can see the values from the <form> element inside req.body caloricCollection.insertOne(caloricIntakeData) .then(result => { res.redirect('/profile'); }) .catch(error => { res.status(500).send('Error saving data'); }); });
Checkout the Github repo
Checkout the Github repo
Github Repo
Brand Inspiration
Brand Inspiration
Low to Mid Fidelity Iterations
Low to Mid Fidelity Iterations
Demo link coming soon
Github Repo
HTML | CSS | Javascript | Node.js | Express | Passport.js | MongoDB
Business Problem
Business Problem
The business needed an intuitive, accessible tool that could drive user engagement and help users make informed nutritional decisions. For users, the need was for a personalized and easy-to-use calculator that provides accurate caloric intake recommendations based on their lifestyle, activity levels, and goals, such as weight loss, maintenance, or muscle gain.
The business needed an intuitive, accessible tool that could drive user engagement and help users make informed nutritional decisions. For users, the need was for a personalized and easy-to-use calculator that provides accurate caloric intake recommendations based on their lifestyle, activity levels, and goals, such as weight loss, maintenance, or muscle gain.
The business needed an intuitive, accessible tool that could drive user engagement and help users make informed nutritional decisions. For users, the need was for a personalized and easy-to-use calculator that provides accurate caloric intake recommendations based on their lifestyle, activity levels, and goals, such as weight loss, maintenance, or muscle gain.
I developed a caloric intake calculator by incorporating three key calculations: BMR (Basal Metabolic Rate), TDEE (Total Daily Energy Expenditure), and goal-specific daily calories. First, I used the Harris-Benedict equation to calculate BMR, which estimates the number of calories your body needs at rest to maintain basic bodily functions. Then, for TDEE, I factored in activity level (ranging from sedentary to highly active) to give a more accurate estimate of total calories burned in a day. Finally, based on the user’s fitness goals—whether they want to lose, maintain, or gain weight—I adjusted the daily calorie intake accordingly. A caloric deficit is suggested for weight loss, maintenance for keeping current weight, and a surplus for weight gain.
The benefits of these results are significant: understanding BMR helps users know the minimum calories they need for survival, while TDEE provides a clearer picture of their daily energy expenditure, helping them make informed decisions about food and exercise. Setting goal-specific daily calories allows users to tailor their nutrition plans, promoting healthier, sustainable habits in line with their fitness objectives. By using this tool, users can make more mindful food choices, ensuring they fuel their bodies appropriately and maintain long-term health.
I developed a caloric intake calculator by incorporating three key calculations: BMR (Basal Metabolic Rate), TDEE (Total Daily Energy Expenditure), and goal-specific daily calories. First, I used the Harris-Benedict equation to calculate BMR, which estimates the number of calories your body needs at rest to maintain basic bodily functions. Then, for TDEE, I factored in activity level (ranging from sedentary to highly active) to give a more accurate estimate of total calories burned in a day. Finally, based on the user’s fitness goals—whether they want to lose, maintain, or gain weight—I adjusted the daily calorie intake accordingly. A caloric deficit is suggested for weight loss, maintenance for keeping current weight, and a surplus for weight gain.
The benefits of these results are significant: understanding BMR helps users know the minimum calories they need for survival, while TDEE provides a clearer picture of their daily energy expenditure, helping them make informed decisions about food and exercise. Setting goal-specific daily calories allows users to tailor their nutrition plans, promoting healthier, sustainable habits in line with their fitness objectives. By using this tool, users can make more mindful food choices, ensuring they fuel their bodies appropriately and maintain long-term health.
I developed a caloric intake calculator by incorporating three key calculations: BMR (Basal Metabolic Rate), TDEE (Total Daily Energy Expenditure), and goal-specific daily calories. First, I used the Harris-Benedict equation to calculate BMR, which estimates the number of calories your body needs at rest to maintain basic bodily functions. Then, for TDEE, I factored in activity level (ranging from sedentary to highly active) to give a more accurate estimate of total calories burned in a day. Finally, based on the user’s fitness goals—whether they want to lose, maintain, or gain weight—I adjusted the daily calorie intake accordingly. A caloric deficit is suggested for weight loss, maintenance for keeping current weight, and a surplus for weight gain.
The benefits of these results are significant: understanding BMR helps users know the minimum calories they need for survival, while TDEE provides a clearer picture of their daily energy expenditure, helping them make informed decisions about food and exercise. Setting goal-specific daily calories allows users to tailor their nutrition plans, promoting healthier, sustainable habits in line with their fitness objectives. By using this tool, users can make more mindful food choices, ensuring they fuel their bodies appropriately and maintain long-term health.
Development Logic
Development Logic
How does the calculation work?
How does the calculation work?



I started by finding inspiration on Dribble to better understand how to visually appeal to fitness consumers. Reviewing this inspiration I noticed some key items to a successful fitness-centered UI design:
Big words = Bold direction
Impactful text brought to the top of the visual hierarchy empowers the user ad connects them with the brand messaging. This immediate engagement is important in the fitness industry
The Who Behind The Why
Showcasing real people who benefit from living a healthy lifestyle helps the user actively envision themselves utilizing your product offering
Show Them The Money
Highlighting and fulfilling the user expectation provides immediate value to the user and establishes a quick but impactful consumer-product relationship
These 3 insights drove the design rationale of my low-fidelity to high-fidelity inspiration.
I started by finding inspiration on Dribble to better understand how to visually appeal to fitness consumers. Reviewing this inspiration I noticed some key items to a successful fitness-centered UI design:
Big words = Bold direction
Impactful text brought to the top of the visual hierarchy empowers the user ad connects them with the brand messaging. This immediate engagement is important in the fitness industry
The Who Behind The Why
Showcasing real people who benefit from living a healthy lifestyle helps the user actively envision themselves utilizing your product offering
Show Them The Money
Highlighting and fulfilling the user expectation provides immediate value to the user and establishes a quick but impactful consumer-product relationship
These 3 insights drove the design rationale of my low-fidelity to high-fidelity inspiration.
I started by finding inspiration on Dribble to better understand how to visually appeal to fitness consumers. Reviewing this inspiration I noticed some key items to a successful fitness-centered UI design:
Big words = Bold direction
Impactful text brought to the top of the visual hierarchy empowers the user ad connects them with the brand messaging. This immediate engagement is important in the fitness industry
The Who Behind The Why
Showcasing real people who benefit from living a healthy lifestyle helps the user actively envision themselves utilizing your product offering
Show Them The Money
Highlighting and fulfilling the user expectation provides immediate value to the user and establishes a quick but impactful consumer-product relationship
These 3 insights drove the design rationale of my low-fidelity to high-fidelity inspiration.



Fourth Iteration:
In the next iteration I started to play with the layout of the product description as I felt the previous layout was stunting the visual hierarchy. I wanted smoother eye tracking, so I started to move the other elements to think about how to increase full left to right comprehension. Applied orange as an empowering color.
Fourth Iteration:
In the next iteration I started to play with the layout of the product description as I felt the previous layout was stunting the visual hierarchy. I wanted smoother eye tracking, so I started to move the other elements to think about how to increase full left to right comprehension. Applied orange as an empowering color.
Fourth Iteration:
In the next iteration I started to play with the layout of the product description as I felt the previous layout was stunting the visual hierarchy. I wanted smoother eye tracking, so I started to move the other elements to think about how to increase full left to right comprehension. Applied orange as an empowering color.



Third Iteration:
My next focus was UX Content and visual engagement, therefore I explored and finalized on the application description and motto. The more prominent one being the motto, and so I decided on ‘Fuel Goals, Do More’ because it gave a clear, driven, and empowered message that directly linked to the service of the product.
Third Iteration:
My next focus was UX Content and visual engagement, therefore I explored and finalized on the application description and motto. The more prominent one being the motto, and so I decided on ‘Fuel Goals, Do More’ because it gave a clear, driven, and empowered message that directly linked to the service of the product.
Third Iteration:
My next focus was UX Content and visual engagement, therefore I explored and finalized on the application description and motto. The more prominent one being the motto, and so I decided on ‘Fuel Goals, Do More’ because it gave a clear, driven, and empowered message that directly linked to the service of the product.
I also thought about how I could get the user more driven to view the results ad thought to explore the UI of the submit button through a circle and arrow combination.
I also thought about how I could get the user more driven to view the results ad thought to explore the UI of the submit button through a circle and arrow combination.
I also thought about how I could get the user more driven to view the results ad thought to explore the UI of the submit button through a circle and arrow combination.
First and Second Iteration:
Created an initial layout to start from. I noticed the results needed to moved up in the visual hierarchy to provide more immediate user value.
First and Second Iteration:
Created an initial layout to start from. I noticed the results needed to moved up in the visual hierarchy to provide more immediate user value.
First and Second Iteration:
Created an initial layout to start from. I noticed the results needed to moved up in the visual hierarchy to provide more immediate user value.






Final Iteration
UI Design:
The placement of color was intentional to visually bring the user into key parts of the platform which are the motto, calculate button, image of an athlete, and the user’s caloric intake results. These highlights help to quickly empower the user to not only start platform interaction, but also catapult them into their health goals
Interaction Design:
When you hover over the ‘Fuel my goals’ button it fills the circle with an orange to gold gradient to align the user with the feeling of being empowered the colors signifying the fire and drive to accomplish their health goals. The darker inner circle ensures accurate color contrast for accessibility.
Final Iteration
UI Design:
The placement of color was intentional to visually bring the user into key parts of the platform which are the motto, calculate button, image of an athlete, and the user’s caloric intake results. These highlights help to quickly empower the user to not only start platform interaction, but also catapult them into their health goals
Interaction Design:
When you hover over the ‘Fuel my goals’ button it fills the circle with an orange to gold gradient to align the user with the feeling of being empowered the colors signifying the fire and drive to accomplish their health goals. The darker inner circle ensures accurate color contrast for accessibility.
Final Iteration
UI Design:
The placement of color was intentional to visually bring the user into key parts of the platform which are the motto, calculate button, image of an athlete, and the user’s caloric intake results. These highlights help to quickly empower the user to not only start platform interaction, but also catapult them into their health goals
Interaction Design:
When you hover over the ‘Fuel my goals’ button it fills the circle with an orange to gold gradient to align the user with the feeling of being empowered the colors signifying the fire and drive to accomplish their health goals. The darker inner circle ensures accurate color contrast for accessibility.
Final Design
Caloric Intake Calculator



This caloric intake calculator empowers you to track and optimize your daily calories to reach your fitness goals!
This caloric intake calculator empowers you to track and optimize your daily calories to reach your fitness goals!
This caloric intake calculator empowers you to track and optimize your daily calories to reach your fitness goals!
Solo UX Engineer
Role
Personalized Caloric Calculation
Goal-oriented Adjustments
Customizable Activity Level
Personalized Caloric Calculation
Goal-oriented Adjustments
Customizable Activity Level
Features
Development:
HTML/CSS
Client-side and server-side JavaScript
Node.js
Express
Passport.js
Development:
HTML/CSS
Client-side and server-side JavaScript
Node.js
Express
Passport.js
Design:
Figma
Accessibility
Interaction Design
Animation
Tools + Methodologies
Tools + Methodologies
Product Development Process
Product Development Process
The challenge was to create a simple, accurate, and engaging tool to help users easily calculate their daily caloric needs based on their personal characteristics and fitness goals. Many existing solutions are either too complex or lack personalization, making it difficult for users to estimate the right caloric intake for weight loss, maintenance, or gain.
The challenge was to create a simple, accurate, and engaging tool to help users easily calculate their daily caloric needs based on their personal characteristics and fitness goals. Many existing solutions are either too complex or lack personalization, making it difficult for users to estimate the right caloric intake for weight loss, maintenance, or gain.
The Challenge
The Challenge
The target audience includes fitness enthusiasts, health-conscious individuals, people trying to lose or gain weight, and diet professionals. Essentially, anyone who wants to understand and manage their caloric intake for better health outcomes.
The target audience includes fitness enthusiasts, health-conscious individuals, people trying to lose or gain weight, and diet professionals. Essentially, anyone who wants to understand and manage their caloric intake for better health outcomes.
Target Audience
Target Audience
Go to Home
✅
currently looking for full-time work
Looking for FT work
📍 Based in the Philly Tri-State Area.
📍 Philly
Need help on a project?
app.post("/api/user", (req, res) => { const userId = new ObjectId(req.user._id); const { age, sex, height, weight, activity, goalAction } = req.body; // These are from the name attributes in the ejs file // Parsing user inputs const parsedHeight = parseFloat(height); const parsedWeight = parseFloat(weight); const parsedAge = parseInt(age); const activityFactor = parseFloat(activity); // Was parsing a success? if (isNaN(parsedHeight) || isNaN(parsedWeight) || isNaN(parsedAge) || isNaN(activityFactor)) { return res.status(400).send('Invalid input values.'); } // calculatig the BMR let bmr; if (sex === 'female') { bmr = 10 * parsedWeight + 6.25 * parsedHeight - 5 * parsedAge - 161; // Female equation } else { bmr = 10 * parsedWeight + 6.25 * parsedHeight - 5 * parsedAge + 5; // Male equation } // calculate TDEE based on activity level const tdee = bmr * activityFactor; // adjustigg for weight goal let dailyCalories; switch (goalAction) { case 'maintain-goal': dailyCalories = tdee; break; case 'lose-goal-one': dailyCalories = tdee - 500; break; case 'lose-goal-half': dailyCalories = tdee - 250; break; case 'gain-weight-one': dailyCalories = tdee + 500; break; case 'gain-weight-half': dailyCalories = tdee + 250; break; default: // Did I do dailyCalories right? if (isNaN(dailyCalories)) { return res.status(500).send('Error calculating daily caloric intake.')}; // saving the caloric intake to the CaloricIntake model const caloricIntakeData = new CaloricIntake({ userId: userId, weightGoal: goalAction, activity: activity, weight: parsedWeight, height: parsedHeight, sex: sex, age: parsedAge, bmr: bmr.toFixed(0), tdee: tdee.toFixed(0), dailyCalories: dailyCalories.toFixed(0), }); if (!req.user || !req.user._id) { return res.status(400).send('User is not authenticated or ID missing.'); } // So I can see the values from the <form> element inside req.body caloricCollection.insertOne(caloricIntakeData) .then(result => { res.redirect('/profile'); }) .catch(error => { res.status(500).send('Error saving data'); }); });
Final Iteration
UI Design:
The placement of color was intentional to visually bring the user into key parts of the platform which are the motto, calculate button, image of an athlete, and the user’s caloric intake results. These highlights help to quickly empower the user to not only start platform interaction, but also catapult them into their health goals
Interaction Design:
When you hover over the ‘Fuel my goals’ button it fills the circle with an orange to gold gradient to align the user with the feeling of being empowered the colors signifying the fire and drive to accomplish their health goals. The darker inner circle ensures accurate color contrast for accessibility.
Demo link coming soon
Github Repo


Final Design
Caloric Intake Calculator


This caloric intake calculator empowers you to track and optimize your daily calories to reach your fitness goals!
Solo Software Engineer and UX Designer
Role
Personalized Caloric Calculation
Goal-oriented Adjustments
Customizable Activity Level
Features
Development:
HTML/CSS
Client-side JavaScript
Node.js
Express.js
Passport.js
Design:
Figma
Accessibility
Interaction Design
Tools + Methodologies
Product Development Process
The challenge was to create a simple, accurate, and engaging tool to help users easily calculate their daily caloric needs based on their personal characteristics and fitness goals. Many existing solutions are either too complex or lack personalization, making it difficult for users to estimate the right caloric intake for weight loss, maintenance, or gain.
The Challenge
The target audience includes fitness enthusiasts, health-conscious individuals, people trying to lose or gain weight, and diet professionals. Essentially, anyone who wants to understand and manage their caloric intake for better health outcomes.
Target Audience
The business needed an intuitive, accessible tool that could drive user engagement and help users make informed nutritional decisions. For users, the need was for a personalized and easy-to-use calculator that provides accurate caloric intake recommendations based on their lifestyle, activity levels, and goals, such as weight loss, maintenance, or muscle gain.
Business Problem
How does the calculation work?
Development Logic
I developed a caloric intake calculator by incorporating three key calculations: BMR (Basal Metabolic Rate), TDEE (Total Daily Energy Expenditure), and goal-specific daily calories. First, I used the Harris-Benedict equation to calculate BMR, which estimates the number of calories your body needs at rest to maintain basic bodily functions. Then, for TDEE, I factored in activity level (ranging from sedentary to highly active) to give a more accurate estimate of total calories burned in a day. Finally, based on the user’s fitness goals—whether they want to lose, maintain, or gain weight—I adjusted the daily calorie intake accordingly. A caloric deficit is suggested for weight loss, maintenance for keeping current weight, and a surplus for weight gain.
The benefits of these results are significant: understanding BMR helps users know the minimum calories they need for survival, while TDEE provides a clearer picture of their daily energy expenditure, helping them make informed decisions about food and exercise. Setting goal-specific daily calories allows users to tailor their nutrition plans, promoting healthier, sustainable habits in line with their fitness objectives. By using this tool, users can make more mindful food choices, ensuring they fuel their bodies appropriately and maintain long-term health.
I started by finding inspiration on Dribble to better understand how to visually appeal to fitness consumers. Reviewing this inspiration I noticed some key items to a successful fitness-centered UI design:
Big words = Bold direction
Impactful text brought to the top of the visual hierarchy empowers the user ad connects them with the brand messaging. This immediate engagement is important in the fitness industry
The Who Behind The Why
Showcasing real people who benefit from living a healthy lifestyle helps the user actively envision themselves utilizing your product offering
Show Them The Money
Highlighting and fulfilling the user expectation provides immediate value to the user and establishes a quick but impactful consumer-product relationship
These 3 insights drove the design rationale of my low-fidelity to high-fidelity inspiration.
Brand Inspiration
Low to Mid Fidelity Iterations








First and Second Iteration:
Created an initial layout to start from. I noticed the results needed to moved up in the visual hierarchy to provide more immediate user value.
Third Iteration:
My next focus was UX Content and visual engagement, therefore I explored and finalized on the application description and motto. The more prominent one being the motto, and so I decided on ‘Fuel Goals, Do More’ because it gave a clear, driven, and empowered message that directly linked to the service of the product.
Fourth Iteration:
In the next iteration I started to play with the layout of the product description as I felt the previous layout was stunting the visual hierarchy. I wanted smoother eye tracking, so I started to move the other elements to think about how to increase full left to right comprehension. Applied orange as an empowering color.
I also thought about how I could get the user more driven to view the results ad thought to explore the UI of the submit button through a circle and arrow combination.
Top of the page
Github Repo
Checkout the Github repo
HTML | CSS | Javascript | Node.js | Express | Passport.js | MongoDB