I Built a Vibe Coding Community Site in One Night — Here’s How

Foreign.

This is Molly Mueller with Watch Me AI and last night I had a zillion things to do, but I ended up spending the whole night Vibe Coding, a community site for vibe coders. And I thought I'd talk you through how I did it. So this came about because for some reason I decided to go to vibecoding.com I think I was just curious, like, who owned that? So I went to this site and it redirects to a LinkedIn post, which I thought was really interesting. And when I was reading the comments on this LinkedIn post, they were all about community. So people saying, I love vibe coding. We need more communities where we can learn from each other and discuss this. And I really did have a zillion things to do last night, but I was like, yes, we need more community. I. I could build something like that. And so I hopped into Lovable into Lovable and started building a community called Here for the Vibes. My goal on these recordings is always to show you just how easy it is for anyone, especially people with zero technical skills, to build a product or a website. So I'm going to walk you through how I built this platform in a couple of hours. So to start, I had this idea and I opened up ChatGPT to be my thought partner in getting a good prompt for Lovable. So I just threw in some thoughts to ChatGPT. I said, I want to create a website that acts as a community page for Vibe coders everywhere. A core component of it should be subgroups or clubs organized by function, interest, sector, etc. Like in business school where you have 100 plus clubs. Side note, so nerdy. I was the student association president in business school and also the year before that the clubs officer. And so I have a special place in my heart for clubs. But really I deeply believe in the idea of small groups to build community places where we can come together with over shared interests or where we're from or career paths that we want to take. Because I think it really helps to build community when you can connect with people who have similar interests as you. Anyway, I thought, okay, there should be one of these for vibe coding because there's so many interest groups within virtual vibe coding. So I put that in and then I said it should be clean, slick, easy to understand and get value from right away. It should include a showcase of cool vibe coded products. Because I think it's really important with new technology like this to show all of the different things that people are using this, this technology for. Please write a prompt For Lovable to create this and you what you can add here is write a prompt in plain English, Chat GPT already knows that I like that, so I didn't have to do it here. So it's given me a prompt that I can just paste into level. So it's saying create a sleek modern community website for Vibe coders. The site should include Hero section, club directory, showcase section, optional extras, and then it's got overall style notes here. So I just took this whole prompt and I copy pasted it into the Lovable starting screen and Lovable got to work. So this is now, you know, a couple hours in. I didn't take a screenshot of the first iteration, but the first iteration was really good. Not dissimilar from what you're looking at here. And so I got that first iteration and it looked, I would say it looked a lot like this, but the buttons weren't working yet, which is typical in a first pass from Lovable. There were some. We're still having a little bit of glitching on the spacing. There were just as I scrolled through, there were a lot of things that I either needed to change or I wanted to add or functionality that I wanted to build. So in my case, I love that it immediately included a sign up form for a newsletter because I'm getting more into newsletters and just feels like a great way to bring to build community and bring people together. So I actually think I started with this newsletter section. Let me just check what I did first.

I connected my Supabase project. So side note on Supabase, if you're new to using Lovable or Vibe coding, I still don't really understand Supabase that well, but enough to be able to integrate it because Lovable does it for me. So Supabase is like the database that stores the information behind your site. And I had already created a Supabase account when I started playing around with Lovable. You can too. Lovable walks you through it. It's really easy if you don't. If you get stuck at any point, just ask ChatGPT or Claude or Lovable how to get unstuck. But basically you create that Supabase account and here's this one. I'll show you what it looks like. This part looks a little scary and technical. All I do is I go into this table editor. Oh my gosh, I already have some signups. That's exciting.

And now I have a table in here for club memberships for no one's supplied to be A leader yet. No one submitted a project submission yet. So anyway, this is where we store things like signups for the newsletter. So back in Lovable.

I connected my Supabase, which Lovable walked me through. It's easier than it sounds. And then let's see what I did next.

Oh, this. Okay. So then I wanted to connect Kit, which is a newsletter marketing product that I use to send newsletters. I wanted to connect my Kit to this. And so to do that I went into Kit. I can show this in a different video if you're interested. And it's really easy, I promise. I created basically just a really simple form that says email address and join the Vibe. And then I took the embed code again. Sounds harder than it is. It's just a copy paste straight from Kit into Lovable.

And that enabled Lovable to use my Kit form. So people, when they sign up on my Lovable site, their sign up goes through Kit and they get added to my newsletter there. And because I wanted it to look okay, I asked Lovable what the font name that we were using on this site was and what the colors were. And honestly, Lovable did not have a good answer for me on that. It was kind of annoying there, but I just got over it because it's not. Not important for a prototype. So I just went with what Kit had.

Then I. So here's the code that I got from Kit for.

To make this newsletter function. I ran into a couple hiccups. I always. This always happens with Lovable when I try to embed the Kit signup form. Oftentimes I don't see it right away. If you get into a problem with Lovable, tell Lovable what the problem is. I just said, I don't see it. I did this using the chat feature so that I wasn't using Credits, which, side note, I think might be a topic for a different day. And Lovable is like, oh, let me figure out why you're not seeing it. So it goes off and it does some diagnoses and it comes back with a plan to fix it. And I just click implement the plan and then it goes off and does some more work. And then I want to show you how I built out this section next. So this is my gallery wall of inspiration. It's called Built with Vibes. And again, the goal of this was to showcase cool things that people were building. And I was inspired by my ideo friend Akshan, who had just been written about in Lenny's newsletter for his product called Storypot, which is A really fun way to get your kids involved in telling stories at bed. And so I wanted to showcase products like auctions. And at first I was like, oh, it's gonna take a lot of work, I gotta go find them. And then I was like, wait a second. Lenny, this famous product newsletter guy, literally just did this for me. He wrote a post with 50 cool things that people are vibe coding. So here's what I did. I went to Lenny's substack post, I got the LinkedIn URL or sorry, the URL for his post and I put it into ChatGPT. So I took the format that Lovable had given me in its first pass at this website. So Lovable had designed it in my site to look like this for showcasing these ideas. So it had a title and a summary and a built by. This is all fake data, the tools used in View Project. And I was like, okay, I like that format here, so let's get some real data for that. So I said, can you take all of the examples mentioned in this blog post and give me the content in this format so that I can put it into Lovable? And I gave the link to Lenny's newsletter, what people are vibe coding and actually using. And ChatGPT did a beautiful job of that. And it came back with all of those ideas from Lenny's newsletter in the format that I wanted. So I needed to ask it one more time to actually give me the URLs. This is a lot of. There are a lot of things here. So I actually, I picked the six that I wanted to showcase and I kind of got the data that I needed and I threw that into Lovable. And I said put that in in this format here. Which it did. It took a couple, you know, back and forth. What I have yet to do, and I'm so sorry to these creators, is these are currently placeholder images that are not their actual product. It's not going to take me a lot of time to manually find images and put those in. I just haven't done it yet. So I'm really sorry. These images suck and they're not representing your product very well at all. And I will fix that slash. I'm trying to think of a automated way to get those images. So far I didn't figure out how to do that in Lovable. If anyone has ideas, let me know.

Okay, pausing there. That's how I did this Built with Vibes section. Then let me show you what I did for the club directory because this is really what I think is the heart of this community is these different clubs or chapters. So Lovable actually came up with these examples on its own own. And at some point I'll go in and, you know, make these real and come up with examples that are probably based on what I want to see here, like, you know, Seattle and women and topics I love. Like that.

But I thought this was a pretty good start. So I think what I changed here is.

I built a form. So I said add a form so that when people click Join Club, we collect their email and then when they put in an email and hit Join Club and you get a message saying, thanks, this is a prototype, we'll let you know when it's actually real. And that is where people's data flows into this back end database. So I can see who signed up and what club name they've signed up for. And then what I really wanted to do was have an option for people to start a club because that's. I'm going to understand who's excited about this community and why to help me build it. So I created, I told Lovable to create a button that would lead to a form for Start a Club and just put in some fields in here. And when they hit submit, that information now flows into my Supabase database also.

All right, I think that's basically as far as I got last night. The last thing I did before I hit publish. Oh no, I gotta tell you about domains. Okay, one, the last thing I did before I hit publish was I added this prototype line up here. Because this is just a prototype, I built it really quickly and it's just a test to see if this is something that people want. So I threw this up here to kind of say, hey, a lot of the functionality on this is not yet working. Like for example, none of these go anywhere yet. But if there's interest, I will keep building it. Okay, final thing is I will tell you what I did for the domain because I did quickly get a domain for this and it is live and you can go check it out. This is the domain here for the vibes.dev.

So what I did here is I went to my favorite domain provider, which is called Pork Bunch. And in Pork Bun you can come in here and then this is just a search where you can put in the URL that you want and see if it's already taken, how much it costs and other URLs like it. So in this case, I think I started with just something like this because I was curious. So it's going to show me that vibecoding.com is registered. And here are a bunch of different iterations that are available. And these are looking really expensive. I typically try to keep it around 15 bucks or less when I'm buying new URLs. So after some searching, I figured out there wasn't a ton available for Vibe coding. I think some people have beat me to it. So I ended up figuring out that I could get herefor the vibes.dev I think it was like five bucks for the first year. So I purchased that. And then in Lovable, you can come in here and.

Set up a custom domain and I can walk you through that in a different video. It's pretty easy, especially if you use Pork Bun. It's actually already some sort of integration, so it happens pretty automatically. And once you have that set up, then you're publishing both to your Lovable site, which could be all you need, but also to a real domain. And that's how easy it is. Now, with a Vibe coding tool like Lovable to build your own website or product, you literally just talk to it, like you talk to ChatGPT and you work with it and you ask it when you get stuck and you get really cool products and websites like this. So hopefully that was helpful. Love recording content like this. Let me know what else you want to learn about and let me know what you Vibe code.