SafeSpace

A gentle place to begin again.

Comment

🌸 Inspiration

Recovery can feel like walking through fog with no map. A lot of existing platforms either feel cold and clinical or overwhelming and preachy. I wanted to make something that doesn’t talk at people — but sits with them.

SafeSpace is a soft, pixelated corner of the internet designed for anyone beginning their journey away from alcohol or drug dependence. It’s weird, gentle, gamified, and made to feel like a digital hug in 8-bit form.

✨ What it does

SafeSpace is a beginner-friendly, web-based companion that offers:

  • A simple mood tracker for emotional check-ins
  • Calming, pixel-style mini games to encourage engagement
  • A private journal that stores entries without requiring login
  • A gamified flow that feels more like a retro wellness game than a resource hub

No pressure. No forms. Just quiet support.

🛠️ How we built it

  • Frontend: HTML, CSS, and JavaScript (no frameworks, no libraries)
  • Aesthetic: Pixelify Sans, pastel color palette, retro graphics
  • Game Elements: Vanilla JS click/keyboard-based mini-games (e.g. simple exercises)
  • Local Storage: Saves user mood and journal data locally — no account needed
  • Navigation: Multi-page structure with smooth transitions between index.html, mood.html, exercise.html, and garden.html

😵‍💫 Challenges we ran into

The hackathon theme was “weirdly unique and beginner-friendly,” which forced me to rethink everything. Coming from a game development background, I usually chase complexity — but this project demanded softness and simplicity.

I had to keep asking myself:

Would someone with anxiety or brain fog understand this? Would they feel calm here?

That mindset shift was hard — but necessary.

🎉 Accomplishments we're proud of

  • Created a fully functional, emotionally aware web companion in under 48 hours
  • Delivered a multi-page support site with pixel-perfect charm
  • Made something fully beginner-accessible — no backend, no signup walls, no noise
  • Wrote clean, readable HTML/CSS/JS so others can remix or extend it

🧠 What we learned

As someone who usually thinks in terms of Unity scenes and C# logic, working with HTML/CSS/JS felt like using a different part of my brain.

I learned how to:

  • Build user experiences that soothe, not just function
  • Prioritize emotional safety over gamified rewards
  • Embrace low-tech, human-first design

“You're doing okay. Let’s take one small step.” That’s the kind of energy I wanted every line of code to hold.

🌱 What’s next for SafeSpace

  • Add gentle AI-powered journaling prompts based on user mood
  • Introduce ambient pixel soundscapes and soft visual effects
  • Expand with more calming mini-games and breathing tools
  • Make it mobile-first for easier access anytime, anywhere

If even one person feels a little less alone because of this... It was worth it. SafeSpace isn’t just a site. It’s a pixelated little friend that whispers:

“You don’t have to heal alone.”

Built With

Share this project:

Updates