Redesigning a Guitar Teacher's Website: From Generic Landing to Online Class Machine
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.
javiguitarra.comNext.jsReactTypeScriptTailwind CSSSupabaseCloudflare TurnstileVercelYouTube Embed1mo ago
Builder of firstcommit.io. I ship with AI and share the journey.
0 followers5 karmaJoined Feb 2026
Build This
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.
Requires First Commit MCP connected
How it was built
5 stages1
Landing Page Redesign
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 messages2
Taller de Triadas Workshop
Added 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 messages3
Supabase Contact Form
The 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 messages4
Client Feedback Loop
Continuous 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 messages5
Deployment and Fixes
Final 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 messagesComments
No comments yet
Builder of firstcommit.io. I ship with AI and share the journey.
0 followers5 karmaJoined Feb 2026
Build This
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.
Requires First Commit MCP connected
More like this
Building a Full-Stack ERP Intelligence Platform: From Legacy Database to CRM, Treasury & Cable Price Analytics
01mo ago
From Battle Royale Ball Pit to Marble Race: Building a 24/7 YouTube Shorts Game in Pure Pygame
01mo ago
Building a Real-Time Queue System for a Shop on a Raspberry Pi with a Touchscreen
01mo ago
Rebuilding a Dog Rescue Website from Scratch: Scraping, Crawling, and Modernizing Yankee Chihuahua Rescue
01mo ago
B
Building First Commit: A Platform Where Vibe Coders Share What They Build
04w ago
More like this
Building a Full-Stack ERP Intelligence Platform: From Legacy Database to CRM, Treasury & Cable Price Analytics
01mo ago
From Battle Royale Ball Pit to Marble Race: Building a 24/7 YouTube Shorts Game in Pure Pygame
01mo ago
Building a Real-Time Queue System for a Shop on a Raspberry Pi with a Touchscreen
01mo ago
Rebuilding a Dog Rescue Website from Scratch: Scraping, Crawling, and Modernizing Yankee Chihuahua Rescue
01mo ago
B
Building First Commit: A Platform Where Vibe Coders Share What They Build
04w ago