← Back to all work Web Programming

Where design meets code

I don't just hand off mockups — I build. These front-end projects show me taking interfaces from design into working, deployed code with HTML, CSS, and JavaScript.

Featured build

Smart Habit Tracker

A transactional web app that helps students manage their mental health and well-being through personalized habit tracking, reminders, and analytics. Balancing school, social life, and self-care can be overwhelming — so the app encourages students to build healthy routines that support both their well-being and academic success.

Users can set daily or weekly goals, track mood, stress levels, and study habits, and get insights into their emotional and academic patterns over time.

My role

Team project with Claire Zhang, Claire Lee, and Tsion Tessema. We applied database management, API integration, and server-side programming to build a practical, impactful tool — deployed live on Heroku.

Key features

Custom habits & goals

Track self-care (mindfulness, journaling, hydration), academic (study sessions, breaks), and social habits in one place.

Mood & stress tracking

Log daily stress, emotions, and reflections to reveal patterns over time.

Study & focus analytics

Insights into productivity, sleep, and their impact on mental well-being.

Smart reminders & affirmations

Gentle nudges for self-care and study breaks, plus motivational messages tuned to logged emotions.

View the live app ↗
Also built

Tic-Tac-Toe game

A fully playable Tic-Tac-Toe built from scratch in HTML, CSS, and JavaScript. It tracks turns, detects win and stalemate conditions in real time, and resets for a new game — a compact demonstration of clean game-state logic and DOM interaction.

Play it ↗
Why this matters

A designer who understands the build

Coding my own designs makes me a stronger UX/UI designer. I know what's feasible, I can speak the language of engineers, and I can prototype ideas in real code — not just static screens. It keeps my designs grounded in what can actually ship.

HTML CSS JavaScript Responsive layout API integration Deployment

Want to see more?

Take a look at my design case studies or get in touch.

Read the BFF case study All work