AI doesn’t always help you save time
Ever since I learned how to vibe code, I’ve been obsessed with making micro apps/automations to assist with whatever I was doing at the time. Here’s an example: my current workplace uses a very primitive work timesheet logging system (hint: it’s a spreadsheet). They tried to ‘simplify’ it by making a small utility app that resides on the team’s Slack channel. It’s basically a small form that let you input stuffs like Dates, Time Logged, Today’s Plan, Today’s Actually Work, Tomorrow’s Plan, Issues…yadda yadda…Basically it’s a daily meeting in the form of a well, form. It is debatable if this implementation is better than filling out the spreadsheet manually, but there’s some obvious user pain point with this approach:
- It is very tedious when user have to update multiple dates at once, which is often the case since most people tend to leave the timesheet duty toward the end of the month. Users have to completely the form one by one, once for each working day.
- Sometimes when you’re trying to update multiple days at once, you sort of forget which date you are getting to, or if you missed any of the previous work days. Basically you need a calendar view.
- Nobody likes making up content for Today’s Plan, Today’s Actually Work, Tomorrow’s Plan. Most people just want a single field for inputing that single task that they did that day (you know that’s true)
So when my PM reminds me that I have 3 hours left to fill out my missing 20 days of work time, I naturally decided the best course of action is to spend the next 4 hours vibecoding a tool that could potentially achieve the same thing as the Slack tool but slightly different. I know, I’m good at time optimization and decision making.
Features:
- Light/Dark mode support (this is a must for all my apps), although the color scheme for this one is not yet optimized for usability.
- AI-assisted content suggestion for filling out the boring stuffs (you only need to enter what you did for today, the Actual Work fields will mirror that automatically, and the Tomorrow’s Plan can be generated with a click)
- Visual view of the current work month with how many work days have been logged and how many still need logging
- Export to CSV with the filename being current date & time. So you can use it to populate the Google Sheet if needed.
What I learned while making this project:
- Firebase Studio is not as useless as I initially thought. I actually started this project with v0, Lovable, bolt like usual but ended up using FS at the end. It didn’t create the best looking initial design but what it did different is auto Genkit integration, which powered the Gemini auto suggestion. In fact my experience with Firebase actually shows it being a little overzealous in inserting Genkit integration into everything, even on apps that required absolutely zero AI.
It does work with this particular app though, so there’s that - How to have persistent data across different browser sessions. Traditionally most of my vibecoded app just relies on localStorage for storing data so everything just works only within the confine of that browser session. This is good for privacy but not very good for usability. Since I often use Cloudflare Pages to host my vibecoded slops, this time I learned how to leverage one of their free Page Functions to hold my data for me. This one holds pretty simple data so KV is a great choice.
You can check it out in all its glory here (there’s no auth at the moment but I will find a way to integrate it soon)
Recent Comment