I made an application in 4 hours, and, yes, I used AI technology to assist me. But it is not what the reader probably thinks, because I don’t believe this was entirely vibe-coded. If it was, I probably would have taken less than 4 hours to build this application, but then the software quality would be less. Let me tell the story.
A client requires that I show the hours and details worked on a project. My original timesheet system was to manually enter the hours into notes. When I needed to send an invoice, I would transfer the notes into a Stripe invoice and Stripe would email the client the invoice. This process was inefficient and tedious; I’ve sent several invoices and they all took a handful of minutes of copying and pasting. Being a software engineer, and I had to make this better for me. I didn’t want to have a manual system for too long, because I knew that Stripe had a good API system that I could integrate with.
And so this week I looked to see if I could find a timesheet application that integrated with Stripe. I did find a couple applications, but everyone had a requirement to integrate with Zapier. In addition, each application had a bunch of features that I didn’t want. I didn’t really want to spend time learning a timesheet system in a new application with a bunch of other features, and I didn’t want to integrate with Zapier in order to connect Stripe to a timesheet application. Doing so seemed like an overengineered solution for a simple timesheet to invoice system. I had to make something simple myself.
Quick! I need this application to make my life easier!
I first went to Vercel’s v0 to generate a barebones timesheet application. I’ll admit, my first intention was to have v0 generate the whole thing, because I wanted to spend more time on freelance projects and I wanted to tackle those problems myself. Vercel’s v0 first output was just one page and it looked nice, so I took that code and started to iterate on it.
Vercel’s v0 didn’t have things fully built out; for example it included a whole system of UI components that wasn’t included in the initial prototype. There was probably something I missed. So I used Github Copilot agent mode to further iterate on what v0 build in VSCode. Gradually, the more Github Copilot iterated I realized that it was going in a direction that wasn’t useful for the application nor the framework I was using. This was when I took control from the AI iterations.
I smoothed out the initial timesheet page with my own UI components, and it worked great. Once that timesheet page was finished, I realized that one timesheet would equal one invoice, and one freelance project would have multiple timesheets. I needed to build in a simple project management system. So, I made a project page to handle multiple timesheets, and I built a new timesheet page with the content from the initial page. The initial page converted into a home page where the 5 most recent timesheets would appear along with the projects. The initial page even has a form to create a new project.
My first attempt at adding new pages involved using client specific React functions. I wanted to challenge myself and use server side rendered stuff as much as possible, and yes that meant using server actions. I got to see what all the fuss was about, and I don’t see what the fuss was much, to be honest. It’s nifty, and another cool tool in the JS toolshed (which is the size of a mansion at this point).
When I finished the minimum viable product of this timesheet application, I realized it took me about 4 hours across 2 days. Wow that was quick. I guessed it probably would have taken me 6-7 hours if I didn’t initially start out with AI to iterate the boilerplate. I do feel a personal reward for not letting AI do the whole job and reviewing and modifying AI’s code for creativity. There is my own work in this project, so that I can feel ownership over this application. I’m glad that with this experience, because I learned that AI is very good at boilerplating, but it still isn’t good at completing a cohesive product because I think a cohesive product would still require creativity on the software engineer’s part.
Here is a link to the finished Simple Timesheet application that integrates with Stripe invoicing.