Going Zero-Dependency with Svelte
To keep the page load speed under 100ms, I avoided heavy frameworks and opted for Svelte. Because Svelte compiles down to tiny, framework-less vanilla JavaScript at build time, the entire site's bundle size is virtually non-existent.
I combined this with Tailwind CSS for utility-first styling. The UI updates instantly as the user types or drags the activity slider. No page refreshes, no spinning loaders. Just instant, client-side math.
The Challenge: Dynamic Macro Distribution
A good TDEE calculator shouldn't just give you a single calorie number. It needs to provide actionable data. I wanted to build a macro-nutrient breakdown that dynamically shifts based on user goals:
- Maintenance: Balance of carbs, proteins, and fats.
- Cutting (Deficit): Higher protein intake to preserve lean muscle mass.
- Bulking (Surplus): Higher carbs to fuel intense workouts.
Handling these dynamic state changes requires a clean, unidirectional data flow. By binding the Svelte stores to the active goal state, the macros automatically recalculate down to the gram without importing heavy graphing libraries.
The Result
The entire site is fully static, serverless, and optimized for core web vitals. It scores a perfect 100/100 on Google Lighthouse.
If you are into high-performance web utilities or want to take a look at a clean UI implementation, check it out at calctdee.com. I would love to hear your feedback on the UI/UX and how I can optimize the calculation math even further!
Top comments (0)