Nutrition Meter - Calories Tracker App using React

Last Updated : 23 Jul, 2025

GeeksforGeeks Nutrition Meter application allows users to input the name of a food item or dish they have consumed, along with details on proteins, calories, fat, carbs, etc. Users can then keep track of their calorie intake and receive a warning message if their calorie limit is exceeded. The logic for inputting item data and saving results in a card format has been implemented using JSX. The application uses functional-based components and manages states using different hooks.

Preview of Final Output:

👁 Nutritio Meter Calories Tracker

Nutritio Meter Calories Tracker

Prerequisites and Technologies:

Approach:

For creating the Nutrition Meter in the ReactJS library, we have used the functional-based components, where we have done a simple application that inputs the items consumed by the user and also takes the input like calories, fat, carbs, etc. Once the user enters the detail the data is been saved and presented in the form of Cards using Tailwind CSS. Also, the track of calories is been done and is visible to the user. The limit of 1000 calories is been set by default, so if the user exceeds the calorie limit, then the warning message is been shown. Users can also edit or delete the items which he has added.

Steps to create the application:

Step 1: Set up the React project using the below command in VSCode IDE.

npm create vite@latest nutrition-app --template react

Step 2: Navigate to the newly created project folder by executing the below command.

cd nutrition-app

Step 3: As we are using Tailwind CSS for styling, we need to install it using the npm manager. So execute the below command in the terminal, to install the tailwind CSS.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Step 4: After executing the above command, a 'tailwind.config.js' will be generated, so paste the below content in this file for the correct configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
 "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
}

Step 5: Install the required dependencies using the below command:

npm install --save @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons font-awesome

Step 6: Now, in the src directory create a file as NutritionMeter.jsx, which will consist of the entire code for inputting the details of items along with the calories, fat, etc,

Project Structure:

👁 Project Structure

The updated dependencies in package.json will look like this:

{
 "name": "nutrition-app",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@fortawesome/free-solid-svg-icons": "^6.4.2",
 "@fortawesome/react-fontawesome": "^0.2.0",
 "font-awesome": "^4.7.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "vite": "^4.0.0",
 "web-vitals": "^2.1.4"
 },
 "devDependencies": {
 "tailwindcss": "^3.0.0",
 "postcss": "^8.3.0",
 "autoprefixer": "^10.2.5"
 }
}

Example: Insert the below code in the App.js and NutritionMeter.jsx file mentioned in the above directory structure.

App.js: This file contains the rendering of NutritionMeter.jsx code. All the applications have been rendered from this file in the starting point.
NutritionMeter.jsx: This file in the application consists of all the required logic like inputting the details from the user, calculating the calories, and having the track to the limit of calories. If the calories are exceeded then the message is been shown to the user.
NutritionMeter.css: Supporting Styles and an attractive feel have been provided through this file. All the hovering effects etc. are been specified in this file.
index.css: This file contains the Tailwind CSS directives for styling our Nutrition Meter application.

Steps to run the application:

Step 1. Run the application by executing the following command in the terminal.