Parker Rex
All videos
Parker Rex

Watch Me Vibe Code a Game in 30 Minutes Step-by-Step (Copy this framework)

March 29, 2025

Watch on YouTube@parkerrex

In this video, Parker uses Gemini 2.5 Pro and Google Vertex AI Studio to bootstrap and ship a Chrome Dinosaur game, walking through prompt engineering, project scaffolding, and incremental implementation in a practical, repeatable workflow.

Tools and setup#

  • Gemini 2.5 Pro for code-focused generation and ideation
  • Google Vertex AI Studio (prompt engineering and templates)
  • Prompt Management > Free Form prompts
  • System vs. user prompts for clean separation
  • Prompt templates with input variables (e.g., {productName})
  • AI Studio as an initial prompt playground, then moving to Vertex for deeper prompts
  • Supabase (backend stack) and a preferred tech stack you’ll use to anchor prompts
  • Next.js (App Router) for scaffolding and routing
  • Dino project target: a Chrome offline-dinosaur game (Dino Hop)
  • Assets: sprite sheets (e.g., Dino sprite.png) and sounds placed under public/
  • Local workflow notes: test prompts, iterate prompts, deploy as a web app, and debug permissions if needed

Prompt engineering workflow#

  • Start in Vertex AI Studio with a free-form prompt to bootstrap your idea
  • Create a stack-specific prompt (e.g., iOS SwiftUI or a JS/React stack) and then refine it
  • Use a two-part prompt approach:
  • System prompt: defines role, constraints, and expectations
  • User prompt (the actual task): includes specifics like inputs, outputs, and success criteria
  • Leverage prompt templates and variables (e.g., {desiredProduct}, {dependencies}) to turn prompts into one-click deployable apps
  • Example flow Parker describes:
  • Build a “reverse engineering SwiftUI app” guide prompt
  • Save as a named prompt (e.g., Reverse engineering SwiftUI app)
  • Generate and autosave within Vertex, keeping inputs visible for users
  • Atomic prompts: keep each prompt focused and composable so you can reuse or swap parts without breaking the whole chain

Code/prompt snippet (illustrative)

# System prompt (example)
You are an expert in reverse engineering technology, specializing in readable Swift code. Always use the latest features.

# User prompt (template)
Task: Reverse engineer and document a SwiftUI app named {productName}.
Output: A step-by-step guide with code samples, file structure, and rationale.

Building the Dino game (implementation details)#

  • Scaffold and routing
  • Use Next.js App Router; create a Not Found page as a starting scaffold
  • Prepare a client component for the game (e.g., a DinoGame.tsx in components)
  • Core game components
  • Canvas-based rendering with 2D context
  • Sprites: replace simple shapes with a Dino sprite sheet (public/images/dino_sprite.png)
  • Obstacles: cacti and ground layer; add clouds for parallax
  • Score display and game state (playing, game over)
  • Jump sound and basic audio hook (optional)
  • Game loop and rendering
  • Use requestAnimationFrame for the loop
  • Typical loop structure: clear canvas, update game state, render
  • Basic physics: gravity, jump impulse, collision detection
  • Asset loading and integration
  • Load the Dino sprite sheet and frame dimensions (e.g., width/height per frame)
  • Hook up a simple animation timer to cycle frames
  • Add sounds/assets into public/ and trigger on events (jump, score)
  • Example structural approach
  • Components/DinoGame.tsx (client component)
  • Public/assets/dino_sprite.png, public/assets/jump.wav
  • Not Found page updated to route to the Dino game scaffold
  • Practical note
  • Expect iterative prompts and code tweaks; you’ll likely switch between canvas logic and sprite animation as you test

Code sketch (conceptual)

"use client";
import { useEffect, useRef } from "react";

export default function DinoGame() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current!;
    const ctx = canvas.getContext("2d")!;
    // load sprite, set up game objects, and start loop
    let last = performance.now();
    function loop(now: number) {
      const dt = (now - last) / 1000;
      last = now;
      // update state
      // draw frame
      requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  }, []);

  return <canvas ref={canvasRef} width={800} height={200} />;
}

Architecture and design decisions#

  • Client vs server boundaries
  • The game logic runs on the client; Server Components are not a fit for real-time canvas games
  • Use a Client Component for the Dino game to leverage the DOM/canvas APIs
  • Atomic, readable code prompts
  • Break the task into clear, independent steps (e.g., “set up canvas,” “load sprite,” “draw ground,” “spawn obstacles”)
  • Keep file names and responsibilities explicit (e.g., DinoGame.tsx, DinoSprite.ts, useGameState.ts)
  • Prompt-driven scaffolding
  • Start with a high-level prompt to outline required files and structure
  • Then generate concrete scaffolds and iterate with targeted refinements
  • Asset strategy
  • Sprite sheets are recommended for precise animation control
  • Use public/assets for images and sounds to keep the repo self-contained
  • Iteration mindset
  • Start with a minimal viable game (simple rectangle if needed), then swap to full sprites and sounds
  • Expect prompts to produce multiple options; test and pick the best approach

Takeaways and next steps#

  • This is a repeatable framework: prompt-engineer first, scaffold second, implement third
  • Next video plan: build a Whoop-like widget that shows a score in a React component and opens up possibilities to reuse with Apple Watch or other devices
  • Behind-the-scenes and broader context
  • Parker X daily covers AI services business-building
  • Vibe with AI community is a place to learn across coding, marketing, and AI
  • Audience engagement
  • Parker invites comments (e.g., "duck") to share the underlying prompt used in the video

Quick-start guide (repro in a few steps)#

  1. Open Vertex AI Studio and go to Prompt Management > Free Form
  2. Create a stack-aligned prompt (e.g., iOS/SwiftUI or JS/React) and separate system vs user prompts
  3. Generate and save the prompt as a named template (e.g., Reverse engineering SwiftUI app)
  4. Scaffold a Next.js App Router project for a simple web app
  5. Create a DinoGame client component with a canvas
  6. Add assets (dino_sprite.png, jump.wav) to public/ and wire them into the game
  7. Implement a 2D game loop with requestAnimationFrame, basic physics, and collision
  8. Test locally, iterate prompts/assets, and prepare for deployment

Notable tips and pitfalls#

  • Keep prompts atomic and modular to maximize reusability
  • Always separate system and task prompts to avoid leaking instructions into user inputs
  • Watch token utilization; extremely large prompt trees can explode token counts
  • When using repo-wide prompts or “text” tools, verify environment aliasing and avoid breaking the workflow
  • If you encounter not-found or initialization errors, double-check client/server boundaries and use client components where interactivity is needed

If you want the underlying prompt used in this video, drop a comment with the word “duck” and Parker will share the prompt details.

Transcript

hey there I'm Parker Rex and I led technology for a startup that sold for 23 million bucks after that I did a couple different SAS ideas that didn't work out but it led me to using AI for learning the full stack I wasn't Vibe coding I was actually coding but I was just using as a tutor I had tried to learn how to code for a very long time and then finally when 3.5 came around I finally learned stuff Beyond just HTML and CSS and a little bit of JavaScript so in this video we're going to be covering G Gemini 2.5 Pro and I want to give the kind of walkth through narration of building stuff from scratch either bootstrapping a new thing or adding a small feature to something so it's not going to be a cursor video this is going to be using their tooling because I just binged a bunch of their videos and I'm pretty impressed so let's make something simple to start and this is going to be a series so in this video we're going to do the Chrome dinosaur for thing it's called Dino hop I think see yeah dino game it's whenever Chrome dies you get this right so this should be really simple but let's try it out and what we're going to be doing is we're going to be using as I mentioned their tooling so what I put together let's just empty this what I did was I started by going to you know there's a couple different options you have I started by going to the AI studio and I was using that at first because it's nice it has a little prompt library in there but then I wanted to make the prompts better and I was reading their documentation and the prompting tools are pretty powerful within the vertex so if you're not familiar vertex is in Google cloud and what it allows you to do is have it refine The Prompt for you and then use prompt templates so this would be something that you've already got some conviction around prompt that you have and now you want to put it in a place where you could oneclick deploy this and you could also have what's called a prompt template so if you notice here I have a little thing that has curlies around it and the curries represent the template or the input that somebody's going to type in so this will end up being a web app that I will be able to literally click the code button and deploy it as an app which is very cool I need to figure out why it didn't work but that's for uh it looks like it's a permission thing so what I did in here was I took this initial prompt that I used in a previous video of mine to reverse engineer a product and I put a very basic version of this like the v0 of it into here and then had it plus it up and so if you were starting from scratch what you would do is you'd come in here and you'd have under vertex AI Studio which is in here I have it pinned because it's awesome and then I'd go into create a prompt which is under the free form so prompt management and then you can go to free form free form is what you saw before and it would save back into prompt uh manager or management so if you were starting from scratch you go into pre free form and then you can just start typing into here but that'll actually clear the thing that you want you want this help me write button and then you type in the first version of it what I highly recommend is putting the stack that you have in there and then think of all the questions that need to be answered if you want to get the best outputs so I went to the cursor directory and chose a stack that I enjoy I typically go for the ones that pontis the creator of this makes because I like the code that he writes so I take that and then I use that as inspiration in the that I'm going to be writing and so then you can just hit create prompt now for this case I'm going to use a different set of uh tools so I'm going to pull this out let's say instead of typescript and nextjs I'm going to use specializing in Swift UI so let's find one in here because this could be an IOS app creator so let's type in iOS uh are there any in here there should be maybe I'm doing this wrong how do you rules there we go and then is there one in here for Swift okay they're sorted by super base Swift UI original instructions this guy seems smart let's grab that and um I don't see okay you're responsible for this this and that okay it seems fine let's grab that one and what I'll do is go back into vertex and I'm going to create a little bit of space here I still want to use super base because it's really powerful especially if you want to have a dynamic back end that is independent of the Swift Code let's take this out and okay there we go cool that should work so now we have an IOS app creator and what I do then is I just hit generate prompt and this won't include all the other goodies that I had in the other one but I just want to kind of show you how this is done so what it'll do is it's right now it's generating both a system instructions and then the prompt and you want to have separation there because the prompt the first one that it puts in is the one that you can display to the outside world the one that you can then have a form around you can have payments around so you can have your users test it out so it's kind of hard to read in here so let me open it a bit but I won't make any edits because I imagine this going to be good so you're an expert in reverse engineering technology specializing in readable Swift Code you always use the latest version familiar with latest features okay you will be provide with the name of desired product to reverse engineer your task is to create a comprehensive reverse engineering guide for building the desired product okay it has a set of instructions well so that's more or less how you would do it and as soon as it popped in here now you have the prompt variables again these are the things that are inputs for the user so I'm going to just see it autosave I was going to say I'm going to save it it's going to rename it to something contextual to what I'm doing reverse engineering Swift UI app that's great so let's go back and let's use the one that we're originally doing which is this one and what's cool is I can deploy this onto my Home Server so that's cool cool so let's test this out we're going to try to make that dinosaur game so let's be as specific as we can be and um I think one other step that you could do in here I'm not totally sure how I want to do this because right now I'm seeing what's capable by not breaking the research from the development right because what I imagine is that for something that is small like this I mean this should be able to Frank this this should be able to be done just in the canvas on um like not even using the AI Studio or vertex but I think if you have this scale of difficulty and the tools that they're probably on that that linear um like level of like basically the harder the the product is the more detailed you need to be which correlates with the tool that you'd use that makes sense so like AI Studio and then you'd have just a Gemini web app I think this would be like easy mode so one shots medium and then hard and then I also think that as these go up you'd want to add deep research because then you could add that as the prompt variable as well and that' probably be an intermediary step like if I'm going to take this and have this be something that I'm using and testing for my own products internally I'll just see how far I can push it without adding more stuff so that makes sense but let's give it a good go without any deep research first so let's see um we're recreating dino game the game that you play when Google Chrome doesn't have internet connection and you can press the space bar to jump over cactuses and there's little blip noises the game is called dino game so this one's a little bit Overkill with these prompt variables you're wondering like why is he repeating these things through but I had added the product explanation would be maybe agnostic to an existing product it's like hey I want to make an aggregator for flight information here's three of them would be the second one be like Skyscanner I don't know xedia whatever then maybe the product name is maybe Overkill so I'm just going to do this anyways project status this would be a Boolean so is this built or is this not not built in an existing repository that we're adding to it will be shown or the dino game Recreation will appear when a user users land on then I'll grab the file oops I'll grab the file that I want them to be shown it so it should be just the error maybe we find one at the root so do we have an error here we don't so we just make one let's grab this and do this er. TSX actually let's do not found. TSX let's just make a uh scaffold I missed the T SX scaffold a basic nextjs app router not found page okay we're going to use 35 because I don't like actually no we're doing Gemini because Gemini but I don't like 3.7 was what I was about to say okay cool that works we have a placeholder now let's just commit that real quick okay let's go back and that will be an app app slot found. TSX okay and then finally we need to take the repo that we're working in and turn it into a file tree so what I'm going to do is I'm going to just type in text what that's doing is it it just did a repo mix under the hood and I just bound that to an alias so if you are curious it this will show you this is going to show me an error because I need to fix this stupid envm thingy but on line 105 right here you can see that I have an alias for text and then text does repo mix which flattens the entire repository and then makes it llm readable and I'm doing an ignore flag for node modules andex right so that's that did if you want to learn more about it check out their site and then I'll open that up and you can see that I have 30 366,000 tokens so I'll grab this and let's put it in there and and don't break look at all that it's crazy what are all of these 1 are these looks like let's insert this that's cool that I did it okay so this is 484000 tokens and pretty large let's do the output token limit we don't really care let's go to the Moon there really shouldn't be a limit and then let's fire it off and see how it does we want the text format to be plain text that's fine how creative do we want to be I'm going to bring this down that's what temperature is I'm going bring it almost all the way down maybe like a three seems right and then let's send it I'm really interested so I haven't done this particular one this is more so us learning together me showing you some of the stuff that I've been fiddling around with but let's see how it does so okay here's the breakdown the core task is to recreate or to create a guide for building this so that's what I was saying before is what I'm kind of ideating on is will this be the chain of tasks will it be I'm guessing it's going to be one would be deep research and then deep research would go to this reverse engineer guide the reverse engineer um well I guess you just call it that and then the third would be the potentially like a Solutions architect and then last would be the implementation engineer but what we're trying to do is just see how far for a small thing again can we go without these you know second third and fourth steps or first third and fourth so but I do believe that if you combined all of these you'd get the best output so okay because we're combining tasks in here just a test understand the goal yep recreate it yeahuh add an feature to the existing repository the repository is this okay not really needed but part of the stack okay so we need a Sprite we need a ground horizon line we need obstacles which are the cacti we need a score display we need a game over maybe some clouds it's giving us the game mechanics it's giving us the player input the physics the obstacles the Collision detection the scoring the game State the diff difficulty over time Jump sound okay now a map to Target the Technologies and context how do these elements fit into this again just one page right now it's react server component the game logic requires client side therefore it needs to be this yep that makes sense react it's going to be good for it typescript yep so it's analyzing the stock and additions cool for more authentic look Sprites are better all divs could work canvas is more appropriate I agree game Loop we need a way to update the game State and render continuously we're going to use this request animation frame what would be cool is if I added potentially grounding and that should add citations so I could just go and read this because I don't frankly know what this is so I'd want to see it in there okay frequency of the call back would generally match the display rate cool it tells the browser you wish to perform an animation okay good to know didn't know that need event listeners yes you need the audio API yes not needed yes not needed so you'd set up the client component file set up the canvas you get the 2D rendering contacts all this looks awesome so so far I'm curious how it'll handle the Sprites so we have a the use of the request animation frame inside the loop you clear the canvas update the game State and then draw the elements at the use effect okay make steps Atomic and logical I like this I don't know if I added that but that's what I use in a lot of prompts Atomic just meaning that it needs to stand on its own there's no beef within there's no subtasks within one task clear technical language specify the file names emphasize the client component review okay check the against the original request I really like that it automatically did that cool so now we have the reverse engineer guide now I think this might be the output which could be good because then we'd hand that to an architect oh no no we'd actually just hand that to an implementation so we would not need this it's great and this one should be really well known by Google because it's their thing oh wow it has the files too well let's give it a go so it's just going to be a simple rectangle angle okay that makes sense the difficulty curve responsiveness and the performance oh look at that so it found 1 2 3 four nine different examples to pull from it's funny it didn't do citations for some things but let's just give this go let's grab our not found it's passing in dyo component that I'm assuming yeah so you're passing a client component into the server it that should work should should should is always a big word I always forget it's so silly how the client boundary stuff still confuses me sometimes okay so we have this let's go into our not found we need to then obviously create the dino game um okay so let's where do we want to put that probably inside of components so let's CD into components let's do touch Dino game. TSX and then we'll Echo the following file into there let grab this this is the bulk of the game as the drawing as oh well yeah that's literally everything cool one file we'll just do an echo for that oops did it okay it doesn't want to do that let's cursor can't hang on that let's um kill that and then let's just paste it in like a normal person yeah that's all good to go now let's run it you got to be kidding me did I freeze my terminal oh now let's go to a route that doesn't exist let's see should be a rectangle whoa okay it did it very cool so obviously you'd want to go in and then tweak but that's pretty cool so I would get a Sprite so let's just grab Sprite really quickly um Dino Sprite sheet how do we get these download okay let's do that and then we'll grab a sound hopefully they have sounds in here sounds um jump sound I'm sure it's fine grab those and we only need I'm not totally sure which one we want if we want GIF GIF probably would work nicely cuz it's just going to going to be running so let's see we have get sounds for/ blip so let's do that one first because we can see that it is looking for it let's find the sound well it's not lip and then under public just throw the sound in there now that should be hooked up and then finally I'm going to just wrap this by asking can I do another prompt doesn't even look like I can I can't add a message experimental generate genius and unpredict all cost um it's so weird that I can't get another message in here so let I'm doing this wrong I don't think I am let's grab this and let's search for the square square block draw a Dyno instead we're going to ask Gemini what to do pry sure you would just pass that in but Let's see we have a dinosaur game that we need to replace the basic simple black square that we're drawing with a Sprite we have a few different options for files and I'm not sure which one we should use to pass that in okay I know we have this ASC file sure options to use ASC dogf else a sheet or a Sprite sheet that is attached using PNG I'm imagining it it's going to want to use the Sprite sheet I'm just not sure how it rotates through because I don't never built something like this ASC this is a source file great for editing but you can't render it gif works but offers less control Sprite sheet is the recommended one and you can precisely draw those therefore you should use that and then update the logic okay cool yeah so I'm going to drop that into Dino Sprite we'll go into public we will put it inside of images yes let's begin implementing and loading it the Sprite sheet is in public slash images Dino sprite.png that should be it as soon as we load that in cool added placeholders to measure it to find the exact height okay we could do that by 16 15 by 17 yeah so I'll stick that in the last one each individual uh I guess it's Sprite image is 15 width by 17 height if you're wondering how to get sounds in cursor in the beta section so you go a cursor set beta sound it's going to use a state variable to hold each loaded image and I'm just curious how it cuts them it must just be on a timer rotates through them the height of the single frame what might be wrong is that it because I measured around exact thing it probably needs a space in between but see let's just check and we should be able to refresh the page got an error cannot access game before initialization I'm sry error oh it's a syntax thing let's change this ensure we don't get any syntax errors I want to feeling I want to we have an error it's running this this state variable with the sound it's funny we have two sounds one is this like pulsating speaker thing see okay that's a whole rewrite holy smokes okay keeps making syntax errors person oh this is that's just lenting should it should work yeah there he is okay tiny yeah that's I guess because I made it that small but let's see about the sound cool all right that was good good little demo so I'm G to keep uh refining that prompt that I made and do the next level of of kind of challenge so we successfully made the dinosaur it took 30 minutes that's cool I can cross that one off the list the next time I'm going to do in the next video is this this whoop widget so what that will do is it'll take this information which pings three times a second 86440 seconds in a day a lot of pings but I want to take that and then make some sort of little like whoop widget that shows you a score it's similar to the thing you see on iOS but make it into a react component that's open source that people if they wanted to they could stick their whoop score on their website and then that same idea could be applied to your Apple watch or your aura ring so be sure to like the video and subscribe because I'm going to make one of these a day on this channel and then if you want to see the behind the scenes stuff you can go to my Parker X daily where I get behind the scenes of building an AI Services business to $100,000 a month in profit and we also have a community called Vibe with AI where I teach all the stuff that I'm doing across all the domains so it's coding it's marketing it's all the things so yeah I can also share this prompt with you if you comment below the word duck because you know rubber duck programming just comment duck and I'll put this prompt down there and I'll see you guys in the next one thanks for watching