Mood Tracking

Mood Tracking Dashboard with a caption saying: How are you feeling today? followed by a mood and sleep trend graph
Mood Tracking Dashboard with logged values, featuring a yellow happy smiley face and a graph of the mood values
Modal screen with form to add new mood entry
Login Screen for Mood Tracking
Mood Tracking Dashboard with logged values, featuring a violet sad smiley face and a graph of the mood values

Technologies used

Mood Tracking logo

Mood Tracking is a full-stack web app built in collaboration with backend developer Cameron(opens in a new tab). The app lets users track their mood, feelings, & sleep habits, & displays the data in a clear, friendly dashboard.

For this project, I’m responsible for building the entire frontend based on a detailed Figma design. That means translating mockups into responsive, accessible components using Next.js & Tailwind CSS, while staying pixel-precise & UI-consistent across different screen sizes.

I'm currently in the middle of working on this project — live version coming soon! In the meantime, you can check out the code on GitHub(opens in a new tab).

UI/UX

The UI, designed by dev Cameron from a detailed Figma design, is pixel-perfect and responsive across breakpoints. The layout includes a dashboard, modal flows, and form interactions, all made with accessible, semantic HTML and responsive Tailwind utilities. Components are cleanly structured and reusable, making collaboration with a separate backend smooth and scalable.

Visual of the Figma-to-code of project: Mood Tracking

Figma-to-code

This project has been a deep dive into precision coding - matching the Figma mockups exactly when it comes to spacing, font sizing, visual alignment, and consistent component structure. It’s helped me sharpen my attention to detail across both layout and behavior.

Visual of the accessible of project: Mood Tracking

Accessible

From form modals to dashboard cards, every interactive element is built with semantic HTML and designed to be keyboard and screen reader accessible. Focus states, button structure, and flow logic follow a11y-first principles from the start.

Visual of the flexible code of project: Mood Tracking

Flexible code

Since I’m collaborating with a backend developer, I’ve kept the frontend modular and maintainable. Pages and components are organized for clear separation of concerns, and styling is handled entirely with Tailwind to keep the codebase lean and scalable.