✨ Mindful Metrics: Unleashing Habit Mastery with KendoReact Magic

This is a submission for the KendoReact Free Components Challenge. What I Built Mindful Metrics is a habit tracker built with KendoReact Free Components that empowers users to cultivate better habits, monitor daily progress, and receive personalized, AI-driven feedback. It features intuitive habit creation forms, dynamic grids for efficient habits management, and interactive charts that reveal habit consistency and focus distribution. 24*7 AI-powered insights provide tailored feedback, helping users refine their habits—and ultimately, enhance their lives. Main Sections Mindful Metrics is designed as a comprehensive habit tracker that offers: 1️⃣ Habit Creation & Management: Users can create new habits by entering details such as: Habit/Action Estimated Time Needed (in minutes) Tags (to categorize habits by areas of life) Priority (low/medium/high) Status (defaulted to Pending; toggled to Completed when done) For high and medium priority habits, customizable reminders (defaulting to 30 minutes before midnight) ensure a friendly nudge when needed. 2️⃣ Habit Grid: A dynamic grid displays all habits with clear tagging (using hardcoded colors for clarity), status indicators, and a streak counter that tracks the number of days a habit is completed within a 30-day period. Users can edit or delete habits—with deletion safeguarded by a confirmation modal. 3️⃣ Streak Charts: Users can filter their habit data by weekly or monthly views. An interactive bar chart visualizes the number of days each habit was completed, offering clear insights into consistency and progress. 4️⃣ Habits Distribution: A pie chart categorizes habits into seven crucial life areas—physical fitness, healthy lifestyle, self care, gratitude, career advancement, upskilling, and mental health— providing a snapshot of where users are most active and where additional focus may be needed. 5️⃣ Today's Progress: Another pie chart displays the ratio of completed versus incomplete habits(tasks) for the day, with interactive tooltips that detail which habits fall into each category upon hovering. Additional Features 1️⃣ AI-Powered Feedback: Leveraging the GROQ AI API, the feedback section analyzes users’ habits and their associated tags to deliver personalized observations, suggestions, and benefits. This smart feedback helps users see how their daily actions contribute to broader life improvements. 2️⃣ Dark/Light Mode Toggle: A toggle in the header allows users to switch seamlessly between dark and light themes, ensuring an optimal viewing experience in any environment. 3️⃣ Responsive Navigation: A navigation section built using KendoReact Layout components and react-responsive sits below the header, enabling smooth transitions between different sections of the website. 4️⃣ Custom Styling: Custom CSS integrated from the Progress ThemeBuilder Material theme ensures a polished, professional appearance across all components. Demo Want to see it in action?

Mar 24, 2025 - 08:03

✨ Mindful Metrics: Unleashing Habit Mastery with KendoReact Magic

This is a submission for the KendoReact Free Components Challenge.

What I Built

Mindful Metrics is a habit tracker built with KendoReact Free Components that empowers users to cultivate better habits, monitor daily progress, and receive personalized, AI-driven feedback. It features intuitive habit creation forms, dynamic grids for efficient habits management, and interactive charts that reveal habit consistency and focus distribution. 24*7 AI-powered insights provide tailored feedback, helping users refine their habits—and ultimately, enhance their lives.

Main Sections

Mindful Metrics is designed as a comprehensive habit tracker that offers:

1️⃣ Habit Creation & Management:

Users can create new habits by entering details such as:

Habit/Action
Estimated Time Needed (in minutes)
Tags (to categorize habits by areas of life)
Priority (low/medium/high)
Status (defaulted to Pending; toggled to Completed when done)

For high and medium priority habits, customizable reminders (defaulting to 30 minutes before midnight) ensure a friendly nudge when needed.

2️⃣ Habit Grid:

A dynamic grid displays all habits with clear tagging (using hardcoded colors for clarity), status indicators, and a streak counter that tracks the number of days a habit is completed within a 30-day period. Users can edit or delete habits—with deletion safeguarded by a confirmation modal.

3️⃣ Streak Charts:

Users can filter their habit data by weekly or monthly views. An interactive bar chart visualizes the number of days each habit was completed, offering clear insights into consistency and progress.

4️⃣ Habits Distribution:

A pie chart categorizes habits into seven crucial life areas—physical fitness, healthy lifestyle, self care, gratitude, career advancement, upskilling, and mental health— providing a snapshot of where users are most active and where additional focus may be needed.

5️⃣ Today's Progress:

Another pie chart displays the ratio of completed versus incomplete habits(tasks) for the day, with interactive tooltips that detail which habits fall into each category upon hovering.

Additional Features

1️⃣ AI-Powered Feedback:

Leveraging the GROQ AI API, the feedback section analyzes users’ habits and their associated tags to deliver personalized observations, suggestions, and benefits. This smart feedback helps users see how their daily actions contribute to broader life improvements.

2️⃣ Dark/Light Mode Toggle:

A toggle in the header allows users to switch seamlessly between dark and light themes, ensuring an optimal viewing experience in any environment.

3️⃣ Responsive Navigation:

A navigation section built using KendoReact Layout components and react-responsive sits below the header, enabling smooth transitions between different sections of the website.

4️⃣ Custom Styling:

Custom CSS integrated from the Progress ThemeBuilder Material theme ensures a polished, professional appearance across all components.

Demo

Want to see it in action?