About the Project

💡 Inspiration

SereneShield came from a mix of the personal and the observed. I've seen firsthand — both in my own life and in the lives of people around me — how easy it is to fall into compulsive online habits and how hard it is to actually break them. Most existing tools take a purely punitive approach: they just block a site and call it done. But willpower doesn't work that way. Talking to friends and peers, the same pattern kept coming up — people didn't just need something blocked, they needed to understand why they kept reaching for it in the first place, and something to hold onto in the moment an urge hit.

That gap — between "block the content" and "help the person" — is what SereneShield tries to close.

🚀 What it does

SereneShield is a digital wellness and recovery platform that combines three things that are usually separated into different apps:

Behavioral tracking — recovery streaks, best-streak stats, and total clean days, so progress is visible and motivating
Self-awareness tools — trigger and urge logging with mood pattern analysis, so users start to see why urges happen, not just that they happen
In-the-moment support — guided breathing exercises and an "I'm Struggling Right Now" emergency panel with quick alternative actions (go for a walk, cold shower, call someone, etc.)
Website blocking — custom blocklists exportable to Pi-hole, NextDNS, or plain text, for people who want blocking to work at the network level, not just in-browser

The goal isn't just restriction — it's giving people the data and tools to actually understand and change their behavior.

🛠️ How I built it

SereneShield is built as a responsive, mobile-first web app using:

HTML5, CSS3, and JavaScript for the core interface
Local Storage for persisting streaks, logs, and blocklists client-side, keeping the experience private and fast without needing a backend for the MVP

I designed the UI to be calm and distraction-free on purpose — soft colors, minimal clutter, generous whitespace — since a cluttered interface is the opposite of what someone in a vulnerable moment needs. The emergency support screen, in particular, was built to load instantly and get straight to the point: breathe, or pick a quick alternative action.

🧗 Challenges I faced

Designing for a crisis moment, not just a dashboard. A habit tracker is easy to design when things are going well. The harder design problem was the "I'm Struggling Right Now" flow — it had to be fast, calming, and require zero extra taps or reading in a moment when someone's willpower is already stretched thin.
Balancing accountability with privacy. Trigger and mood logging is only useful if people are honest in it, and people are only honest if they trust the tool. Keeping data local and framing logging as self-understanding rather than surveillance was a constant design tension.
Making blocking feel like support, not punishment. It was tempting to lean hard into blocking as the main feature, but that reduces the problem to willpower vs. temptation. Building out the trigger analysis and breathing tools alongside blocking took more time but made the product feel like it was actually helping, not just gatekeeping.

📚 What I learned

Recovery tools succeed or fail based on what happens in the seconds right before a relapse — not the dashboard someone checks once a day.
Data (streaks, triggers, patterns) is a powerful motivator when it's framed as progress, not judgment.
Simplicity is a feature. Every extra click or bit of friction in the emergency flow is a chance for someone to give up and go back to the old habit instead.