├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── BMICalculator.jsx │ ├── BMIResult.jsx │ └── History.jsx ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # vitepress build output 108 | **/.vitepress/dist 109 | 110 | # vitepress cache directory 111 | **/.vitepress/cache 112 | 113 | # Docusaurus cache and generated files 114 | .docusaurus 115 | 116 | # Serverless directories 117 | .serverless/ 118 | 119 | # FuseBox cache 120 | .fusebox/ 121 | 122 | # DynamoDB Local files 123 | .dynamodb/ 124 | 125 | # TernJS port file 126 | .tern-port 127 | 128 | # Stores VSCode versions used for testing VSCode extensions 129 | .vscode-test 130 | 131 | # yarn v2 132 | .yarn/cache 133 | .yarn/unplugged 134 | .yarn/build-state.yml 135 | .yarn/install-state.gz 136 | .pnp.* 137 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 BALADURGA G 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚖️ BMI & Health Tracker 2 | 3 | A modern React-based BMI (Body Mass Index) and health tracking app with goal setting, real-time chart updates, and dark mode toggle support. 4 | 5 | --- 6 | 7 | ## 🚀 Features 8 | 9 | - ✅ **BMI Calculator** (based on height and weight) 10 | - ✅ **Health Classification** (Underweight, Normal, Overweight, Obese) 11 | - ✅ **Age & Gender Input** 12 | - ✅ **Goal Tracking** (target weight or BMI) 13 | - ✅ **BMI History Logging** (stored in localStorage) 14 | - ✅ **Live-Updating Chart** using [`recharts`](https://recharts.org/) 15 | - ✅ **Dark Mode Toggle** 🌙 16 | - ✅ **Responsive UI** built with [Tailwind CSS](https://tailwindcss.com/) 17 | 18 | --- 19 | 20 | 21 | ## 📦 Installation 22 | 23 | ```bash 24 | # 1. Clone the repo 25 | git clone https://github.com/BALADURGAG24/bmi-health-tracker-react.git 26 | cd bmi-health-tracker-react 27 | 28 | # 2. Install dependencies 29 | npm install 30 | 31 | # 3. Start development server 32 | npm run start 33 | ``` 34 | 35 | Visit: [http://localhost:3000](http://localhost:3000) 36 | 37 | --- 38 | 39 | ## 📁 Folder Structure 40 | 41 | ``` 42 | bmi-tracker-app/ 43 | ├── public/ 44 | ├── src/ 45 | │ ├── components/ 46 | │ │ ├── BMICalculator.jsx 47 | │ │ ├── BMIResult.jsx 48 | │ │ ├── History.jsx 49 | │ │ └── DarkModeToggle.jsx 50 | │ ├── App.jsx 51 | │ ├── main.jsx 52 | │ └── index.css 53 | ├── index.html 54 | ├── tailwind.config.js 55 | ├── postcss.config.js 56 | ├── package.json 57 | ``` 58 | 59 | --- 60 | 61 | ## 📊 Tech Stack 62 | 63 | - [React](https://reactjs.org/) 64 | - [Tailwind CSS](https://tailwindcss.com/) 65 | - [Recharts](https://recharts.org/) 66 | - [Vite](https://vitejs.dev/) 67 | 68 | --- 69 | 70 | ## ✨ Usage Guide 71 | 72 | ### ➕ Add BMI Entry 73 | - Fill in your weight (kg), height (cm), age, and gender. 74 | - Press **Calculate BMI**. 75 | - BMI will be calculated, categorized, and logged to your history. 76 | 77 | ### 🎯 Set Health Goals 78 | - Input a target weight or BMI. 79 | - Press **Save Goal**. 80 | - Goals persist in browser localStorage. 81 | 82 | ### 📈 Live BMI Chart 83 | - Your BMI history is visualized using a real-time line chart. 84 | - New entries automatically update the graph. 85 | 86 | ### 🌙 Dark Mode Toggle 87 | - Use the toggle in the top-right to switch between light and dark mode. 88 | - Your preference is saved locally. 89 | 90 | --- 91 | 92 | ## 🧮 BMI Formula 93 | 94 | ``` 95 | BMI = weight (kg) / [height (m)]² 96 | ``` 97 | 98 | Example: 99 | ``` 100 | Weight = 70kg, Height = 170cm 101 | BMI = 70 / (1.70 * 1.70) = 24.2 (Normal) 102 | ``` 103 | 104 | --- 105 | 106 | ## 💾 Local Storage Keys 107 | 108 | - `bmi-history` → Array of BMI entries (JSON) 109 | - `bmi-goal` → Saved target weight/BMI 110 | - `dark-mode` → Theme preference ("light" | "dark") 111 | 112 | --- 113 | 114 | ## 📤 Deployment 115 | 116 | Deploy to the web easily using: 117 | 118 | - 🔄 [Vercel](https://vercel.com/) 119 | - ☁️ [Netlify](https://www.netlify.com/) 120 | - 🧩 GitHub Pages (via [vite-plugin-gh-pages](https://www.npmjs.com/package/vite-plugin-gh-pages)) 121 | 122 | --- 123 | 124 | ## 📅 Planned Improvements 125 | 126 | - ✅ Dark mode toggle 127 | - ⏱ Reminders to log BMI daily 128 | - 🔔 Goal progress tracking bar 129 | - 🔒 Firebase/Supabase cloud sync 130 | - 📥 Export data as CSV or PDF 131 | - 🧪 Unit tests (Jest + React Testing Library) 132 | 133 | --- 134 | 135 | ## 👨‍💻 Author 136 | 137 | Developed with ❤️ by [BALADURGAG24] 138 | 139 | --- 140 | 141 | ## 📄 License 142 | 143 | [MIT](LICENSE) 144 | 145 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bmi-tracker-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/dom": "^10.4.0", 7 | "@testing-library/jest-dom": "^6.6.3", 8 | "@testing-library/react": "^16.3.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^19.1.0", 11 | "react-dom": "^19.1.0", 12 | "react-scripts": "5.0.1", 13 | "recharts": "^2.15.3", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "autoprefixer": "^10.4.21", 42 | "postcss": "^8.5.6", 43 | "tailwindcss": "^3.4.17" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BALADURGAG24/bmi-health-tracker-react/0695c4a6852fae442e7f8c03e3ff1b1882760fa8/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BALADURGAG24/bmi-health-tracker-react/0695c4a6852fae442e7f8c03e3ff1b1882760fa8/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BALADURGAG24/bmi-health-tracker-react/0695c4a6852fae442e7f8c03e3ff1b1882760fa8/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import BMICalculator from './components/BMICalculator'; 3 | import History from './components/History'; 4 | 5 | export default function App() { 6 | const [history, setHistory] = useState([]); 7 | const [darkMode, setDarkMode] = useState(() => { 8 | return localStorage.getItem('theme') === 'dark'; 9 | }); 10 | 11 | useEffect(() => { 12 | const saved = JSON.parse(localStorage.getItem('bmi-history') || '[]'); 13 | setHistory(saved.reverse()); 14 | }, []); 15 | 16 | useEffect(() => { 17 | document.documentElement.classList.toggle('dark', darkMode); 18 | localStorage.setItem('theme', darkMode ? 'dark' : 'light'); 19 | }, [darkMode]); 20 | 21 | const handleNewEntry = (entry) => { 22 | const updated = [entry, ...history]; 23 | localStorage.setItem('bmi-history', JSON.stringify(updated)); 24 | setHistory(updated); 25 | }; 26 | 27 | return ( 28 |
29 |
30 |

⚖️ BMI & Health Tracker

31 | 37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 | ); 48 | } -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/BMICalculator.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import BMIResult from './BMIResult'; 3 | 4 | export default function BMICalculator({ onNewEntry }) { 5 | const [weight, setWeight] = useState(''); 6 | const [height, setHeight] = useState(''); 7 | const [age, setAge] = useState(''); 8 | const [gender, setGender] = useState(''); 9 | const [targetWeight, setTargetWeight] = useState(''); 10 | const [targetBMI, setTargetBMI] = useState(''); 11 | const [result, setResult] = useState(null); 12 | 13 | useEffect(() => { 14 | const savedGoal = JSON.parse(localStorage.getItem('bmi-goal') || '{}'); 15 | setTargetWeight(savedGoal.targetWeight || ''); 16 | setTargetBMI(savedGoal.targetBMI || ''); 17 | }, []); 18 | 19 | const handleGoalSave = () => { 20 | localStorage.setItem('bmi-goal', JSON.stringify({ targetWeight, targetBMI })); 21 | alert('Goals saved!'); 22 | }; 23 | 24 | const calculateBMI = () => { 25 | const h = parseFloat(height) / 100; 26 | const w = parseFloat(weight); 27 | if (!h || !w) return; 28 | 29 | const bmi = (w / (h * h)).toFixed(1); 30 | let category = ''; 31 | if (bmi < 18.5) category = 'Underweight'; 32 | else if (bmi < 25) category = 'Normal'; 33 | else if (bmi < 30) category = 'Overweight'; 34 | else category = 'Obese'; 35 | 36 | const entry = { 37 | date: new Date().toLocaleDateString(), 38 | bmi, 39 | category, 40 | weight, 41 | height, 42 | age, 43 | gender 44 | }; 45 | 46 | setResult(entry); 47 | onNewEntry(entry); 48 | }; 49 | 50 | return ( 51 |
52 | setWeight(e.target.value)} placeholder="Weight (kg)" className="input" /> 53 | setHeight(e.target.value)} placeholder="Height (cm)" className="input" /> 54 | setAge(e.target.value)} placeholder="Age" className="input" /> 55 | 60 | 61 |
62 | setTargetWeight(e.target.value)} placeholder="Target Weight (kg)" className="input" /> 63 | setTargetBMI(e.target.value)} placeholder="Target BMI" className="input" /> 64 |
65 | 66 | 67 | 68 | 69 | {result && ( 70 | 71 | )} 72 |
73 | ); 74 | } 75 | -------------------------------------------------------------------------------- /src/components/BMIResult.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function BMIResult({ data, targetWeight, targetBMI }) { 4 | return ( 5 |
6 |

📄 Your Result:

7 |

BMI: {data.bmi} ({data.category})

8 |

Weight: {data.weight} kg

9 |

Height: {data.height} cm

10 |

Age: {data.age}

11 |

Gender: {data.gender}

12 | {targetWeight &&

🎯 Target Weight: {targetWeight} kg

} 13 | {targetBMI &&

🎯 Target BMI: {targetBMI}

} 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/History.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts'; 3 | 4 | export default function History({ history }) { 5 | if (!history || history.length === 0) return null; 6 | 7 | return ( 8 |
9 |

📊 BMI History Chart

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .input { 6 | @apply p-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-black dark:text-white; 7 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'class', 3 | content: ['./src/**/*.{js,jsx}'], 4 | theme: { extend: {} }, 5 | plugins: [], 6 | }; --------------------------------------------------------------------------------