Transcripts
1. Lovable Course Intro: Hi, welcome to the Lovable
vibe coding boot camp. My name is Greg Hung. I'm a Canadian creator and
vibe coder, and in 2026, I believe this
platform is one of the most powerful and user
friendly platforms to create your apps
using your ideas and creativity very easily from
your computer or your phone. The cost starts as basic
as $25 US to get started. And in the course, I'm going to teach you
the basics, the platform, as well as sharing some
of the projects I've created with Lovable from
the Pickleball Lists, which is a global directory allowing you to find courts
from all over the world, also allowing users to create an account and also make
their own own submissions, their own reviews,
their own photos. So it's a crowdsource
pickabll platform. I've also created apps
like a TikTok portfolio. I've even created
apps that allow you to connect to
your Cloud Drive, so you can actually share files on your Cloud
Drive and sell them. The powerful feature
I'm excited about in Lovable as of June 2026
is called connectors. So connectors allow you to hook into platforms like Stripe, like Google Drive, like TikTok, and they allow you
to talk really, really well with these
other platforms to create very customizable
apps that you can then publish onto your website, or you can use a lovable
domain for free. And I'm going to share
how you can publish your app that you
created to your website. I'm going to share
some examples, and I'm going to go
over step by step, as well as sharing my
prompts of how I created it. So if this sounds exciting,
let's get started.
2. Lovable Tour 2026 on the Desktop: Hey, everyone, This
is a quick tour of Lovable in June 2026. They've upgraded the
platform, which is great. They've got these connectors, which are fairly new feature. It's very visible above
your main prompt here. And you can also see
on the left hand side. So just a preview by connecting
to these connectors, you enable additional
functionality. For example, I can use a TikTok connector to
connect to my accounts, get useful information AI
insights on my TikTok account, and I can create
an app from that. Can use Supabase to set up a database if I want people to use my app
and create accounts. I can use a Google Drive
connector to actually connect to files on my Cloud Drive and sell them. That's
just an example. And you've got all these
other ones here like Microsoft Outlook,
Microsoft Excel, Sana, Twitch, Gemini
Enterprise, and so on. So a lot of possibilities here, and you can see the ones that
I've already connected to. Okay, on the left hand side, this is where you can see the amount of
credits you have left, the type of plan, your
workspace members. Resources, it allows you
to see other templates, and then you can see
the connectors here. So different areas you can
access the same features. Now, you can see projects
that you all the projects, you can see the ones
that you've created, see ones that have
been shared with you also see some of your projects
on the left hand side. And when they have
the three dots, you can access settings
from that project, rename it, remix it, delete it. Now, if you click into
an actual project, You have the prompt on
the left hand side. If you want to continue
to iterate on it, you can see these
suggestive prompts, which are useful if you
can't think of a next step. So Lovable actually helps
you predict that next step. On the right side,
this is the preview. This is where you can
actually try out the app. Say, on the screen, you can
see we're on the preview, but there's different
ways to view it. You can see the files
of your project. You can see the code view. Let's go back to
that view there. And from here, you can
select different areas of your project, dashboard,
authentication, players. So I think this is, if we were to have more
people register, this is where we
would access it. And then you've got the root, which is just backslash. You can share your project with other people through a preview, and you can even publish it to a custom domain or a
lovable domain by default. And that's your overall
preview of Lovable. And again, at the project view, you can remix it. You can see the connectors. I do want to quickly show
you the domains area. Okay, so we can click Settings. Okay, we can see my
plans and credits here. This is the plan I'm on. My Cloud and EI balance. This is the amount of cloud
and EI that I've used. I haven't really had to worry
about overusage on my apps, but I haven't really
deployed them to production. Over here, workspace domains. You can actually
buy a domain here, or what you can do
when you publish it, you can connect it to
an existing domain, and they make it quite easy. I've actually connected some of my other projects,
which I'll show you. So I created this golf
one here and I've already published it to golf.ai
creative dot Academy, and pretty easy to do. You can click Manage Domains, and you can connect
to existing domain, and you just type it, and it connects to Ccround or whatever your domain
registrar platform is, and it was pretty
straightforward. So there's your tour
of Lovable in 2026.
3. Tips on Prompting for Vibe coding: So here are my tips for
coming up with prompts, and, you know, it takes
a lot of practice, and that's why I'm
going to share some of the prompts that I use. And you'll become familiar
with a bit of the lingo that you use to describe
different features on an app. So a feature on an app
could be that it gives you notifications or allows
you to create an account, multiple accounts and accept submissions from other users. And the more and more that
you practice, vibe coding. You'll get familiar with the language and you'll
become more proficient. So an example is my TikTok app. So my first prom was showcase a creator's TikTok content
on a custom portfolio page. The app fetches a list of
published videos and renders them alongside metadata
such as titles, sub nails, and
engagement counts. Now, if you're a creator, this might sound normal to you, but if you're not, you just need to practice and get
familiar with the language. And the EI models
are really good at interpreting
natural language. So it's fine to
start off with just using just communicating to lovable as if you're
talking to a person. And then you can narrow it down. You don't have to get it all
right on the first prompt, but it helps to be as
specific as possible. And then you can refine your app on subsequent prompts,
if that makes sense.
4. Intro to Lovable Connectors - App Study using Google Drive Conector: This video lesson
should showcase the app and chat
connectors in Lovable. This is a fairly new feature. We are in the middle of 2026, and I'm going to show you the Google Drive and Stripe
connector in one of my apps. So basically, select
the connector, and then you would authenticate, and then you can build an
app that will actually, for example, connect
to your Google Drive. So I'm going to go to this app. It's more like an
entire platform, and I'll show you some
of the key prompts, and then I'll download the site. So my first prompt was allow me to sell
my online courses, store it on Google Drive, allow the user to
preview some lessons. So it's a very general prompt, not very specific or long. And that got things started. So it made assumptions, went ahead and built the draft. And it allowed me to
actually create an account. So I'm going to sign out here. So you can actually
create an account name, email password, and then you can actually get an email
that allows you to log in. So I'm going to
log in as a user. And once you're a user, you can browse the free
courses on the right. So these are some
courses I've set up. And these courses were actually videos stored
on my Google Drive. So I've built up
this description, and here is the free preview. This should work. It's
a little bit course. Okay. So that's the pre and then if you haven't
purchased it, it'll lock the rest until
you purchase the course. So you can see here that the
other lessons are locked. So someone can either buy the course or start an
all access subscription, and I've set this
up with Stripe, so it will actually
take payments. And because this is
in the test mode, it won't actually
charge your card. And once you complete this, it'll give you the
link to the course. Alright, so let's just
see what it looks like from the back end as an administrator, so
I'm going to sign out. And I have an Admin account. Over here. Now, if I
go to Admin, Whoops. If I go to Admin. I can select the courses. I can also create a new course. And so this is the part
where I can actually browse my Google Drive and select So I can actually
browse my Google Drive. And select some lessons that are stored on
my Google Drive. Pretty cool. So yeah, the key concept here is that a connector
will allow you to connect to content or files
stored on your Google Drive. Now, depending on the
connector, like Stripe, this will take payments, different types of connectors. And if we look at the prompts
on the left hand side, I'll just show you some
of the key prompts. So one of the prompts
was allow the admin to browse the Google Drive and
select courses to publish. And then from there, it
was just testing the app and then creating
small modifications, add a thumbnail
picker per lessons so each video preview can use a custom thumbnail
from the Drive. Allow the admin to change
the cover image and add Stripe integration so you
can pay using Stripe. Okay. Allow the admin to add or remove lessons that are picked
from the Google Drive, add drag and draw
functionality, and so on. And I've come to a point where I can
actually publish this app. It's pretty usable, and beauty is that I can create more courses by browsing
my Google Drive, and I've also got my
published courses here. And the ones that are published, I can actually look
at the lessons. I can modify them. And it's not limited to
just online courses. I could sell anything on my Google Drive with the
integration of Stripe. So here we go, we've
got published courses. We've got some that
are in draft state. So if I sync, this actually connects to
your Google Drive. I'll show you the videos
that are in the folder. So if I click Lessons, I got the sync
confirmation message. So I can modify the description, the price, and the cover image. I can go do lessons. And yeah, I can adjust
the course here. I can select an
image, upload my own. So I think you get
the idea that, you know, there's a lot of power here with lovable
and connectors. And really your imagination
is pretty much it. So if you don't want to go through all this to
build something similar, I'm gonna package
this as a template, and allow you to create your own sell your own online courses if you're using Google Drive. Okay. So yeah, this is the power
of Lovable and connectors.
5. Templates and remixes: Okay, these are the different
templates available in Lovable and I'll just show
you where you can find them. Let's just go to the main page. So from here, you
can scroll down. So I click the main home
icon on the top left. And then scroll down. You can see my projects, but I can click on
Lovable templates, and I can click Browse all so you've got some really
great starting points. Depending on what type
of site you want, do you want a travel
content platform, bug submission form for IT, photography studio, vacation
rental marketplace platform? AI film production. So visual Lanning page
website template. Let's check out this
rental platform here. So you can click that. Select use Template. And this is what
we call a remix. So remix is basically taking an existing
project and naming it. I'll just leave it as this. Okay, read the disclaimer,
acknowledge and remix. So here we go. It's
creating a new project, setting up the integrations. And after this is done, we will have the
ability to start from out of the box and
customize it towards our liking. Really curious to see
what this one looks like. Okay, the remix is about ready. In the left hand side on the prompt, it's asking
me some question. What is your main goal
for this remix project? Are you building a real
product portfolio demo or learning the code base? Let's put let's
put real product. Next, what do you
want to tackle first? Branding and design, backhand integrations,
features and functionality. Let's select features
and functionality. Let's use existing
Lovable Cloud, submit And I'm going to go
ahead and just test this out. Valencia, I'm not sure if
this has any dummy data. So let's just test this out. So we actually get to
test and play around with this Vancouver Okay, so the prompt wants us
to answer something. Remove the demo, hard coding and demo count so the app can run on real users data and payments. Strip the demo specific emails. Okay. Well, I'm going to say, yes, yes, let's start there. Alright, so it's
neutralized the demo, and yeah, we can
continue to modify this. But I think you get the idea. We have a good starting point. We can test this out. We can add features. We can reset the admin accounts. And yeah, that's an example
of how we use a template. So I just want to show you if we want to remix an existing
project of mine. Okay, so this is one of my existing projects
here. Pickleball list. If I wanted to remix it, I would click into the top left. I would select
remixes as projects. I would give it a name. I would select if I want to include
the project history or not, and then I would start from
a fresh starting point. So we already covered a remix
when we use the template. I'll just quickly go to an existing remix because it
does take a while to remix. We're just going to this remix. And let's just see my
first prompts here. Okay, I've asked it to I remixed it because I wanted to give it
additional functionality. So I would add the ability to look up people
by their ratings. But another reason
why you would want to remix is maybe I want to
apply the same features, but to different sports. So maybe a golf listing
golf course listing, or maybe you want to
add a new feature, you just want to back it up. So, yeah, that's
how we can remix. So I'm not going to go
through the entire process, but what I will do is I'll
take my main af care, pick a ball globalist. I'll select remix. I'll call it golf list. So basically, I would let
it go through the remix, and then once I have the
ability to prompt it, I would just ask it to replace the data with golf courses
instead of pickleball courts.
6. Picklelist with lovable: This video, I'm
going to show you a pretty much completed vibe coded site
created with Lovable. And this is a Pickleball list. It's a global list of pickleball clubs and
courts around the world, and it has additional
information. So let's go to the main page. So it groups arts by country. It will display the top
player in every country. You can see the number of courts that's group
for each country, and there's different views. You've got the tile view,
we have the grid view, which is not group by country, and we have the map view. And then we have
additional filters, so you can search by ports
that are in a certain country. I can see that this
needs to be fixed here. But let's just type in a test. Thailand. And you can see here that I've set up
a user password database. So when you create an account, you have the ability
to submit a CORT. You can actually add a
new CORT to the list. And you can actually do a
review. You can add photos. I'm just going to
show you one where I tested adding a review. So here's the photo I added. So anyone with an account
can make a submission. You can also host games. And yeah, over here, you can create a game.
You can host games. And I want to make it a bit more social so
you can connect with other players
that you may not know. I've created an
inbox to interact with other players.
The profile area. You can actually
select your rating. See the RTs that you've added. And I've created an admin view. So the Admin can actually
approve submissions. Okay, so this is
the Admin account. So under the Admin, we can see any
pending submissions, all the approved ones. So you can see that I approve this photo for that
CRT, which is nice. Yeah, so that's the
picklelist app. And you can see the domain name is tennis pickleball dot Coach. Now, this is actually a subdomain of my
Pickleball website. Tennis to Pickleball and I've
created a link off here. And vice versa. Got
to refresh this. So this should also link
back to my website. When you click the logo. We'll have to publish
the latest iteration because I just made that change, so I would actually
have to publish it out. So let me take you
behind the scenes. Let me just publish
this last change here. So some key things to note, I use Lovable to
build this site. I'm actually using
a Worpress site just for my regular website. I created this WordPress
site on WordPress hosted by SCRUd so SiteGround is a hosting website that has been known to be very responsive, recommended by Gemini AI. You can see it's already
given me some stats, which is interesting because
I just created the site. So as it relates to
the actual domain. I actually had to
create a subdomain, list dot Pickleball Dot Coach. And then Lovable, once I
actually published out the app, it gives you the
ability to point your custom domain over to you can list it
to your subdomain. I'll give you the IP address. This was a little bit tricky, but it can also be accessed
from this URL here. So the process, let
me just show you the beginning on
Lovable's website. Let's just go back. You see, there's a lot of moving parts. I'll show you some of the key
prompts to create this app. Okay. Build a professional mobile responsive global
Pickleball directory called picklelist App. The app should allow users to crowdsource court
locations worldwide. Core features interactive map and search, crowdsource entries, allowing people
to submit a CORT, user profiles and
a verification. So we have a database. Users can add their
own profile reviews. And then so that sets up
the core, the first prompt. And what I like about Lovable
is that it'll give you some opportunities to make some choices after you
submit the prompt. So my next prompt was to
fix some of the issues. And then I wanted to
populate the directory with some actual
arts to begin with, because to get the ball rolling, you need some existing data. So I asked her to populate the directory with
arts in Canada using information on the
Internet. Which it did. And I'm familiar
with these courts, so the AI in Lovable
is smart enough to actually get some data
out on the Internet. And then I made minor changes, allow the user to pick
between Map and ListView. So I started to do some
testing on the app and notice some new
features I needed. So we allow people
to upload photos, and then populate
it with more data. And then I set up an admin account to
review the submissions. And then I populated more courts in United
States and Mexico. And then Just fixing up because I couldn't
view the photos after a submission was approved,
so they fixed that. And then I made some
changes to the tile. I wanted to list like
Internet speeds, cost of living because it's a destination pickleball site. And then the rest is just fixing things that weren't working. So here's the prompt to add additional information
to the thumbnails. Add additional metrics to the thumbnails for
pickleball destination, research like monthly
cost of living, current weather,
and Wi Fi speeds. So that is, I believe,
on the grid view. So you can see all that
key information there. And then set the default
view to be group by country, and then the top three
players in each country. Then I added a logo
header over here, and then you can see I just gave the ability to link
back to my websites, added a messaging area, the ability to host games. Yeah, that's pretty much it. So it's a process of getting your core
features, testing it, and then figuring out
what needs to be fixed, adding additional features, and just repeating the process. And yeah, the key final part here was to publish
it out to my domain. It's quite a bit of work to
get to a usable polish stage. But there's always little things that you may need to fix. But if we refresh,
we refresh this. The one feature I need to test is linking back to the
website, and that works. So there we go. So
that's using Lovable. So for Lovable, let's
just go back to the base prompt here so we can click click on the top left to go
back to the dashboard. So they're using GBT 5.5
and here's the main prompt. What I like about Lovable is it's easy to use. It's powerful. You can see your
existing projects. There are existing templates. So anyone really has
a good starting point to create a vibe coded
app, and as you can see, I've linked it to my
actual website where it just becomes just
like any other app, and yeah, that's using
WordPress and sit ground. So yeah, that in a nutshell is how I created the
picklelist using Lovable. Final thing I'll just share
with you is the actual cost. So I'm using the Pro plan. So I go to my M. I go to my plans.
I'm on the pro plan. So P plan is $50 US a month. And yeah, it's more than enough
credits to create this app. So they gave me 100
monthly credits, and you saw I've used up. I still have 84
credits remaining, and you can see
here the credits, they reset daily and monthly, and that's also something
that you want to be aware of. You want to try to create the app in the least
amount of credits, but you also want enough time to test and make sure everything all the
bugs are ironed out.
7. Publish app: So you're going to
reach the point where your app is ready to
share with the world, and this is where you
want to publish your app. You can test and preview
it yourself, but yeah, you need to publish it out if you want to share it
with the outside world. So the process is
to click Publish, and Lovable will
do security scans. I will give you the option
to do basic security scans, which is great because
vibe coding has often this has been a sore spot of different
vibe coding platforms. You'll then get the option
to publish it out to a lovable domain or a
custom domain which you already own I own several domains on
Namecheap and Go Daddy, and that's fine, and
Lovable does a great job of connecting to those platforms or giving you the instructions. I also own domains
on SiteGround, and there's a good integration
with Lovable there. So I recommend using Sight ground as a platform
for your domains, as well as websites. I use the platform to host
my WordPress websites. And it works well with Lovable. Now, one more thing is, if you want to save the code, you can do so by connecting it to a platform called GitHub. So GitHub is a platform where developers actually
they work with, they store the code in
what we call repositories. So once you're finished
with your Lovable project, you could actually
save the code there. Maybe you want to
resell your code as a template or share it
with a different team. So I'll cover how
to do that as well. You can also just share your project as a lovable
template with others for free, and I'll also show
you how to do that. You can also remix a project
that you've created. So creating a different
version of it, maybe you've created
a Pickleball list and you want to
create a golf list. I'll share how to
do that, as well. As long as you don't have a you're not accepting
payments using Stripe, you can remix a project. So with that being
said, let's get to it.
8. Saving to github: I'm going to share
how you can take your lovable vibe coding project
and sync it with GitHub, which is the platform
that you can bring the code for your project
and store it there, download it as a
zip file so you can share it with a
developer to continue to refine your project
or maybe you want to sell your lovable
template to someone else. So I've got my project
golf yard buddy. I'm going to hover over
on the left hand side. I'm going to click
the three ellipsis. I'm going to click Settings. So on the left hand side, under project, I can see Git. So I'm going to
click Git. I'm going to choose to sync with Git. And you can see
we are connected, and I can click this dropdown
to select View on GitHub. So GitHub is a completely
different platform. And under this code area, I can click that and
select Download ZIP. So what that does is I've got a completely contained
file or cyto files in the zip that have all the coding components that a developer would need
to continue working on this, or maybe they want to, like I said, use my template
off the lovable platform. So that's how we can save
our project to GitHub.
9. Conclusion: Okay, so this concludes our Lovable course
for vibe coding. It is July 2026, and Lovable has
improved their product. They've added more templates. They've added the
powerful connectors, which have allowed
you to connect easily to platforms
like Stripe to take payments to create apps that can create user
accounts easily. You can connect to Google Drive or
TikTok, using the connectors. And I've built some
pretty what I would say, pretty functional apps that I've actually published out to the Internet using this version of Lovable. I would say Lovable in past years. I would say Lovable in past years
wasn't ready for that, but I can see the
improvements you can now edit and create
from your app. There is the security scan,
and when you publish, there's tight integration with SytGround which I use to host
my domains and websites. So I'm excited to see
where I can take this, where you can take the
knowledge that you've picked up in this course to see
what you can create. As you can see, I've created
Pickleball list, TikTok portfolio. I created
the digital Drive store to sell my footage from my Google Drive, and
a whole lot more. So it's your turn
now to see what you can create with the skills
and your creativity. Good luck in your future
vibe coding journey.
Greg Hung, Travel Videographer
