The latest articles on DEV Community by Sweta Singh (@swetasingh8844). https://dev.to/swetasingh8844 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3781997%2F015dbb31-27bc-4d33-a84b-e93e094fcb5c.jpeg https://dev.to/swetasingh8844 en Sweta Singh Fri, 20 Feb 2026 04:54:59 +0000 https://dev.to/swetasingh8844/i-built-a-free-bmi-bmr-calorie-ideal-weight-calculator-using-react-and-tailwind-css-3915 https://dev.to/swetasingh8844/i-built-a-free-bmi-bmr-calorie-ideal-weight-calculator-using-react-and-tailwind-css-3915 <p>As a student developer passionate about health tech and web development, I wanted to build something useful for everyday users.<br><br> So I created <strong>TheFitCalculator</strong> — a free online tool to calculate BMI, BMR, daily calorie needs, and ideal weight instantly.</p> <p>👉 Try it here: <a href="https://thefitcalculator.com" rel="noopener noreferrer">https://thefitcalculator.com</a></p> <h2> 💡 Why I Built This </h2> <p>My goal was simple:</p> <ul> <li>Fast calculations </li> <li>Clean UI </li> <li>No data storage </li> <li>Fully browser-based processing </li> </ul> <h2> 🛠️ Tech Stack </h2> <p>I built this project using:</p> <ul> <li>React.js for component-based UI </li> <li>Tailwind CSS for responsive design </li> <li>JavaScript for calculation logic </li> <li>Vercel for deployment </li> </ul> <h2> ✨ Features </h2> <p>✅ BMI Calculator with health category<br><br> ✅ BMR Calculator using standard formulas<br><br> ✅ Daily calorie needs estimator<br><br> ✅ Ideal weight calculator<br><br> ✅ Dark mode support<br><br> ✅ Mobile responsive design </p> <p>You can explore the calculators here:</p> <ul> <li>BMI Calculator → <a href="https://thefitcalculator.com/bmi-calculator" rel="noopener noreferrer">https://thefitcalculator.com/bmi-calculator</a> </li> <li>BMR Calculator → <a href="https://thefitcalculator.com/bmr-calculator" rel="noopener noreferrer">https://thefitcalculator.com/bmr-calculator</a> </li> <li>Calorie Calculator → <a href="https://thefitcalculator.com/calorie-calculator" rel="noopener noreferrer">https://thefitcalculator.com/calorie-calculator</a> </li> <li>Ideal Weight Calculator → <a href="https://thefitcalculator.com/ideal-weight-calculator" rel="noopener noreferrer">https://thefitcalculator.com/ideal-weight-calculator</a> </li> </ul> <h2> 🚀 Future Improvements </h2> <p>I plan to add:</p> <ul> <li>Body fat calculator </li> <li>Water intake calculator </li> <li>Fitness blog section </li> <li>PWA support </li> </ul> <h2> 🤝 Feedback Welcome </h2> <p>I’d love feedback from the dev community to improve this project.</p> <p>👉 Check it out: <a href="https://thefitcalculator.com" rel="noopener noreferrer">https://thefitcalculator.com</a><br><br> 👉 GitHub repo: <a href="https://github.com/swetasingh8844/HealthCalc" rel="noopener noreferrer">https://github.com/swetasingh8844/HealthCalc</a></p> <p>Thanks for reading!</p> react showdev sideprojects tailwindcss