I’ve actually been the customer in this story.
A few months ago, I went kayaking through the mangroves of Langkawi, Malaysia. The experience was great, but everything was managed through WhatsApp: bookings, personal details, dates, participants, and weather updates.
Even the tour photos were shared through AirDrop. If your phone was out of battery or didn’t support AirDrop, you could miss them completely.
So, for the Lovable Challenge, I rebuilt the experience for Xtreme Langkawi, a guided mangrove kayaking business.
The idea was to bring everything into one simple system.
For customers:
→ Choose Easy, Medium, or Extreme\
→ Select the number of participants and single or double kayaks\
→ Choose a time\
→ Add WhatsApp and/or email\
→ Pay a 10% deposit\
→ Get a booking code to manage the booking and access tour photos
For the owner, everything lives in one dashboard: bookings, participants, payments, and contacts. Weather-related cancellations can also be managed centrally, with all participants ready to be notified.
I also went all-in on the visual side, with a palette inspired by the mangroves and the orange accent color of the life jackets:
• 100% built in Lovable\
• Mobile-first and responsive\
• WCAG-conscious palette\
• Custom low-poly 3D assets, animations, and lighting\
• Logo created in Lovable\
• No external assets created outside Lovable
I’ve attached a walkthrough of the booking flow and dashboard, with the booking flow shown in both desktop and mobile, along with a behind-the-scenes look at the custom pages I created specifically for the 3D assets. Some of the things shown there made it into the final product, while a lot of them didn’t 👀
The website is presented as a demo, so all bookings, customer data, payments, and other information are fictional. I also didn’t connect external APIs or add-ons such as WhatsApp for the demo. Those integrations would be connected in a real-world implementation.
I also signed up for the Lovable Program and posted on X :)
1
63
Exploring the visual identity for my first Framer template. I really like this combination of cool and warm colors, so I might follow this direction :)
4
4
324
One thing I’ve learned from vibecoding: don’t break what already works.
When I’m building a new feature, I usually create a separate test area instead of modifying the live version directly.
If the current version is v3, I’ll experiment with v3.1 there first, test it, iterate, and only move it into the main app once it’s stable.
For bigger rewrites, I keep both versions locally and compare them side by side. The old one stays untouched while I work on the new one.
It’s a simple workflow, but it saves me a lot of headaches when AI starts losing context.
There are many ways to approach this. This is just the one that works best for me.
What’s your workflow when building with AI?
2
4
248
Exploring how the background subject adapts to resizing, maintaining its focus and composition before the UI elements come into play.
If you’re big on the details too, drop a like :)
0
77