MyHaven auto_awesome

Currently In Development

MyHaven is an evolving, cozy, interactive web app built with React, TypeScript, and Tailwind CSS that combines daily reflection, mood tracking, and gentle gamification into a warm personal space. Instead of overwhelming users with rigid tasks, it creates a calm, supportive environment where small daily actions naturally build into meaningful progress.

Role(s):

Creative Direction

UI/UX Design

React.js

Typescript

TailwindCSS

Year:

2025 - Present

Case Study: Building MyHaven
A Cozy Daily Reflection App

I wanted to create a personal wellness app that felt different from the usual habit trackers. Instead of overwhelming users with charts and stats, MyHaven gives a gentle, cozy space for daily check-ins through moods, greetings, and quotes. To keep people coming back, I layered in streak-based collectibles plants, that grow over time and become part of a personal archive.

The Challenge

Most reflection apps feel clinical, gamified in a stressful way, or too minimal
I wanted something approachable and cozy that made people want to return daily
Needed to design a progression system without clutter
Balancing playful visuals with a professional-level frontend build

My Approach

Designed a core daily loop (Mood → Greeting → Quote) that feels quick but meaningful
Added afterflow options (Reflect, Interact, Explore) to keep people engaged after the core loop
Created visual growth systems: Haven Plants (reflections → growth → Greenhouse Archive)
Built with React, TypeScript, Tailwind for clarity and scalability
Used context + custom hooks to avoid messy prop drilling and keep state clean
Focused on delightful details like dark/light transitions, smooth animations, and simple collections UI