DEV Community

Cover image for I vibe-coded my first app ever — a daily drawing-prompt spinner (Beginner + Advanced modes, sound, the works)
Andy Schelb
Andy Schelb

Posted on AI-assisted

I vibe-coded my first app ever — a daily drawing-prompt spinner (Beginner + Advanced modes, sound, the works)

I was at dinner and my friend asked me if I'd ever vibe coded. He was like you really should try it. It's incredible what you can do. I took web design in high school, but in the year 2000 it was all about learning HTML tags. That was the most coding I've ever done.

So I built Daily Doodle — a drawing-prompt spinner. Pick which categories
you want in play, hit spin, and it mashes them together into something like
"a Pencil Anime-style drawing of a Detective Octopus wearing a Hoodie, with a
Boombox, riding a Scooter, looking Happy, in the Woods." No two spins land
the same, and it's built to actually get used, not just looked at once.

🔗 Try it: https://theplaidscientist.github.io/dailydoodle/
💻 Code: https://github.com/theplaidscientist/dailydoodle

What it does

Nine categories, all toggleable: Animal, Occupation, Prop, Vehicle, Style,
Medium, Outfit, Mood, Setting. Each one is fully editable — add your own
items, clear a category out completely, or restore the original starter
list if you mess with it too much.

Two modes so it doesn't overwhelm anyone on first visit:

  • Beginner — just the original three (Animal, Occupation, Prop), no toggles, nothing to configure. Load it and spin.
  • Advanced — all nine categories, each with its own on/off switch, so you build exactly the level of chaos you want.

A few other things that ended up in there:

  • A live counter (backed by Firebase) tracking total spins across everyone who's used it, styled to match the rest of the app instead of looking like a bolted-on stat
  • Retro synthesized sound effects — a boop-boop-boop while it spins, a tada when it lands — built entirely with the Web Audio API, so there's no audio file to load and nothing to license
  • An "avoid repeats until all shown" option, so a category won't repeat an item until everything in it has come up once
  • A copy button that grabs the result as shareable text, plus a collapsed "recent doodles" list holding your last 3 spins

When my oldest was little. They'd always ask me for ideas of things to draw. I'm a massive Walt Disney World fan and I've read almost anything I can on the subject of the creation and maintenance of the most magical place on earth.

I remember reading this quote from the head of Disney Imagineering:

“There are two ways to look at a blank sheet of paper. It can be the most frightening thing in the world, because you have to make the first mark on it. Or it can be the greatest opportunity in the world, because you get to make the first mark—you can let your imagination fly in any direction, and create whole new worlds!”

Marty Sklar, Creative Leader of Walt Disney Imagineering, from his memoir Dream It! Do It!: My Half-Century Creating Disney's Magic Kingdoms

This was his go to when in 1974 when taking over Walt Disney Imagineering to help the team overcome paralysis and self-doubt.

Github, Pull, Push, and endless screenshots asking, Am I doing this right?

I'd not coded before. I pulled some software for my 3d printers from github years and years ago, so it existed and what it was vaguely for, but I didn't have any idea how to use it.

I was super nervous that my human touch would be the part where the ideas would break.

The stack is about as simple as it gets: one index.html file, vanilla
JavaScript, no framework, no build step, no local dev environment — I edit
it directly in the GitHub web UI. In the beginning I was copy and pasting full html files to edit the site because I wasn't sure how to use github desktop.

It's hosted completely free on GitHub Pages, and the whole thing — including
the live counter — costs nothing to run.

What's next

This is the second entry in Plaid Labs, a little hub of web experiments
I keep building and then figuring other people might want too. First one was
Droid Tycoon Fusion Cookbook,
a fan checklist for tracking fusion recipes — more on the way.

Are you also new to coding/app creation? Put your newbie experience posts below in the comments and I'll read them and comment back!

Top comments (0)