I Built a Mood-Based Productivity App with Just HTML, CSS & JS – No Frameworks, No Backend, Fully Offline

mostapha ladnani — Sat, 19 Jul 2025 22:19:41 +0000

Hey devs! 👋

I recently built a productivity app called FocusFlow — it adapts to your mood, includes a Pomodoro timer, task management, and works 100% offline.

No React, no Vue, no backend. Just HTML, CSS, and Vanilla JS.

It started as a small experiment... but I ended up building something useful for both myself and others.

Here’s how I did it, why I did it, and how you can try it too 🔥

FocusFlow is a mood-based productivity dashboard designed for developers, students, and anyone trying to stay focused.

🧠 It tracks your mood

⏱️ Has a built-in Pomodoro timer

✅ Lets you manage tasks

🌙 Adapts themes automatically

📦 All inside one .html file — no installs, no internet needed.

HTML5 + semantic layout
Custom CSS with dark/light mode & mood themes
Vanilla JavaScript
localStorage for saving data (mood + tasks)
Sound effects + browser notifications

The goal was to build something:

Fast to open
Distraction-free
Fully private (no data stored in clouds)
And built with tools I already knew

I didn’t want users to log in, sync, or get distracted.

I just wanted people to open a tab and get in the zone 🎯

🆓 Free Version:

🔗 Code & Chill – Free Version (Ko-fi)

💎 Pro Version:

🔗 FocusFlow Pro (Ko-fi)

📦 Or check the code:

🔗 GitHub Repo

Building for others is different than coding for yourself
Simplicity matters more than flashy tech
Even small projects can be powerful when focused

If you like this, feel free to support me on Ko-fi or follow me on GitHub.

I'm planning to drop more free tools and offline apps soon!

👉 Ko-fi Profile

👉 GitHub

Have you ever built something without frameworks or backends?

Would love your feedback or thoughts in the comments 👇

Let’s build better tools together!

DEV Community: mostapha ladnani

I Built a Mood-Based Productivity App with Just HTML, CSS & JS – No Frameworks, No Backend, Fully Offline