Developing Tend: A Personal Habit Tracker and Coding Journey

In a bid to regain control over personal health, the development of a self-hosted habit tracker named Tend began. This tool was designed to seamlessly synchronize across devices without compromising user data privacy. While there are several existing solutions like Habitica, Beaver Habits, and OpenHabitTracker, they each had limitations that did not fit the envisioned goals.

Motivation for a New Tracker

The primary need was an uncomplicated, privacy-focused tracker that could operate across multiple devices. Existing options either gamified the process too much or lacked support for personalized goals. Additionally, this project offered an opportunity to refresh Vue skills.

Building Tend

The initial approach involved using HTML, CSS, and Typescript with Petite Vue for reactive components. However, the need for dynamic content led to exploring Nuxt, despite its performance and accessibility challenges. The solution involved caching user content in IndexedDB and using server-side rendering (SSR) to maintain performance. Accessibility concerns were addressed through extensive testing, aided by "Accessible Vue."

Utilizing a custom CSS framework, Ssstyles, provided a solid foundation, though some adjustments were necessary during development. The framework's base styles and components largely facilitated smooth progress.

Deployment Strategy

Tend is deployed as a Progressive Web App (PWA) on Netlify, ensuring user data remains device-local without account or tracking requirements. To address synchronization limitations, a Docker container setup was created for self-hosting, including a database and a straightforward single-account login.

Security was a significant focus, leading to extensive research on backend vulnerabilities to ensure robust protection.

Reflections on Vibe Coding

Midway through the project, access to Claude Code, an AI tool, was granted, providing assistance in documenting and testing. While helpful for unwelcome tasks like writing JSDocs, challenges arose with maintaining context and addressing accessibility issues. The tool often recommended incorrect solutions, particularly regarding accessibility, highlighting the need for caution when using AI for such tasks.

Ultimately, while AI tools can be beneficial for specific functions, reliance on them for comprehensive coding solutions is discouraged due to potential misunderstandings and security risks.

Conclusion

The creation of Tend not only resulted in a functional habit tracker but also provided valuable insights into coding practices, the use of AI tools, and the importance of maintaining user privacy. Whether deploying as a PWA or self-hosting, Tend offers a versatile solution for personal habit tracking, emphasizing user control and data protection.