🎧Vibe Coding Club Website

Vibe coding websites in theory should be easy. There are millions of websites that companies can use as a knowledge base. It should be as simple as 1, 2 and 3.

My 2025 experience vibe coding websites is that the initial build goes well but once I start vibe coding anything complicated like a database or authentication it starts getting tricky.

You need to be as good a tester as a builder to test what works and doesn’t. They all look relatively the same too and had a vibe coding feel to them.

It felt early and reminded me of building my first website in 4th year of college a student forum which local shops could advertize. I just felt it should be so much easier.

After I left college I found out it was when I discovered wordpress. I have had a similar moment today vibe coding my triathlon clubs website. More importantly it didn’t still require a design degree or fancy template to build something slick in minutes.

Triathlon Club Website before

A triathlon club website needs a few things:

  • Information on training programs, coaches, locations, contact us
  • Information on how to sign-up to membership

The current website had this already. The club is using PayPal as payments for training programs but its a link out and clunky.

I added a few other items on my wishlist just to see what it came back with in terms of race results and pages.

So I started creating a plan and my first prompt was simply:

From there it created a plan, which produces the following PRD document:

Product Requirements Document: Perth Tri Club

Intent & Goal

A modern rebuild of the Perth Triathlon Club community website (perthtriclub.com.au). The goal is to replace the outdated site with a warm, welcoming, community-focused web app that makes it easy for visitors to learn about the club, for members to register and manage their profiles, and for admins to manage all content. Success means a site that feels alive, trustworthy, and easy to navigate for both new and existing members.

Audience & Roles

Two roles: (1) Public visitors β€” can browse all public pages (home, about, coaches, training, events/race calendar, news/blog, sponsors, contact, membership/payment info). (2) Club admins β€” authenticated users who can create, edit, and delete all content: events, race results, news posts, training schedules, coaches, sponsors, and member records. Members register via the site and have a basic profile (name, contact, membership tier, join date).

Core Flows

These flows must work end-to-end:

  1. Public visitor lands on homepage β†’ reads about the club β†’ browses upcoming events/race calendar β†’ clicks ‘Join the Club’ β†’ fills in registration form β†’ selects membership tier β†’ pays online β†’ receives confirmation
  2. Public visitor browses News/Blog β†’ reads a post β†’ sees related upcoming events
  3. Public visitor views Training Schedules page β†’ sees weekly sessions by discipline (swim/bike/run) β†’ sees coach info
  4. Public visitor views Race Results β†’ filters by year/event β†’ sees athlete results table
  5. Admin logs in β†’ navigates to admin dashboard β†’ creates/edits/deletes: Events, Race Results, News posts, Training schedules, Coaches, Sponsors β†’ publishes content live
  6. Admin views Members list β†’ sees all registered members with their tier and status β†’ can update member status

Technical Requirements

Online payments for membership fees (Stripe integration or similar). Member registration form with tier selection (e.g. Adult, Junior, Family, Social). Admin-only content management (protected routes). Entities needed: Event, RaceResult, NewsPost, TrainingSession, Coach, Sponsor, Member. All pages from current site to be rebuilt: Home, About, Coaches, Training Schedules, Race Calendar/Events, Race Results, News/Blog, Sponsors, Contact, Payment/Membership Options.

Design Preferences

Warm & community feel β€” friendly, approachable, and active. Use a palette inspired by the WA outdoors: warm coral/orange accents (#E8632A or similar), clean white backgrounds, deep navy for headers/text. Generous photography sections (hero with action shots, coaches grid, sponsor logos). Rounded corners, soft shadows, open typography. Navigation: sticky top bar with logo + links + CTA button (“Join Us”). Homepage sections: Hero β†’ About snippet β†’ Upcoming Events β†’ Latest News β†’ Coaches β†’ Sponsors β†’ Footer. Avoid cold/corporate aesthetics.

Triathlon Club Website after 2 prompts

It was a pretty epic first attempt. Grabbing images and content off the old website.

Vibe coding website bullseyes

  • Reused a lot of same imagery. Homepage was nearly perfect straight first attempt
  • It combined the 5 training program pages into one cohesive page
  • About us is simple and easy to understand. It took long blurbs of texts into easy to read bullet points.
  • Coaching fees and payment options were extremely user friendly

Vibe coding near misses

  • Didn’t have the club logo
  • Got colour coding wrong using a orange
  • The facebook link in footer was to Perth Triathlon Club in Scotland which makes me wonder did it google search and find that cause no link on website but it is mentioned
  • Change some generic imagery used but it was minimal mainly a swimming image which I wonder was it somewhere on old website.

It mainly was able to use/learn from any plain text on old website. Images such as training schedule it missed. Also, had to upload couple new images such as coach faces but it resized and made them all look consistent.

These were simply fixes and I quickly had a polished version of the website:

Avoid unintended ai edits

I wanted try push it a step further but first I froze the pages that are now “finished”. This is an amazing simple but effective way to avoid ai edits which are ridiculously annoying…

I didn’t add any custom instructions here and only found freeze feature after but didn’t run into any issues. It seemed to tell the pages I wanted to edit.

Vibe coding a Membership feature

The club uses a booking app to track attendance and ensure members are paying appropriately. I feel like this creates more admin that it works and doubt the coaches are using it as a metric either and just relying on trainingpeaks data.

This was going bring a lot of complexity

  • 3 different types of users (club admin, coach, member) roles and permissions
  • Managing training programs and subscriptions
vibe coding membership website

It very quickly and easily built out the key features, roles, permissions and pages to enable membership. What seemed complex was made look easy.

Vibe coding technical stuff made simple

Previous apps I have built used supabase as my database. Relatively simple but the app seemed to forget sometimes what the data model was and would ask and I would blindly agree to making SQL changes just to speed things up and make my website look like it worked.

What I really like about this tool is that it does it all inhouse and is easy to see for non-techies and techies.

You have preview (the website), dashboard (users, data, growth, automation etc) and code for those inclined.

Same for authentication it does it all for me I just toggle on or off:

Vibe coding Security & cyber risks

They understand the importance of security and have the critical certificates that you need to ensure your and your users data is secure:

In the dashboard section you can run a security audit and even better has a fix all button:

Team behind this vibe coding tool non-techies

Its built by team at Wix. Wix powers over 8.5 million live websites, with over 270 million total registered users. As of late 2025, Wix holds roughly 3.8% of the website builder market share. 

The platform is called Base44 and is designed to be user-friendly and accessible to non-technical users, enabling you to create powerful applications through simple conversations with our AI.

What they have built is amazing so easy to use.

They have a free plan and if you can use my link here I will get a referral commission thank.

What’s included in the free plan?

The free plan gives you a daily allowance of 5 messages and a monthly cap of 25 messages total. You also get 100 integration credits to experiment with various integrations like authentication, database, and analytics.

With the free plan, you have access to all core integration types, allowing you to build fully functional applications with user authentication, data storage, and more – all at no cost.