My Daily Life Dashboard banner

My Daily Life Dashboard

1 devlog
7h 21m 58s

My Daily Life Dashboard is a small game‑style productivity web app I built with HTML, CSS and JavaScript. It puts daily tasks, habits, notes, quick links and a simple focus timer into one dashboard, and adds an XP + level system so finishing real …

My Daily Life Dashboard is a small game‑style productivity web app I built with HTML, CSS and JavaScript. It puts daily tasks, habits, notes, quick links and a simple focus timer into one dashboard, and adds an XP + level system so finishing real work feels a bit like progressing in a game.

i hope you like my first project hehehe…

This project uses AI

normally I wrote all of the code and built the features myself. I only used Chatgpt for suggestions such as UI/UX ideas, naming, and occasional guidance when I was stuck & code debugging, and then I adapted those ideas in my own words and code.

Demo Repository

Loading README...

zolodix

Shipped this project!

I built My Daily Life Dashboard, a gamified productivity system where tasks feel like quests and daily consistency earns XP, levels, and real progress. It includes a smart focus queue, habit streak engine with schedules, goal hierarchy with auto milestone updates, weekly review, focus timer, and drag drop organization. The hardest part was keeping everything truly live and synced across modules without breaking state, especially when linking goals with task completion and preventing XP abuse. I solved it by restructuring state logic, adding migration safe data handling, and testing each feature in real daily use. Really happy with how it turned out because it is not just a UI project anymore, it is something I can genuinely use every day.

zolodix

After many hours of hardwork (and a lot of frustration) I finally finished my first project a gamified life dashboard built with just HTML, CSS and vanilla JavaScript.

The idea started simple. I just wanted one page where I could track my tasks, habits and notes without switching between 5 different apps. But then I thought, why not make it feel like a game too. So that’s what I did.

Here’s what ended up in it, a quest log for daily tasks with priority tags, a habits section that tracks your daily streaks, a journal for quick notes, a warp portals panel for saving useful links, a focus timer (25 min pomodoro style), a weekly review that shows your last 7 days, goal tracking with milestones, and a player stats card that updates live.

The best part was building the XP and level system. Every time you complete a task or habit you get XP, and when you level up a full screen animation plays with confetti everywhere. That part alone took way too long but it was worth it.

The UI went through so many versions. I kept changing colors, card styles and layout until it finally felt clean and game-style dark instead of just dark and ugly.

Streak logic and saving everything properly in localStorage also broke multiple times before I got it stable. No frameworks, no server, no install. Just open index.html and it works. Pretty happy with how it came out for a first project honestly.

Attachment
Attachment
Attachment
Attachment
Attachment
0