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

Currently looking for FT work

📍 Located: Philly Tri-State Area

Need help on a project?

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

  1. Personalized Caloric Calculation

  2. Goal-oriented Adjustments

  3. 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

currently looking for full-time work

📍 Based in the Philly Tri-State Area.

Need help on a project?