{"id":4780,"date":"2026-01-20T17:48:12","date_gmt":"2026-01-20T17:48:12","guid":{"rendered":"https:\/\/nikola-breznjak.com\/blog\/?p=4780"},"modified":"2026-01-31T15:11:15","modified_gmt":"2026-01-31T15:11:15","slug":"vibe-coding-a-pokemon-search-app-with-replit","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/vibecoding\/vibe-coding-a-pokemon-search-app-with-replit\/","title":{"rendered":"Vibe Coding a Pok\u00e9mon Search App with Replit"},"content":{"rendered":"<h2>TL;DR<\/h2>\n<p>We&#8217;re going to build a <strong>Pok\u00e9mon search app<\/strong>. But we&#8217;re not going to write even one line of code.<\/p>\n<p>\ud83e\udd28<\/p>\n<p>I know, coming from a developer (<em>who used to take pride in what he wrote by his bare hands<\/em>), it sounds blasphemous, but stay with me here and see how far these kind of tools have come in only the last year.<\/p>\n<p>We&#8217;ll be building the app by so-called <strong>vibe coding<\/strong>. Basically, you <em>describe<\/em> 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&#8217;ll be happy with \ud83e\udd1e).<\/p>\n<h2>The Tools<\/h2>\n<p>In this post, we&#8217;ll be using *<a href=\"https:\/\/replit.com\/refer\/nikolabreznjak\"><strong>Replit<\/strong><\/a>, and in the future ones we&#8217;ll tackle a few others like <strong>Cursor<\/strong> (<a href=\"https:\/\/nikola-breznjak.com\/blog\/vibecoding\/vibe-coding-a-pokemon-search-app-with-cursor\/\">post here<\/a>) and <strong>Claude Code<\/strong>.<\/p>\n<p>For bonus points, we won&#8217;t even type anything. Instead, we&#8217;ll use a tool like *<a href=\"https:\/\/wisprflow.ai\/r?NIKOLA1\">WhisprFlow<\/a>, or some similar ones like <a href=\"https:\/\/speechify.com\/blog\/alternatives-to-wispr-flow\/\">SuperWhisper, VoiceTypr<\/a> (<em>I know, what&#8217;s up with naming products by dropping wowels<\/em> \ud83e\udd37\u200d\u2642\ufe0f).<\/p>\n<h2>The Old Ways\u2122<\/h2>\n<p>Previously, I wrote the &quot;classic&quot; (<em>may I say, &quot;old&quot; at this point?<\/em>) tutorials building the same app with two different tech stacks:<\/p>\n<ul>\n<li><a href=\"https:\/\/nikola-breznjak.com\/blog\/javascript\/getting-started-with-vue-js-3-by-building-a-pokemon-search-application\/\">Getting started with Vue.js 3 by building a Pokemon search application<\/a><\/li>\n<li><a href=\"https:\/\/nikola-breznjak.com\/blog\/javascript\/react\/getting-started-with-react-by-building-a-pokemon-search-application\/\">Getting started with React by building a Pokemon search application<\/a><\/li>\n<\/ul>\n<p>This one is different. Same Pok\u00e9mon search app. Less typing. More vibes (\ud83d\ude02 <em>I know, my puns are terrible<\/em>).<\/p>\n<h2>Let&#8217;s Start Prompting<\/h2>\n<p>If you want to follow along, create an account over at *<a href=\"https:\/\/replit.com\/refer\/nikolabreznjak\"><strong>Replit<\/strong><\/a>.<\/p>\n<blockquote>\n<p>Pro tip: copy\/paste these and adapt in case you&#8217;re feeling adventurous.<\/p>\n<\/blockquote>\n<h3>Prompt 1: Spec first, code later<\/h3>\n<p>First of all, <strong>always start with a plan<\/strong> before writing any code. This was TheWayToDoIt\u2122 back in &#8216;normal&#8217; development, and it&#8217;s no different in vibe coding either. Make sure to select the <code>Plan<\/code> mode in Replit as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/hOUO6uj.png\" alt=\"\" \/><\/p>\n<p>and add the following prompt:<\/p>\n<blockquote>\n<p>&quot;Our task is to build a Pok\u00e9mon search web app. Before writing any code, produce a <em>detailed PRD (product requirement document)<\/em> (pages, components, state, API calls, error states, loading states, accessibility, folder structure, and a deployment plan for GitHub Pages).<br \/>\nAfter the PRD, list a numbered implementation checklist.<br \/>\nDo NOT write code yet.&quot;<\/p>\n<\/blockquote>\n<p>If you want, you can click the improve prompt button (<em>I did<\/em>) and you&#8217;ll get your prompt improved to something like:<\/p>\n<blockquote>\n<p>A comprehensive web-based Pok\u00e9mon search application that allows users to search and view detailed information about Pok\u00e9mon using the Pok\u00e9API.<\/p>\n<p>Core Features:<\/p>\n<ul>\n<li>Search Pok\u00e9mon by name or ID with autocomplete suggestions<\/li>\n<li>Display detailed Pok\u00e9mon information (stats, types, abilities, sprites)<\/li>\n<li>Browse and filter Pok\u00e9mon list with pagination<\/li>\n<li>Responsive design that works on mobile and desktop devices<\/li>\n<\/ul>\n<p>Visual References:<br \/>\nInspired by the official Pok\u00e9mon website and Pok\u00e9dex interfaces, known for their vibrant, game-accurate designs and intuitive card-based layouts.<\/p>\n<p>Style Guide:<\/p>\n<ul>\n<li>Colors: Primary #FFCB05 (Pok\u00e9mon yellow), Secondary #3D7DCA (Pok\u00e9mon blue), Accent #FF0000 (Pok\u00e9ball red), Background #F8F8F8 (light grey), Text #2A2A2A (dark grey), Card Background #FFFFFF (white)<\/li>\n<li>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<\/li>\n<\/ul>\n<p>Special Requirements:<\/p>\n<ul>\n<li>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<\/li>\n<li>Provide a numbered implementation checklist after the PRD<\/li>\n<li>DO NOT include actual code implementation &#8211; documentation and planning only<\/li>\n<\/ul>\n<\/blockquote>\n<p>That&#8217;s a much better prompt than what I came up with \ud83d\ude2c, so let&#8217;s use that. At this point you can tweak the plan if you want.<\/p>\n<h3>A few options<\/h3>\n<p>You can select how &#8216;autonomous&#8217; you want the agent to act (<code>High<\/code> is fine in this case), and you can choose to select <code>App testing<\/code> as that will make sure that it resolves any obvious bugs that may pop up.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/kwplEPC.png\" alt=\"\" \/><\/p>\n<p>After you&#8217;re happy with the selection, click the <code>Start building<\/code> button.<\/p>\n<h3>Now we wait&#8230; \u23f3<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/UPlh1Y2.png\" alt=\"\" \/><\/p>\n<p>In my case, it took Replit 21 minutes to finish everything (IMO, takes longer when you select the <code>App testing<\/code>), and it spent $7.27. Let&#8217;s see what we got for that Frapuchino priced Starbucks cofee&#8230;<\/p>\n<h3>Preview<\/h3>\n<p>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&#8217;t dig into that now). And by everything, I mean everything: database, auth, secrets, domain purchasing, wiring up with Stripe, you name it.<\/p>\n<p>Of all these cool things, they also have the <code>Preview<\/code> pane, where you can, well, preview your app as it&#8217;s being built.<\/p>\n<p>This is what it came up with for me:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/eFt6uW0.png\" alt=\"\" \/><\/p>\n<h3>Publish and share<\/h3>\n<p>To publish your work &#8216;online&#8217; so that you can share it with others you need to:<\/p>\n<ul>\n<li>choose the (sub)domain: _I went with pokedex-nikolabreznjak.replit<\/li>\n<li>click on the <code>Publish now<\/code> button<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/UPlh1Y2.png\" alt=\"\" \/><\/p>\n<p>And, there you go, app will be accessible via (in my case): <a href=\"https:\/\/pokedex-nikolabreznjak.replit.app\/\">https:\/\/pokedex-nikolabreznjak.replit.app\/<\/a>.<\/p>\n<h2>Conclusion: the future is now!?<\/h2>\n<p>Here&#8217;s the uncomfortable truth: those who still treat AI coding tools as &quot;cheating&quot; or &quot;not there yet&quot; are losing out. If not on shipping MVPs faster, then on <strong>getting up to speed on unfamiliar codebases<\/strong>, and learning faster in general.<\/p>\n<p>\u26a0\ufe0f <strong>And this last part is something I want to emphasise: if you &quot;just&quot; vibe code and have absolutelly no idea how the thing <em>YOU<\/em> built works (and have no desire to learn), then you&#8217;re missing the point<\/strong>.<\/p>\n<p>Instead, you&#8217;ve got an amazing oportunity that the devs in the past didn&#8217;t have: you can ask the tool to tell you &quot;how does this code work&quot;. And, you can ask all the questions without the fear of showing your lack of knowledge.<\/p>\n<p>And, if you&#8217;re worried about quality (valid!), you don&#8217;t have to YOLO it. Do this instead:<\/p>\n<ol>\n<li>Tell the model: <strong>Explain what you intend to do without writing any code<\/strong><\/li>\n<li>Make it produce a <strong>long spec document<\/strong> (architecture, edge cases, test plan).<\/li>\n<li>Iterate on that doc until it&#8217;s legit<\/li>\n<li>Then say something along the lines of: <strong>Now, iplement this spec perfectly<\/strong><\/li>\n<\/ol>\n<p>I would have never dreamed that the hottest new programming language will be <code>[insertLanguageHere]<\/code>. 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.<\/p>\n<p>No, the world won&#8217;t make the devs extinct, but it surely will enable a lot of non-devs to create things that make actual money. It&#8217;s your choice if you want to watch from the sidelines or get in on the action and see how it can help you &#8211; maybe now&#8217;s the time to do that project you &#8216;never had the time for&#8217;.<\/p>\n<p>I&#8217;m cheering for you, good luck!<\/p>\n<h2>Disclaimer<\/h2>\n<p>Links prepended with a <code>*<\/code> are referral links.<\/p>\n<p>If you enjoy the content and decide to sign up through those links, you&#8217;ll be helping me feed my caffeine addiction \u2615\ufe0f<\/p>\n<p>Thanks a bunch, you glorious human! \ud83d\ude4c<\/p>\n<h2>New achievement<\/h2>\n<p>You made it to the end, here&#8217;s a \ud83c\udf96\ufe0f<\/p>\n<p>P.S. In case you were wondering, the style has been recently influenced by the amazingly refreshing litRPG book series called *<a href=\"https:\/\/amzn.to\/4bKTmsO\">Dungeon Crawler Carl<\/a>.<\/p>\n<p>Enjoy! \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR We&#8217;re going to build a Pok\u00e9mon search app. But we&#8217;re not going to write even one line of code. \ud83e\udd28 I know, coming from a developer (who&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4781,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-4780","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vibecoding"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=4780"}],"version-history":[{"count":0,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4780\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/4781"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=4780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=4780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=4780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}