NeuroHabit

Inspiration:

As high school students, we constantly struggled with staying consistent — not because we lacked motivation, but because we had no real feedback loop. We'd download habit apps, use them for two days, and forget they existed. We wanted something that actually talked back, understood our progress, and gave us a reason to keep going. That's where NeuroHabit came from.

What We Learned:

Building NeuroHabit taught us how to connect a vanilla JS frontend to a Flask backend, integrate a third-party LLM API (featherless.ai running DeepSeek-V3), and design a UI that feels genuinely polished. We learned how to handle real-world issues like CORS, localStorage as a source of truth, surgical DOM updates to avoid focus bugs, and how to gracefully degrade when an API is unavailable.

How We Built It:

We built NeuroHabit with a Flask backend serving a three-page frontend — a landing page, login, and the main dashboard. Habit data is stored in localStorage and synced to a JSON file on the server. The AI features are powered by featherless.ai, which we call from Flask to generate per-habit coaching responses, weekly review debriefs, and smart nudges. The dashboard uses a radial progress ring, 7-day dot grids per habit, streak tracking, and a fully animated UI built with vanilla HTML, CSS, and JavaScript.

Challenges We Faced:

The biggest challenge was the AI integration. Getting the per-habit slide-out panel to work without breaking the input focus on dynamic habits required us to completely rethink our DOM update strategy — instead of re-rendering the whole list, we surgically updated only the changed elements. We also had to work through environment setup issues, dependency management on macOS, and designing a system where the app still works offline when the AI backend is unreachable.