DEV Community

Cover image for Getting on to the vibe coding train...in a hackathon
oagutu
oagutu Subscriber

Posted on

Getting on to the vibe coding train...in a hackathon

The Idea

It all started with a Hackathon. A no-code Hackathon with a no-code builder I had never heard of, MeDo. Oh, well I'd been looking for a nice excuse to properly try out this version of vibe coding, so I was in. Although, the prize money also played a role...a small role.

So the next question was, what to build? I went into my notes app and found the page on ideas. I like to jot down ideas, many silly, some good, and a few great. My only criteria for selecting an idea were: it had to be different/novel and involve AI(we all chase trends after all)

Armed with these constraints I went through my ideas and landed on 2, an ad network for digital communities eg. Discord or WhatsApp, and AI native checklists. I threw both of them into ChatGPT and it gave its totally unbiased opinion. AI native checklists it was!

The What

I built Checkyard, a way to standardise and operationalise recurring business workflows via executable, AI-native checklists. It facilitates the execution of playbooks, with the ability for both humans and AI agents to work in concert; offloading repetitive, boring tasks to agents, leaving employees to perform better suited functions.

The Build

I built it using MeDo, which allowed for the translation of natural language into a web app. The build process itself looked something like this:

  • I first wrote down a product brief outlining what I wanted to build, the core action and goals, desired features, a few expected user flows, and possible use cases
  • I used this brief to generate a comprehensive initial prompt using ChatGPT. Notably, I emphasised function over form; with the only design cues being the colour palette to use. I also explicitly excluded the landing page creation.
  • I then fed the ready prompt into MeDo, using it to generate a requirements doc, which I edited to meet my own requirements and views. Once I was satisfied with the requirements doc, I hit generate...and watched the magic.
  • With each output generated, I'd go through each requested feature one by one, noting down into a separate doc, any issues/bugs encountered along with relevant additions, removals, or enhancements.
  • I would then feed the collected issues/bugs back into MeDo for fixes and enhancements.
  • I repeated the above 2 steps until all features worked as expected.
  • Once functionality was satisfactory, I moved on to UI/UX and finally the landing page.

The Challenges

My initial idea was too broad and needed narrowing down of features for an MVP. I therefore wrote out a brief and used Chatgpt to first expound on it and then review the features. Results of which I used to select "V1" features

Working with the MeDo requirements doc editor was a bit buggy, ie. I was unable to make multiple edits before saving, since it kept exiting edit mode before submission

Code editor view is readonly preventing direct, quick changes to the code. Some changes were small and could have been easily done directly in the code editor. Maybe this is available in the paid tier(we can only hope)

The Likes

MeDo does not immediately go into build mode, it first generates an editable requirements.md doc to ensure everything is accurately covered before the actual build begins.

The credit usage) is a bit more predictable with each action requiring a corresponding credits amount, eg. 15 credits /query(actually 30 from experience), 2/app/day to enable backend, 5/plugin use/generation

The Learnings

When making changes, it's best to collect all requests/changes into a single, well-structured prompt to save on credits. Charging is per query not per token count.

How to effectively and efficiently create comprehensive feature and product specs

Some cool CSS "tricks"

The Future

  • Strengthen the AI agent task execution
  • Add a marketplace to allow for users to easily add or share ready made checklist templates
  • UI/UX improvements
  • Have fun with it

BuiltWithMeDo

Top comments (0)