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

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!