Transcription
Over the last 12 months, I've built a ton of projects using Lovable: landing pages, a golf booking platform, and a ton of personal projects that will never see the light of day. So, I thought I would share some of the things that I wish I knew a bit earlier, some pros, cons, and little tips and tricks that will help you get better results while using Lovable.
Now, before we jump into pros and cons, I thought it might be useful to see some of the things I've been able to build in Loveable just to give you a sense of what is possible.
So, firstly, this is a landing page that I built in Lovable. It was very quick and easy to build. There's nothing too special going on here. You can see it looks nice and modern. It works. It fulfills its purpose. Nice and easy.
A little bit more ambitious was this project. So, this is a golf booking platform. And this is pretty complex. We've got a superb base database behind the scene. Um there so people can go and book a tea time. You can sign up as user. We've got a kind of a user CRM going on. We've got reporting. We've got an email marketing platform. And all this actually works. This triggers emails to the users via resend. This is probably the most complex kind of vibe coding project that I've built. We've got user authentications. People can sign up, sign out. So, this I think is kind of an interesting example. Oh, and yeah, integrations. We've got a functioning Google Calendar and Outlook calendar integration, which was blew my mind. So, that to me is kind of I've not built anything kind of more complex than this, but this is pretty phenomenal. When I used to have a team of developers that to get to this point I think would have been kind of easily sort of three four months of development work to to get here.
So one last example, this was just a fun one that I built for a friend. This is the Hyrox race analytics tool. So you pop in your race URL and click analyze and then it shows you some stats about your race and how you might train to improve your race times.
So I share these just kind of give a little bit context to some of the pros and cons that I'll now talk about.
So firstly, the main pro for me with lovable is that it actually works. You can just in the sense that when I've tried to build things with bolt and replet I don't think they would always get this far. They sort of get to a point where the complexity crosses a threshold where it then becomes very buggy and cumbersome to try and actually get it working. So for me, nine times out of 10 with loveable, you can take an idea and you can actually get it working in the way that you imagine it.
It also looks great. I think the reason for these last two points, why it looks good and why it functions generally pretty well, is because Lovable has quite a tight and opinionated tech stack. Everything seems to be built in React and Vite, which has its limitations and makes it a poor choice for some projects, but it also is kind of a set of guard rails. Whereas with some of the other VI coding tools, it can build in any framework, any language, and that sort of can make it more prone to to errors and bugs. Love is a little bit more constrained. But where that sort of shines is that because it's using frameworks like Tailwind a lot all the time for styling, it looks really nice and it just works and it's not too buggy. So that's kind of my the main reason why I I like using lovable. I find it a lot more stable than replet vo and just faster to get something good actually works.
A few other things worth kind of shouting out about. The superbase integration is super super smooth. GitHub integration as well. It just works where I've again like in bolt I've tried to set up a super base integration and just chase my tail for kind of a couple of hours whereas with this one it's literally a couple of clicks and you've got a database and it actually works. GitHub again, there's a few bugs. I find the branch switching has some issues on lovable but in general pretty smooth. I would say something to be mindful of with GitHub integration for this kind of thing is every single every single chat dialogue that you send is going to be a commit. So after about a week building that golf platform I had about a thousand commits and trying to kind of then make sense of that or becomes pretty much impossible. So your choice whether you'd want it to connect GitHub early and have this kind of mess of what's going on or whether you want to just kind of vibe code it to a point then put it on something like it and then work with a developer. Kind of up to you depending on on where you land on that. But that's kind of I think in terms of the the good, it's it's just pretty functional.
So in terms of the cons, I've mentioned one already which is the limited text stack. Another aspect of that, particularly if you're building landing pages, is that lovable has a bias towards building what's called a single page web app. Essentially, this you can think of this as a onepage website. So the URL doesn't actually change, but if you go to different pages, you're still kind of on the same same URL. Now, there's a lot of good reasons for doing that, but there's a pretty massive downside, which is that that is quite a poor choice from a crawlability and findability perspective. It's a bit debatable how important SEO it being discoverable is now given that more people are shifting to LLMs. However, I personally want my website to be quite lean and quite crawable and indexable, whether that's by a search engine or an LLM. So, I like using Lovable for quick landing pages like this where it's a single page. I'm not worried. Maybe it's a new project. I'm not too worried about search at this point, but I wouldn't necessarily be comfortable using Lovable for, you know, a 100page website where I care about sending traffic to to deep pages. I think it's yeah, it has more limitations than than benefits for that. I would think of lovable as a way of get a website up and running, but at some point you will want to shift over to something like Framer or Web Flow where you've got a bit more control.
Now, probably the biggest con with lovable is a con that it shares with virtually every vibe coding tool, which is it gets really buggy after a certain point. So I think I would almost sort of say like I find with Bolt and Replet and the other tools that maybe it's sort of a hundred messages or like a week worth of vibe coding before you hit the wall where you just spend more time trying to debug and hit like rebuild try again than actually making progress. With lovable, it's a little bit maybe it's two weeks, maybe it's 300 messages. It's a bit arbitrary, but because of those guardrails, you can build for a lot longer in lovable without hitting those roadblocks. But it does get buggy. You can see from like these GitHub commits that I get to a point where more of my messages are about like adding login or fixing errors and resolving issues rather than actually building functionality.
So, this leads me on to a couple of tips and tricks that I think will help you get more out of Lovable.
So, the first thing is to have a really good starting prompt because as with any project, where you start is going to set the trajectory for the entire project. And being one degree out will mean that a 100 prompts later, you'll be a mile apart from where you could be. So getting that initial prompt as good as you possibly can is going to make a huge difference in the long run. The prompt that I use to to start projects with changes every now and again. So rather than me sort of share it here, I will drop it in the description below and you can use that. But you can also create your own and maybe go to something like Claude or GPT and work with it back and forward to refine your prompt before you then drop it into lovable. But I'll share what I start with. You can then use that for inspiration if that's useful.
Related to that, and this is probably my biggest tip that I would recommend specifically with Lovable is refactoring prompts. So, Lovable don't really promote this, but they've got this article from earlier in the year, which is their prompting bible, and this article is amazing. They've actually got a newer one now, but this this one, this is an old one, and I think it's actually better. So, they've got all these prompts they recommend for refactoring. Refactoring, if you're not aware, is basically like taking something that has been built quite messily and tidying it up. And the reason that's so important is because if you don't tidy, the code just gets bloated, crowded, has lots of bugs and ends up, you know, you have one file that's got thousands of lines in, and so you break one line, it breaks the whole thing. What you want to be doing is breaking those files and that code up into lots of little pieces so it's more modular, more manageable, and then you don't have as many bugs and the whatever you're building becomes more stable. So, we want to do refactoring. It's really, really, really important. So, these prompts are really helpful. There's a really good one that I like, which is basically like I can't remember which one it is, but it's basically like create an a refactoring audit of my codebase and tell me what things to refactor in order. I think it might be this one, number three.
Now, rather than having this saved and constantly copy and pasting, which I did for months, my next tip is to install a text expander. So, you can get these free text expander Chrome extensions. And basically what it means is if you type in the word like p refactor, prompt refactor, it replaces it with this prompt. So, I think I've got it installed. Let me see if I type in like p refactor. Maybe that's not it. or like P code review. Maybe it's not working. But in theory, you type that in and then it basically replaces. I think maybe this will work. Yeah, I got things like that where you just type it in and it replaces it. So, this is going to save you a huge amount of time and just constantly keep your code refactored and nice and clean.
A few little things inside the lovable UI that are useful that I embarrassingly didn't find out until quite long quite long after using it.
So firstly is knowledge. So in the settings there's something called knowledge. This is a really good place to put things like your coding standards or any information that you want to basically added to the context for every message that is kind of going between you and lovable. So yeah things like coding style preferences, documentation style guides, that sort of things. I find style guides is a really important one because otherwise you end up with like 50 different shades of green in your app. So saying like all green needs to be this hex code. That will just help kind of keep keep things nice and tidy. So that's knowledge.
The next thing is using this. So often you will type in things like I like you know maybe change this heading title and then it will go and change a different heading title. So what you can do is just click this and then this allows you to select the item that you want to change and then you write your prompt. Really simple thing but just helps kind of with a bit more precision when you're trying to make changes.
And lastly, code. So, they've made this a bit more obvious now, but I it took me a while to find it previously. So, up here, let me choose a different one. Up here, you can click this and I'm not on the paid account at the moment. Oh, no. Yeah, we go. So, you can go in here and you can actually then just go and make changes directly. So for things like text changes in particular or little kind of CSS things where you don't want to use up your credits asking Lovable to make those changes, you can just go in and directly directly make those changes.
So yeah, if you have any questions about Lovable or if anything here wasn't clear, feel free to drop them in the comments. And yeah, hope that was helpful. Cheers. Bye.