About
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, and sleep habits, and 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 and Tailwind CSS, while staying pixel-precise and 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.
UI/UX
The UI, designed by dev Cameron(opens in a new tab) 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(opens in a new tab) utilities. Components are cleanly structured and reusable, making collaboration with a separate backend smooth and scalable.
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.
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.
Clean
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(opens in a new tab) to keep the codebase lean and scalable.