TL;DR

We’re going to build a Pokémon search app. But we’re not going to write even one line of code.

🤨

I know, coming from a developer (who used to take pride in what he wrote by his bare hands), it sounds blasphemous, but stay with me here and see how far these kind of tools have come in only the last year.

We’ll be building the app by so-called vibe coding. Basically, you describe what you want using plain English, and the AI tool does the heavy lifting. You steer it by reviewing, re-prompting, and guiding to the final product (that you’ll be happy with 🤞).

The Tools

In this post, we’ll be using *Replit, and in the future ones we’ll tackle a few others like Cursor and Claude Code.

For bonus points, we won’t even type anything. Instead, we’ll use a tool like *WhisprFlow, or some similar ones like SuperWhisper, VoiceTypr (I know, what’s up with naming products by dropping wowels 🤷‍♂️).

The Old Ways™

Previously, I wrote the "classic" (may I say, "old" at this point?) tutorials building the same app with two different tech stacks:

• Getting started with Vue.js 3 by building a Pokemon search application
• Getting started with React by building a Pokemon search application

This one is different. Same Pokémon search app. Less typing. More vibes (😂 I know, my puns are terrible).

Let’s Start Prompting

If you want to follow along, create an account over at *Replit.

Pro tip: copy/paste these and adapt in case you’re feeling adventurous.

Prompt 1: Spec first, code later

First of all, always start with a plan before writing any code. This was TheWayToDoIt™ back in ‘normal’ development, and it’s no different in vibe coding either. Make sure to select the Plan mode in Replit as shown below:

and add the following prompt:

"Our task is to build a Pokémon search web app. Before writing any code, produce a detailed PRD (product requirement document) (pages, components, state, API calls, error states, loading states, accessibility, folder structure, and a deployment plan for GitHub Pages).
After the PRD, list a numbered implementation checklist.
Do NOT write code yet."

If you want, you can click the improve prompt button (I did) and you’ll get your prompt improved to something like:

A comprehensive web-based Pokémon search application that allows users to search and view detailed information about Pokémon using the PokéAPI.

Core Features:

• Search Pokémon by name or ID with autocomplete suggestions
• Display detailed Pokémon information (stats, types, abilities, sprites)
• Browse and filter Pokémon list with pagination
• Responsive design that works on mobile and desktop devices

Visual References:
Inspired by the official Pokémon website and Pokédex interfaces, known for their vibrant, game-accurate designs and intuitive card-based layouts.

Style Guide:

• Colors: Primary #FFCB05 (Pokémon yellow), Secondary #3D7DCA (Pokémon blue), Accent #FF0000 (Pokéball red), Background #F8F8F8 (light grey), Text #2A2A2A (dark grey), Card Background #FFFFFF (white)
• Design: Flexo/Poppins/Roboto fonts, card-based grid layout, rounded corners (12px radius), smooth transitions, responsive design with mobile-first approach, clean search interface with prominent search bar

Special Requirements:

• Must include a detailed PRD (Product Requirement Document) covering: pages, components, state management, API calls, error states, loading states, accessibility considerations, folder structure, and deployment plan for GitHub Pages
• Provide a numbered implementation checklist after the PRD
• DO NOT include actual code implementation – documentation and planning only

That’s a much better prompt than what I came up with 😬, so let’s use that. At this point you can tweak the plan if you want.

A few options

You can select how ‘autonomous’ you want the agent to act (High is fine in this case), and you can choose to select App testing as that will make sure that it resolves any obvious bugs that may pop up.

After you’re happy with the selection, click the Start building button.

Now we wait… ⏳

In my case, it took Replit 21 minutes to finish everything (IMO, takes longer when you select the App testing), and it spent $7.27. Let’s see what we got for that Frapuchino priced Starbucks cofee…

Preview

A cool thing I like about Replit is that they have everything integrated in their web interface (they have a mobile app, but we won’t dig into that now). And by everything, I mean everything: database, auth, secrets, domain purchasing, wiring up with Stripe, you name it.

Of all these cool things, they also have the Preview pane, where you can, well, preview your app as it’s being built.

This is what it came up with for me:

Publish and share

To publish your work ‘online’ so that you can share it with others you need to:

• choose the (sub)domain: _I went with pokedex-nikolabreznjak.replit
• click on the Publish now button

And, there you go, app will be accessible via (in my case): https://pokedex-nikolabreznjak.replit.app/.

Conclusion: the future is now!?

Here’s the uncomfortable truth: those who still treat AI coding tools as "cheating" or "not there yet" are losing out. If not on shipping MVPs faster, then on getting up to speed on unfamiliar codebases, and learning faster in general.

⚠️ And this last part is something I want to emphasise: if you "just" vibe code and have absolutelly no idea how the thing YOU built works (and have no desire to learn), then you’re missing the point.

Instead, you’ve got an amazing oportunity that the devs in the past didn’t have: you can ask the tool to tell you "how does this code work". And, you can ask all the questions without the fear of showing your lack of knowledge.

And, if you’re worried about quality (valid!), you don’t have to YOLO it. Do this instead:

1. Tell the model: Explain what you intend to do without writing any code
2. Make it produce a long spec document (architecture, edge cases, test plan).
3. Iterate on that doc until it’s legit
4. Then say something along the lines of: Now, iplement this spec perfectly

I would have never dreamed that the hottest new programming language will be [insertLanguageHere]. I say it like that because, technically, you could write in your language and some (most?) of the tools would understand you. If not, you can throw it in a ChatGPT (or any similar tool) for translation and then feed it translated into the AI tool.

No, the world won’t make the devs extinct, but it surely will enable a lot of non-devs to create things that make actual money. It’s your choice if you want to watch from the sidelines or get in on the action and see how it can help you – maybe now’s the time to do that project you ‘never had the time for’.

I’m cheering for you, good luck!

Disclaimer

Links prepended with a * are referral links.

If you enjoy the content and decide to sign up through those links, you’ll be helping me feed my caffeine addiction ☕️

Thanks a bunch, you glorious human! 🙌

New achievement

You made it to the end, here’s a 🎖️

P.S. In case you were wondering, the style has been recently influenced by the amazingly refreshing litRPG book series called *Dungeon Crawler Carl.

Enjoy! 👋