Fun, Vibe-Coded Apps

Vibe-coding means using AI to write computer programs. The promise is that anyone can be an app developer. It's a little bit harder than that.

Cartoon: A robot creating something

My first big obstacle was the tech stack—how best to set myself up to code an app? And at the end, how should I deploy the app? I decided to choose tools I already use.

Don’t try to learn too many things at once

For me, this meant coming up with a web-based app using JavaScript (because I already have a website, know how to host things on it, and I can already write a little bit of JavaScript.)

Also, programmers recommend tools like Cursor, which is an AI-powered IDE*. or Claude Code, which (I think) asks you to connect it with GitHub. Most real computer programmers wouldn’t find this daunting, but I did. So instead, I just asked Claude in a regular chat to write the code for me, and I copy-pasted the code into Visual Studio Code, which I use for my regular web development work.

Have some fun and share your experiments

Ray Villalobos is a prolific web developer and content creator whose LinkedIn courses are among the best online courses I’ve ever taken. He has created a website where you can share your vibe-coding experiments and also browse work other people have created.

As of this writing, Friday Goody Bag has two apps on the Vibeit.work leaderboard, but I expect this to change very quickly.

For ordinary mortals Even if you don’t want to do app development yourself, the Vibeit.work site is an awesome place to discover fun apps. Ray wrote one called Screenshotter which lets you create high-quality screenshots from web pages. Although there are other apps that you can use to do this, Screenshotter has some nice features and a pleasing user interface that makes it delightful and easy to use.

Learn more about vibe coding

Follow Ray Villalobos on LinkedIn or (dive right into his vibe coding courses and newsletter)[https://www.linkedin.com/pulse/vibe-code-ray-villalobos-4avae/].

*IDE stands for ‘integrated development environment. Also, when you see a dotted line under a word in a web page, it means you can hover over it to get a tooltip. This handy HTML code is <abbr>—it’s been around forever but I just learned about it.