DEV Community

Cover image for Tend (and about Vibe Coding)
Daniel Schulz
Daniel Schulz

Posted on • Originally published at iamschulz.com

Tend (and about Vibe Coding)

#frontend #vue #docker #vibecoding

It’s been a while since I’ve coded for myself. I did push an update on Ssstyles and JSSynth every now and then, but I haven’t done something new.

Why?

I needed a habit tracker to get on top of my health again. It needed to be easy to use and sync across devices without selling my data to ad companies, which means selfhosting. The awesome selfhosted list has a few projects, but…

I also wanted to brush off my Vue skills. Time to do it myself, then!

Building it

I started with a very minimalistic approach: HTML, CSS and Typescript with Petite Vue on top for reactive components. Not only did things go out of hand quickly, with the entire content of the app being driven by user-defined input, but Petite Vue itself hasn’t been maintained in years (which is a shame - i really liked the project).

So I went to the other extreme and set up Nuxt. If all the content was dynamic anyway, why not go all the way. I know that Nuxt has some performance and accessibility problems, but my performance target is a bit lower when building an “app-like” project, as opposed to a traditionally content driven one. It turned out I could still reach good performance metrics, thanks to caching user content to an IndexedDB and SSR’ing the app skeleton. Wrangling Hydration issues was an ongoing problem, though.

I figured I could mitigate accessibility problems as best as I can with enough testing. Marcus’ book Accessible Vue was a great help, too.

I used my own CSS framework Ssstyles as the foundation and I really love having a functioning system. I did find some caveats that I fixed during the development process, but most of the base styles and components worked out of the box and were a breeze to use.

Deploying

I tried something new here. Tend deploys directly to Netlify, where it’s usable as a PWA. There are no accounts or tracking and everything stays on your device. That also means there’s no sync across devices. That’s why every new release also creates a new docker container with a database and a simple single-account-login. It doesn’t deploy anywhere, but it’s self-hostable.

I did read a lot about backend security and learned one or two things about attack vectors. I hope it holds up!

So if you have a home server, you can use the docker setup, or else install the PWA.

A screenshot of Tend. Its the daily overview of Wednessday, December 3. It shows a list of tracked events, such as “Excercise” at 19:47, going for 57 minutes, “Commute” at 19:09, going for 39 minutes, “Work” ar 14:00 and 9:24, “Commute” again at 8:09 an and “Sleep” at 0:05, going for 7 hours and 30 minutes. The bottom shows a list of buttons belonging to the events.

A Screenshot of Tend. It shows the monthly overview for December 2025. It’s a grid-like calendar view with each day showing colorful dots that indicate tracked events. The bottom shows a list of buttons belonging to the events.

A screenshot of Tend. A category page for the “Sleep” category. It shows options to chnge the color, name and emoji belonging to the category, as well as add notes. It lists the total time tracked on sleep overall, this month and this year. There is also an option to add a personal goal by setting an amount of events per week. The configured goal is 7 hours per day. The bottom shows a list of buttons belonging to the events.

On Vibe Coding

At some point midway through, my employer gave me access to Claude Code. I tried it here and I have some thoughts.

I think, Claude can be a welcome help to unwelcome tasks. Figuring out what the unwelcome tasks are is the harder part. If you use it to write a some syntax you rarely use - fine (though you can just use MDN for that as well). But using it to write your entire app? That’s for people who don’t like coding. In that case: please don’t. You’ll ship code that you don’t understand, full of bugs, problems and security risks.

I used Claude to write JSDocs and Tests. Those are unwelcome tasks to me and the LLM is fairly competent at documenting. Tests needed some more guidance. I found that Context Rot was a major problem. If the list of things that it needs to keep in mind gets too large, it becomes forgetful. I mean, so do I, but the things I forget are “updating the version number” or “writing a JSDoc”, not “how does the app work” and - more importantly even “what did I already try”. Claude went in circles multiple times when the context was approaching its limit, proposing fixes, testing and reverting them, when the correct solution was a simple missing import.

Struggles continued with anything regarding accessibility. The amount of misinformation it gave me and the faulty code it wanted to write is baffling. Claude seems to love aria. Whenever I described a problem (e.g. “label xy is ignored by VoiceOver on MacOS”), it completely ignored the underlying issue and slapped some aria on top of it. At this point I can only discourage from trusting AI tools when coding barrier-free content.

Would I use Claude again? For my job, yes. For private projects - maybe not. I did find it helpful for testing and documenting, but the price (both monetary and in resources) is still very steep with no signs of coming down.

Top comments (0)