Now hose 3 words don't generally go together, but trust me its not just clickbait (well just a little).
I had an epiphany recently, and I want to take you on that journey.
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.
I sat down with her for a couple of minutes to discuss what she wanted.
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
And thought about a little gamification, adding in badges for milestones.
This was my initial prompt:
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/List_of_Fairies https://en.wikipedia.org/wiki/List_of_books_written_by_Daisy_Meadows https://rainbowmagic.fandom.com/wiki/Princess_Fairies 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/Daisy_Meadows
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.
A quick update and now the favourites could be ordered.
Next she spotted that she wanted the read books in order she read them.
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.
It is so much easier for a end user to tell you "What they don't like" rather then "What they do like", because 9 times out of 10 they simply don't know.
So I'm now thinking that my process should be:
- Get the Simple Design Goal, i.e. what problem are they trying to solve and why.
- Get the first description of what they expect, for a change the vaguer the better
- Design NFR's
- Build
- Put it in the users hands and get feedback
- Build, feedback, Loop until complete
If there is a complex backend, mock this up so that the user can use it to give feedback, once happy then do everything off client.
If possible you want the developer with the user when they are testing, you can even do hot updates with them in one session.
I know this goes against Agile, but the simple truth is Agile was built for a world where development was expensive and a bottle neck. With AI that's not the case, code is cheap and quick. Add in technology moves so much quicker, for example planning more then 3 months in advanced to create a PI on the Power Platform is impossible, new features hit with zero warning. 2 week sprints can feel like a long time when you can build in hours instead of days. Processes need to adapt to the pace of AI development, and if you still:
- Cant do that as wasn't in PI planning
- Need to get that approved by everyone before you can start
- Have Enabler SLA's that run in the days not hours
you wont be able to benefit from the AI fully. Think about it, how can it be right to:
- wait weeks for requirements
- wait weeks for security & arch reviews
- wait days for UAT sign off
- wait days for change requests and go live approvals
when the actual building of the solution takes hours.
If you have children who love Rainbow Fairy Books check out https://wyattdave.github.io/Lottie-the-Fairy/, and if they don't like them what do they like, what could you cool thing could you make just for them.
As always the code is open source and can be found on GitHub
