The latest articles on DEV Community by Keshan Gamage (@keshangamage). https://dev.to/keshangamage https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3342891%2Fd648471d-c69d-4d9d-bc72-0b6f370c6371.png https://dev.to/keshangamage en Keshan Gamage Fri, 11 Jul 2025 07:30:12 +0000 https://dev.to/keshangamage/moodmate-track-your-emotions-with-ease-2k04 https://dev.to/keshangamage/moodmate-track-your-emotions-with-ease-2k04 <p><strong>Moodmate</strong> is a responsive web application that helps users track their mood daily using emoji-based inputs. Designed with simplicity and clarity in mind, it acts as a daily emotional check-in tool to promote mental well-being through reflection and pattern recognition.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frji8mzlo08bc4x2ew5yz.webp" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frji8mzlo08bc4x2ew5yz.webp" alt="Moodmate Home Page" width="800" height="470"></a></p> <p><strong>🛠️ Built With:</strong><br> ⚛️ React – for building dynamic, component-based UI</p> <p>🎨 Tailwind CSS – for responsive and modern styling</p> <p>🌐 JavaScript, HTML5, CSS3 – core technologies</p> <p>🚀 GitHub Pages – for hosting the live demo</p> <p>🧩 Figma – for designing user flows and layouts</p> <p><strong>📱 Features:</strong></p> <ul> <li><p>Emoji-based mood selection</p></li> <li><p>Clean and intuitive UI</p></li> <li><p>Mobile and desktop responsive</p></li> <li><p>Reflect on emotional patterns over time</p></li> </ul> <p><strong>🔍 Challenges Faced:</strong></p> <ul> <li><p>Keeping the UI engaging without clutter</p></li> <li><p>Designing a simple and user-friendly mood submission flow</p></li> <li><p>Ensuring full mobile responsiveness</p></li> <li><p>Managing state effectively in React without external libraries</p></li> </ul> <p><strong>🔗 Project Links:</strong><br> 🌐 Live Website: <a href="https://keshangamage.github.io/Moodmate" rel="noopener noreferrer">https://keshangamage.github.io/Moodmate</a></p> <p>💻 GitHub Repository: <a href="https://github.com/keshangamage/Moodmate" rel="noopener noreferrer">https://github.com/keshangamage/Moodmate</a></p> <p>🎥 Demo Video: <a href="https://www.youtube.com/watch?v=UCE-qWV3Eb8" rel="noopener noreferrer">https://www.youtube.com/watch?v=UCE-qWV3Eb8</a></p> <p><strong>💡 Why I Built This</strong><br> Moodmate was born from a simple idea: help users understand their emotional trends in a clean, unobtrusive way. Whether you're checking in for mental wellness or just curious how you feel day to day, Moodmate makes it effortless.</p> webdev javascript programming react