Transcripts
1. Vibe Coding Course Introduction: Welcome to your introduction
to vibe coding. My name is Greg Hung, a Canadian creator and
technologist of over a decade, and welcome to this course. What is vibe coding?
It's a very recent term that was coined by the co founder of Open EI in February 2025, Andre Karpathy. And what it actually is
is using natural language to feed into AILMs like Cha GBD, to create prototype
apps to generate code. But this course is more of an introduction
to vibe coding in general because there are other platforms that you
can use to do vibe coding, like lovable dot
dev, both dot NU, which I mentioned,
and Google has recently entered this
game with Gemini Canva. So what are some
applications of vibe coding? We've got the ability
to make simple games like Space Invaders or Tetris. You can build customizable
dashboards that do things like list your
favorite crypto assets, or maybe it's a ranking
of the wealthiest people, or maybe even prototypes
for write sharing apps like Uber type
write sharing apps with Stripe or
PayPal integration. I've even built multi
LLM applications that allow you to use Deep
Seek deep C LLMs, ChaGBT, Gemini, Clode
all in one app, super LLM app using vibe coding. So in this course,
you're going to get an introduction to vibe coding, but I'll be able to lean
on the experience that I have had with BoltotNU
created an extensive course. So if you want to get
your introduction, your feet wet into vibe coding and a beginner
friendly approach, then this course is for you.
2. What is vibe coding: Okay, I'm gonna explain
what vibe coding is. It's a recently coined term
by the co founder of Open EI, Andre Karpathy, co
founder of ChachiBT. He coined this term
in February 2025. I was actually flying back
from Bangkok Thailand to Vancouver just a week ago. It's the end of March 2025. So the term was coined
in February 2025. I was already doing vibe coding. I was creating apps,
creating games with a platform that I was
introduced to called BoltaN. My friend Jay actually introduced
me to this after I got back from my trip to
Tokyo at the end of 2024. What it is you're using prompts, just like you do with hachBT
or Microsoft copilot, using natural language
to feed into an AI LLM, that is tuned for code. So some AI models that
are tuned for code are clawed or Cloe depending on how you
want to pronounce it. There's also open EIs hachBT and you're using these prompts
to create applications. So what are some examples
of those applications? That could be cryptocurrency
dashboards that list your favorite crypto
assets like Bitcoin, Nerium. You can customize
these dashboards, so you can choose to add
or remove these assets. You can set email alerts when you get certain
threshold met. You can email these
alerts to yourself. Some other applications
include building prototypes for ride
sharing apps like Uber, and you can even integrate PayPal checkouts into
these applications. You can create basic games like space invaders or
Tetris type games with actual video game music, scoring and sound effects. You can create applications that connect to
cryptocurrency wallets. I've created applications
that can transcribe audio into text using
what we call APIs. So APIs, I'll get into later on, allow you to tap into other platforms functionality to create really powerful apps. So you can create
prototypes or mockups or even usable applications or landing pages using vibe coding. So in a second, we'll get into different
platforms that you can use for vibe coding, and I can lean on my experience with both on you and lovable and Gemini Canva to help you decide which one might
be good for you.
3. Which platforms to Vibe Code: Explore which platforms you
can use for vibe coding. I'm going to lean on my
experience with Bol dot N, share some of the costs.
Let's get started. So today, we have
different platforms. I mentioned Boldt NU, and I had some alternatives like lovable and there
was also cursor. So Boldt N was introduced
to me by a friend. Immediately, I love
the interface. It was very simple.
And it was powerful. And you could
create usable apps. So by using the code in bolt, you can actually see the
code being generated, and then you get a preview
of your application. You can also iterate on it and publish it out
to URL very quickly. What I liked about it
was the simplicity, the power, and it
wasn't too expensive. I think I paid 20
to 25 US to get started with I think
about 5 million tokens, which was more than
enough to experiment and create multiple applications
within that first month. I also tried lovable. Now lovable also had
a good interface. It had templates. So you could use other templates of applications to start, and then you could edit
and iterate on that. But I just felt
that bolt was a bit more robust than lovable. But it's up to you
to experiment, look at the pros and cons, and these platforms are
changing every week, so things could change by the
time you watch this video. Another platform that I was researching at
the time was Cursor. So cursor is more geared
towards programmers. I had a friend who
actually used Cursor. He showed me some of
his applications, and there's a lot
more power there if you are comfortable
with coding to actually make modifications to the code and tailor
it to how you like. So my friend has actually
created some applications that do basic CRM
functionality, using cursor. And yeah, I've heard a lot
of good feedback about it. So a new entrance to the
space is Gemini Canva. So this is Google's Google's
application for vibe coding. It's a very similar
interface to Google Gemini. And you can use it to create basic things like
tick tac toe games. You can use it to create a stock or cryptocurrency
dashboard. But it's not as
in my experience, using it for a week I
can create games very quickly in the browser
that you can preview. But where it falls down
is it's not very easy to publish an application
very quickly compared to bolt on you
and share it with someone. You actually would have to put
it in a GitHub repository. So GitHub is a platform to
store and publish your code, which gets a little
bit more technical. So I would say that Gemini Canva right now is good
for creating quick games, for creating basic
apps, but yeah, not good for
publishing and sharing right now, but
that could change. So if you were to
start, I would say, right now, April 2025, both that new is a good option. It's not too expensive. And if you want a free option and you already have
a Google account, maybe try Gemini Canva. So those are some different
platforms you can look at. One more platform I wanted
to throw into the ring and that I've tried since filming
this is called replet. So replet also has a fairly
easy to use interface. And what it does is
it allows you to preview the app as
it's been built, which makes it very exciting. My impressions of this platform, I'll go into depth
in another video, but it has potential, but it's not as easy to
use as bolt and lovable. But the preview just gets you
excited because you can see things being built step by step right in front of your eyes
and very visually appealing, very mobile friendly app.
4. What experience do you need to Vibe Code: Okay, what type of
background, education, and experience do you need
to start vibe coding? The whole premise
behind this term is that you don't need
to be a programmer, you don't need to know coding. But what do you need? So I would say in my experience, you need to be comfortable
with prompting, of course, and we'll have a
separate section on that. But also the process
of iteration. So when you use a prompt to generate code or create a
draft or an application, chances are in this field, you're not going to get
it right the first time. So you have to be able to
revise it or iterate to make modifications on the first draft or
the first prompt. But what I would say is
your first prompt is really important because if you
are very abstract or broad, vague or general with
the first prompts, you're probably going to
get a very general app or minimum viable
product or MVP. So, the more specific you are, when your first prompt, the
more successful you will be. So I would encapsulate that
as being a good prompter. Someone who's good at
revising or iterating, a technical
background does help. When you get to the
more advanced apps, you'll have to call on APIs, so being able to go to
different platforms, copy and paste these keys, bring them to your
vibe coding platform, and you may even have to, you know, paste these keys
into different folders. So you got to be comfortable
with that type of stuff. And maybe even
looking at some code, just to get a general idea
of what it's actually doing. So yeah, I would say you
don't need to be a coder, but being technical does help. Being just comfortable
with technology. So with that being said, the best way to start is
to actually get started, and that's to start prompting. So in the next video, I'm going to give you
some tips and examples from being in the trenches
of prompt engineering.
5. What Apps can you create with Vibe Coding : Okay, what are some
applications for vibe coding? I've gone through this briefly. We can create games, different
types of dashboards. But generally, when it comes to what applications you can
create with vibe coding, it's only limited by
your imagination. You can think about
different apps that you have on
your smartphones. So you now have the ability
to create these apps or mock ups or usable
prototypes that then could be refined and
actually possibly turned into a production
app or a SAS app. Software is a Cloud app that you can monetize and actually sell and possibly even
bring into the app store. But that's outside of the
scope of this course. So we've got a golf
scoring application. You can create basic games
like Pac Man or Tetris. You can create your own
spin on these games by customizing the music or
the rules of the game. But you can use the
original game as inspiration for making your
own variant of that game. You can create dashboards, just for about anything. The top Instagrammers, the
top cryptocurrency assets, the top stocks in the SMP 500. And you can make this dashboard. So it's really customizable. You can add or remove certain
cryptocurrency assets. You can get email notifications. You can display certain icons. You can collect email addresses
from these dashboards. You can create lining pages
to promote a certain product, product launch that's happening. I've even created
a lining page that displays the Trump
and Milania coin. So real time stock pricing and the ability to collect email
addresses from that page. It's really limited
by your imagination. Once you get into calling APIs, you can create even more
powerful applications. So I mentioned the
multi LLM chatbot called ChatBot GBT
that I created. So it allows you to use AI
LLMs from Deepsk from hat GBT, Gemini, all in one Super app. So I use APIs to
create that app. You can also use apps to do things like audio
transcription, or in the future, maybe you can even create
an app that allows you to cut video shorts
from a long form video. I've actually used a different
platform to do that, and maybe one day as these vibe coding platforms
become more powerful, people will be able to create usable production
apps that they can sell a lot easier and faster straight from the
vibe coding platform. So yeah, those are
some different ideas for applications
from vibe coding, and I expect them to
become more powerful.
6. Prompt Engineering Tips : Alright, prompt Engineering. This is probably the most essential skill when it comes to vibe coding and working
with different AI LLMs. So I've got a lot
of experience by creating the BoltoNU course
onto prompt engineering. I've also used different
platforms like Rock three, Microsoft
copilot, Gemini. So what are some
of the top tips? So a lot of AILMs are introducing new modes
on your prompt. You may have deep search. You may have a think mode. You may have an attachment icon. You may have an image icon and the ability to pace URLs
or even use your voice. So let's start with
the deep search mode. So deep search is exactly that. It's going to do deep research. It's going to take
more time to look across all different platforms to come up with your answer, a very extensive answer. And on Grock three, the advantage is that it can
not only search the web, but it can search all the tweets or posts on x.com,
which are very timely. So that's a key advantage of using deep research
mode on x.com. Each platform like Google. Google has the advantage of
being an expert in search, so it's going to be able
to pull those resources. On your deep search mode, you're going to get citations. But for this purpose, deep research mode is good
for that first prompt. Another feature on the
prompt is your think mode. So once you've done
your deep research, then you can ask it to think. So being able to use those different
features in the prompt. Deep research is good
for starting out, and you can use Think to
actually come up with the code. So an example I would do is I would if I'm
creating a game, I would research how to make the best golf game in
deep research mode. And then I would enable Think Mode to
actually come up with the code that I could then put into my bolt
Dot new prompts. You've also got the
attachment clip. So sometimes you
can attach images, you can attach Excel workbooks. You can paste URLs
from other websites in your prompt to actually refer
to something that you want. So if I was creating
a video game in Bota and I wanted
to use music, I could actually
paste the URL of an MP three or Wayfle from
another site and say, use this music in
this video game. I can also do the same thing
with an image if I wanted to use an icon in my
app or a favicon. I would past in the
URL to that image. I would say in the
prompt, use this URL. So being aware of these things are great to have in your
prompt engineering arsenal. There's also very
simple prompts. Sometimes you'll
get a prototype, Let's just say your game
prototyping is not working, or they don't provide
the instructions on how to play because you didn't
provide that input. You can just say, provide me the instructions
on how to play. How do I jump? How do
I move? How do I fire? Just creating that
simple prompt. And then sometimes the platform will do all the heavy lifting. You've got the right prompts, but the application
doesn't work, so just a simple
prompt, like, fix it. You just need to
keep on prompting it until you get a
usable application. Alright, so let's just
summarize some of those pro engineering tips.
I went through a lot. So in your prompt, whether it's Grock
three or Gemini, being aware of deep search
mode for deep research. Think mode if you want to have it think
through a problem. Being able to take that output
from these platforms like Rock three, Gemini, Open E, hat GBT, taking that
output and being aware, you can actually paste
encode or output into vibe coding platforms
like both on and U. Because BoltaU is not its strength is not
research or thinking. So you can actually use output from other platforms
that are good for research and thinking for vibe coding platforms
like Bolt U. Being aware that
you can paste URLs, you can attach, in some cases,
attached documents, PDFs, clips to scan through your
documents to get music, sound effects, images,
being aware of that. Or sometimes just
simple prompts. Fix it, provide
the instructions, you know, just seeing your MVP
and being able to iterate. Just keep on prompting it on. So those in a nutshell
are my top tips for prompting prompt engineering
in 20250 quarter. Things are always going to be changing as this field
is changing dynamically.
7. What are API's: Okay, APIs, application
programming interfaces. I remember studying
computer science and these references to APIs. I just sounded so boring,
some abstract term. As it relates to vibe coding, it's really powerful
because this is what unlocks your application
to make it more powerful. So some examples of platforms
that offer APIs are Google. Google has so many APIs for their map functionality
is one example. Stripe and PayPal have APIs. If you want to put in a paywall or shopping cart into
your application, you would need to use APIs. Different golf maps that have their scorecards
offer APIs, if you want to build a golf
application, for example. Another example is a cryptocurrency
platform, coin Gecko, which actually has a real time, powerful application
for your phone. Offers a free API
that allows you to create your own
cryptocurrency app. Also, there's very
powerful APIs from HBT that would allow you to create different types
of GPT applications. So let's get into it
a little bit more. So an API is actually a
string of characters. If you go into the platform
like Google or PayPal, you would just set this
up to create an API key, and you would copy this key, and it's not meant to be shared. It's meant to be
secret. And when you're in your vibe coding
platform like both on you, at some point in
your application, you would say something
in your prop, like, use this API key to create
a cryptocurrency dashboard, for example, to show the top
five cryptocurrency assets. So let me rephrase
that prompt again. Create a cryptocurrency
dashboard listing the top five assets
using this API key. And your platform may say, it's not a good practice to actually use this API
key in the prompt, but please put it
in this folder. So it would actually go
to a specific folder in your vibe coding platform and then simply
paste the key in. Now, on the API API platform, let's just say it's
Google or Chat GBT. Once you start
using that API key, or if you're sharing this
app with other end users, you're going to see that it's actually being accounted for. So you may have a
certain number of credits or you may purchase a certain
amount of this API key. And once once your
usage has been used up, you'll need to purchase
more of this API key. Or if you're using
Google's API keys, they may track usage and then send you a bill at
the end of the month. So this is your
introduction to API key. So it's a way to enhance the functionality
of your application in your vibe coding platform, whether it's both
dot U or cursor. Just know that you're
going to be billed. Most of the powerful
APIs are not free. There's going to be
some fee involved, and that fee is determined
by how often that API key is being used by
you or your end users.
8. How to create pong using ai coding: Alright, I'm going to demo a very simple game
just like Pong. So it's two D tennis. But I've added a bit of a twist. You can add the players names
and choose a profile pick. So let's just start here. Greg, and I'll just
add a profile pick. And we'll put Kasey Choose a pick choose this one. And then we'll start the
game and space bar to start. So the controls are below. So W and S is for player one. Up and down is for
Casey, player two. So I'm just going to play
against myself here. But as you can see, we've got a very simple
game of pong here, and we've got the profile picks. So it kind of adds a bit of customization and we've
got a sound effect there. And the game will go up
to something like 11. So this is the palm game. So I'm just gonna close it. I should probably add a
feature to stop the game. But I'll just go
behind the scenes and I'll show you my prompts. Alright, so I started
off with a prompt, create a two D tennis
game like Pong. And then I used the
enhanced prompt to come up with something that
was more detailed. So let's just go to the prompt, and I'll show you what I mean. Create a two create a
game similar to Pong. And the AI is smart enough to
recognize a game like Pong, and then you can click the
icon here for enhanced prompt. So you can see there that it really expands on that
one line request, and that's the magic
sauce right there. So that was my first prompt. So I went ahead and the data
for focusing on the left. And then I saw the
first version, and that's where I
have my second prompt. Allow the ability to add player one and two names
and add a profile pick. So this dialog box you see here is what came of
that second prompt, and it did a pretty good
job exactly what I needed. And yeah, that is it. I deployed the
application to this URL, and that's a simple
game that we have. I mean, you can use your imagination to
make this more complex. You could probably ask it to
change some of the colors. Maybe you want to make
the paddle longer or give the ability to
customize the size of it. So you can use
your creativity to make it more interesting, but this is just a basic example of how you can make a pong game, a two D pong game using bolt Nu. Maybe you want to use this
as inspiration to create a similar or even another game using some of the ideas here. So hopefully, this video
lesson helps you out and inspires you to create some of your own games using AI coding.
9. Transcribe AI audio app: Hey, in this lesson, this video, I'm going to demonstrate a new type of app
that can actually transcribe texts
from an audio file. So this audio file
I'm going to use was actually generated by
Google's Notebook LM, which is an audio podcast. So here's the app. It's called an audio
video transcriber. We're just focusing
on audio right now. And although it
does have the field for a video URL that's
not available yet, I would like to
get to that step. But what I've asked it
to do was to include this ability to upload
videos or audio so I can click here and I can
actually find the WayFle. So we're starting from scratch
here and I'm going to find a Wayfle Old Coin Summer. Oh, I think this
is the one here. So here's a wayfle. You can see it's processing. So I'm using another
platforms API. It's called Assembly AI. I'll quickly show
you the site here. So assembly a.com. I'm just using the
free plan right now, and this provides the speech
to text functionality, and it allows you to distinguish
between the speaker. So here we go. So we can distinguish between
speaker A and B, and we can actually copy
the transcript so we can use this generated
text elsewhere. So let's just say let's
just bring up a notepad. And we'll just paste here. So that's the transcript. Alright, so I'm just going
to reverse engineer. Alright, so I'm going
to go through some of the highlights of this app, and I'll blur out some of the parts that are confidential, namely the API keys. So I started off
very simple prom, create an app that
can take YouTube URLs and transcribe them
and provide captions. And as I told you,
I'm not there yet. But yeah, told me it's
not a good idea to paste API keys in this
window as a best practice. You can do that within the ENV file if you
go over to code, and then in the ENV area, this is where you can
actually paste in the API key just as an FYI. So I created the initial UI here with the URL
field, the button. And yeah, that was
the draft one. And then it took me a
while to find an API key, an API key that could actually digest video
or audio files. So I went back and
forth quite a bit. And actually, it wasn't
until I found assembly AI. I asked it to update initially, I I try to use some
APIs from Google, and that's an ongoing process. But just as a version one, I use Assembly AI, and so they offer the free API to take audio files
and transcribe them, and it allows you to
copy and paste the text. So I basically told it update
to use Assembly AIs API, and it actually did
that pretty seamlessly. But what it didn't have was this area to drag and
drop audio videos. So I told it to
allow the user to upload audio or video files. So then I understood
that pretty well. And from there, I had to give
it more one more iteration. And that was the application
should allow you to distinguish
between Speaker A and Speaker B as well
as copy the text. And see here's the
prompt over here. And yeah, that brings us
to where we are today. So what are some learnings here? So it's both pretty powerful. I mean, the ability to take a video or
audio and transcribe. But also to build the UI. Bolt understood
that pretty well, and I'm pretty impressed
by the drag and drop audio video functionality and the ability to use the
API from another platform. I understood that pretty
well and the ability to distinguish between Speaker
A and B in the transcript. That comes from the API, but I had to explicitly tell Bolt to do it and to
allow us to copy it. So this is a good working
version one of this app. Hopefully in the
future, I can get the video functionality
transcription to work, and I can share that with you. And yeah, so that's a
different use case of using bolt dot u to
build useful apps. Hopefully this gives
you some ideas.
10. Vibe Coding Summary: The vibe coding course. It's been short and sweet, and it's an
introduction to some of the concepts that you need to know once you decide
you want to deep dive. So we've covered things
like what is vibe coding? Which platforms can you use for vibe coding like Boldt NU, Gemini Canvas, or even cursor if you're an experienced coder. We've gone through some
tips on prompting. We've gone through What type of background experience
do you need? Do you need to be an
experienced programmer in JavaScript or
Python, for example. We've gone through
various applications that you can create with
vibe coding platforms. I've also spoken about different platforms
like Rock three, how you can use those to help provide really
good prompt input. And we've talked about APIs, which allow you to enhance the
functionality of your app, but you may be billed depending
on the usage of your API. So now that you've gone through all these topics in the
course, the next step, if you want to jump
a bit further, is actually start
doing vibe coding, sign up for one of
these platforms. And just get started. Just create your first app, start iterating on it, and then share it with some friends. Yeah, next step is
just get started, decide on apply form. I do personally
recommend both on NU or Gemini Canva and just see if this vibe coding thing
is for you and see what great applications you can create with the world
to solve solve problems.
Greg Hung, Travel Videographer
