
Redesigning a guitar teacher's website from a generic landing page into a conversion-focused online class platform. A real client project built with Next.js, Supabase, and Cloudflare Turnstile — dealing with live feedback, RLS permission bugs, contact form spam protection, and constant scope changes.
Builder of firstcommit.io. I ship with AI and share the journey.
5 stages to follow
Paste this in your AI coding tool to build your own version, guided by the approach in this guide.
Build the project from this First Commit guide: 25f6aa00-abfd-4fb0-bfb7-50834de7abecNo source repo linked — follow the guide stages to build from scratch.
Created an entirely new landing page focused on online guitar classes as the star product. Backed up the original to a separate git branch. Built 6 new section components: hero with trust badges, class benefits grid, pricing cards (individual vs group), testimonials, and a contact CTA. The AI hallucinated student counts (1000+) and instruments (piano, ukelele) that were immediately caught and corrected. Client feedback came via WhatsApp voice notes in Spanish, requiring real-time adjustments to copy and structure.
~50 messagesAdded a new workshop page for an upcoming online course about guitar triads. Started by embedding a PDF, but pivoted to a fully styled page with the workshop content rendered as HTML. Added a highlighted red navbar link to draw attention. Multiple rapid iterations: PDF embed to styled page, add YouTube video then remove it, mark as 'coming soon' then activate it, adjust the launch date. Classic scope-churn from client feedback happening in real time.
~40 messagesThe contact form for non-authenticated visitors broke due to Supabase Row Level Security policies. Anonymous users could not insert into the messages table. Debugged by inspecting RLS policies, checking role grants, running migrations, and verifying the anon role permissions. The policy showed correct configuration but inserts still failed. Eventually resolved the permissions issue, but then hit Supabase email rate limits when users tried to register. Disabled email verification and added Cloudflare Turnstile captcha as an alternative spam protection.
~60 messagesContinuous back-and-forth with the client via WhatsApp voice notes and text messages. Adjusted copy, removed invented pricing, changed section ordering, toggled features on and off. Updated cancionero prices to 1.99 USD and pushed final changes.
~80 messagesFinal push to production: ensured all pages deployed correctly on Vercel, fixed the taller-triadas page to show workshop content without the coming soon label, verified contact forms worked for both authenticated and anonymous users, and set the workshop date to April 11th. Checked for any pending pull requests and merged outstanding changes. The site was live with the new class-focused landing, workshop page, captcha-protected contact form, and updated pricing.
~80 messagesNo comments yet
Builder of firstcommit.io. I ship with AI and share the journey.
5 stages to follow
Paste this in your AI coding tool to build your own version, guided by the approach in this guide.
Build the project from this First Commit guide: 25f6aa00-abfd-4fb0-bfb7-50834de7abecNo source repo linked — follow the guide stages to build from scratch.







