Smart Balance

SmartBalance is your safe, private all-in-one life companion — plan, budget, eat well, move more, track moods, save memories, play games, and export reports. Local login only, no cloud risk.

Comment

💡 Inspiration

I didn’t want to build just another simple task manager or expense tracker. My goal was to create something bigger, creative, and meaningful using only HTML, CSS, and JavaScript without external libraries. The idea grew from merging tasks and expenses, but I wanted more — something that could truly support busy IT professionals and help them balance work and life in one place.

⚙️ What it does

SmartBalance is a privacy-first, all-in-one work-life balance companion. It helps users:

  • ✅ Manage tasks and expenses together
  • 🍲 Track food and nutrition, with auto-expense updates for eating out
  • 🏋️ Stay active with simple room-friendly exercises
  • 🎮 Relieve stress with built-in brain games
  • 😊 Understand mood trends through weekly analysis
  • 📸 Store memories, photos, and birthday reminders
  • 📊 Generate insights, graphs, predictions, and downloadable reports
  • 🔒 Stay safe with local login for multiple users, with all data stored locally

🛠 How we built it

The project is built entirely with HTML, CSS, and Vanilla JavaScript.

  • 🗂 LocalStorage is used for persistence and multiple user profiles
  • 📊 The dashboard integrates data from tasks, expenses, food, fitness, mood, and games in real time
  • 🧮 Custom Canvas-based charts power analytics and reports
  • 🧩 Modular files (storage.js, charts.js, app.js, games.js, memories.js) handle storage, logic, games, and media
  • 🌗 Light/Dark modes and a built-in Help section improve accessibility and polish

🚧 Challenges we ran into

  • 🔄 Connecting multiple sections (tasks, expenses, meals, fitness) without overwhelming the user
  • 🖌 Building charts and insights from scratch using Canvas, with zero third-party libraries
  • 🔐 Ensuring privacy and multi-user isolation using only LocalStorage
  • ⚡ Keeping everything responsive, fast, and clear despite a large feature set

🏆 Accomplishments that we're proud of

  • 🎯 Unifying productivity, finance, health, mood, and entertainment in one seamless flow
  • 🔒 Implementing a local login system with per-user scoped data
  • 📈 Delivering advanced analytics and report exports (CSV/JSON) without external tools
  • 🌟 Adding mood tracking, streaks, badges, memories, and birthday reminders to keep it human

📚 What we learned

  • 🚀 How far plain HTML/CSS/JS can go without frameworks
  • 🔗 The value of cross-linking features (e.g., meals → expenses, workouts → mood)
  • 🎯 Small motivators (streaks, badges, insights) significantly boost engagement
  • 👩‍💻 Building for real users (busy professionals) leads to practical, focused design choices

🔮 What’s next for SmartBalance

  • ✅ Remain 100% HTML/CSS/JS with zero external libraries or frameworks.
  • 🔑 Optional local encryption (Web Crypto) for exports/imports with passphrase — no servers involved.
  • 📱 PWA installability and offline-first caching (Service Worker), still served statically.
  • 🗃️ Data engine: optional IndexedDB for larger datasets; schema versioning and safe migrations.
  • 📊 Charts: richer Canvas-based visuals (annotations, comparisons) without chart libraries.
  • 🧭 UX: keyboard shortcuts, improved accessibility, i18n via Intl APIs, theme customization via CSS variables.
  • 🔄 Import/Export: preview, diff, and selective merge for JSON/CSV backups.
  • 🧩 Modules: more built-in mini-exercises/games and wellness routines.

Built With

  • canvasapi
  • css3
  • html5
  • javascript(vanillaes6+)
  • localstorage
Share this project:

Updates