Now hose 3 words don't generally go together, but trust me its not just clickbait (well just a little).
Vibe coding has become a key part of nearly all my workflows for a while now, and most of the time its not to create an end product, but to enable me to do something else. Converting SharePoint pages to markdown, create an app to do that Transforming data, chuck it into GitHub Copilot and ask it to create an interactive HTML file with the data
But now its even starting to part of my personal life (not like that 😉), and that's why I'm writing this blog.
One Sunday morning my 6 year daughter was showing me the Rainbow Magic Fairy Books she had read. She was super proud of the books she had read and also took great pleasure in telling me her favourite and the ones she wanted to read next. As there are over 300 books to read she was asking me to search for them so she could write a list, and that's when I thought how cool it would be if she could have an app to do it.
A great place to start when vibe coding is Chrome Extensions or Progressive Web Apps. They have some key benefits: Chrome Ext can be shared as zip files or published for free in Edge store (and a small one off fee in Chrome Store), PWA's can be hosted for free in GitHub and other hosting sites Both can get away without a server/backend Chrome Ext can get around cors for external api' Both can be tested easily locally (no build steps) Both use standard web tech so LLM's are very good with them PWA can also be installed, so they can act just like a full application on a laptop, Android and IOS (with no need to deal with different versions and the painful App/Play stores).
So the idea was to create her a PWA with all of the books that she could review and track. I could then install it on her tablet for her to use.
She wanted to be able to see all the books, track the ones she had read, and have her favourite list.
I also thought of a couple of NFR's: A way to export/import saved data, so she can move between devices, and avoid complexity of a backend and api To fully work offline, including all book covers etc
i want to create a mobile/tablet app to track my daughters reading. I want to use a progressive web abb (simple html/css/js) that saves locally what she has read, but that data can be exported/imported between devices. the web app should be themed like the rainbow princess books. it should have every book (ideally every book cover) and if possible grab a small bio on each book. my daughter should be able to search for books, add to favourites and mark as read. When she reads certain mile stones she would get a badge/fairy achievement. these achievements should be shown in a screen/section. the books can be stored local or grabbed from api. some references are: https://rainbowmagic.fandom.com/wiki/ListofFairies https://en.wikipedia.org/wiki/ListofbookswrittenbyDaisyMeadows https://rainbowmagic.fandom.com/wiki/PrincessFairies though you may need more data
The prompt took a few mins to run and it crashed and burned with the book covers, all of theme were just emoji's, so I did a bit of research and found an api with all of the bio's and covers.
i need all of the book covers for this web app (the generated ones are not very good). i found this site with them https://openlibrary.org/authors/OL1452170A/DaisyMeadows
After that it was pretty much perfect. I sat down with my daughter and she had a quick go on it, she quickly told me she wanted to order the favourites, and wanted a way to track what she owned.
After that she realised that scrolling down 300 books could take a long time to scroll back up. So a scroll to top was added.
Finally she spotted that some of the book covers were missing, so I prompted to load in chunks, with the first 20 on load, and then each next block of 20 until all cached locally. This stopped the images from only loading when scrolled to and api throttling when she swiped like crazy down to book 300!
Chuck in some small updates around misaligned elements and poor UX (the close popup icon would scroll out off screen when reading bio) that I added and it was done.
So what was my epiphany, was in under and hour I had managed to create exactly what a very picky 6 year old wanted: It had feature creep Poor testing Changing requirements Tight high pressure delivery time (she gets angry 😉)
Sound familiar, sound like every software delivery you had done. And this was easy, and the simple reason is I didn't follow agile: No detailed requirements No product demos
With AI we now are able to pivot so quickly, that the effort that use to go into making sure we get it right first time isn't necessary. We can just do it again. We simply get in a feedback loop, of build, test, build, test.