This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
I built Health Diary — an effortless, privacy-first nutrition and calorie tracking web app designed for my friend who wanted to eat healthier and track their meals without the tedious manual searching, complex ingredient lookups, or paid subscription paywalls found in most mainstream fitness apps.
The Problem It Solves
Traditional calorie trackers require you to search through cluttered databases for every single ingredient, guess serving sizes in obscure units, and spend 5–10 minutes after every meal tapping through endless dropdowns. My friend found this friction so exhausting that they constantly abandoned tracking after just a couple of days.
The Solution
With Health Diary, logging a meal takes 5 seconds:
- Speak or Type Naturally: You simply tap the mic or type in plain language: "2 boiled eggs, a slice of whole wheat toast with peanut butter, and a black coffee for breakfast".
- Smart Nutrition Parsing: The built-in parsing engine automatically extracts the food items, calculates portion quantities (fractions, units, grams, cups, slices), determines the meal time, and scales all nutritional components instantly.
- Deep Component Analysis: Beyond just counting calories, it provides a comprehensive breakdown of Macronutrients (Protein, Carbs, Fat) and Micronutrients (Dietary Fiber, Sugar limit, Sodium, Potassium, Calcium, Iron, Vitamins) with an algorithmic Diet Quality Score.
- Monthly Insights & Calendar: An interactive calendar and daily calorie trend chart allow inspecting any historical date with one click, tracking consistency, and exporting data as CSV.
Demo
- Live App Demo: https://healthdiary-zeta.vercel.app/
-
Video / Screenshots Preview:
- 🎙️ Home & Voice Logging: Tap to speak or type meals, review live calorie rings, macro bars, and hydration.
- 📊 Daily Analysis: In-depth macronutrient donuts, micronutrient meters, and full food item tables.
- 🗓️ Monthly Calendar: Color-coded compliance overview with click-to-inspect daily explorer.
Code
The complete source code is available on GitHub:
manik-dev-sudo
/
Nutrition_tracker
Nutrition tracker that keep track of your nutrition requirement throughout the day
Health Diary
A simple calorie and nutrition tracker designed to make logging meals effortless. Instead of searching and adding ingredients one by one, you can just speak or type what you ate in plain language (e.g., "2 boiled eggs, a slice of whole wheat toast with peanut butter, and a cup of black coffee"), and the app calculates the calories and nutrition breakdown for you.
How It Works
1. Home & Quick Logging (Speak or Type)
- Voice or Text Input: Tap the microphone button to speak or type what you ate in your own words.
- Smart Food Parser: Automatically understands quantities, portions, fractions, and meal types (Breakfast, Lunch, Dinner, Snack).
-
Confirmation Preview: Lets you quickly review items, adjust portions with
+/-buttons, or remove items before adding them to your log. - Today's Summary: Live calorie ring (calories eaten vs. your daily target), progress…
How I Built It
Health Diary was built with a zero-dependency, ultra-fast, offline-first vanilla web stack:
- Frontend Architecture: Built using semantic HTML5, modern Vanilla CSS with a crisp light wellness aesthetic (Plus Jakarta Sans typography, soft gradients, responsive glass cards), and modular JavaScript (ES Modules).
- Speech Recognition (Web Speech API): Native speech-to-text integration that transcribes natural voice descriptions in real-time with zero external server latency.
-
Natural Language Food & Nutrition Parser:
- Built-in comprehensive food database spanning 150+ standardized foods across all food groups (Proteins, Carbs, Dairy, Vegetables, Fruits, Snacks, Dishes).
- Rule-based natural language parser that detects multi-item lists, fractions (
1/2,1.5), units (tbsp,g,cups,bowls,pieces), and meal keywords (for breakfast,in lunch,as a snack).
- Interactive SVG Charting Engine: Custom, lightweight SVG engine that renders responsive calorie progress rings, macronutrient ratio donuts, and monthly trend bar charts with interactive hover states and click-to-inspect event bindings.
-
Local Storage & Privacy: All logs, hydration metrics, and custom foods are stored strictly on the user's device (
localStorage), guaranteeing 100% privacy with zero tracking or mandatory account sign-ups.
Why Does Open Innovation Matter?
Open innovation enables us to build tools that prioritize the user over data monetization.
Most commercial diet apps lock basic nutritional breakdowns (like fiber, sodium, and micronutrient ratios) behind expensive monthly paywalls, while collecting personal health data for advertising.
By building an open-source, client-side application:
- Health is Accessible to Everyone: Clean, accurate nutrition tracking without ads, paywalls, or forced subscriptions.
- True Data Sovereignty: Personal dietary logs remain entirely on the user's browser, accessible offline anytime.
- Extensibility: Anyone can fork the project, add localized food databases for their region, or customize their nutritional targets.
My Agent Session
This project was built with the assistance of agentic AI workflows. The agent assisted in designing the natural language parser regex rules, standardizing the USDA nutrition database components, architecting the interactive SVG visualization engine, and crafting the clean wellness design system.
Prize Categories
- Build for a Friend
- Open-source Web Application
Top comments (0)