Vibe Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
Booking and Scheduling App
A production-ready booking app template built for non-technical founders using Lovable, Replit, or Bolt.new. Includes a public-facing booking homepage, service selection, date and time picker, booking confirmation, client dashboard, provider admin calendar, client list, and settings. Ships as a single copy-paste multi-file code block ready for Cursor, Claude Code, Codex, Lovable, Replit, and Google Stitch.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Vibe code the whole app with a prompt
Paste the prompt into your AI coding tool and it builds the entire Booking and Scheduling App in a single conversation. Each version is written specifically for that tool.
Build me a complete booking and scheduling app called Bookly. It should have a public-facing homepage with a hero section ("Book your next session."), a search bar, three featured service categories (Life Coaching, Music Lessons, Hair and Beauty) as cards, and a "How it works" strip with 3 steps. Then build a service browse page with filter chips (All, Coaching, Tutoring, Beauty, Fitness, Photography) and a 4-column grid of provider cards showing avatar, name, specialty, star rating, price per session, and a Book Now button. Add a booking flow: a date and time picker step with a monthly calendar and time slot pills, then a confirmation screen with a checkmark, booking summary card, and add-to-calendar buttons. Build a logged-in client dashboard with a sidebar nav (Dashboard, My Bookings, Saved Providers, Messages, Settings), an upcoming session card, stats (sessions completed, hours spent, providers worked with), and a recent bookings list. Build a provider admin view with a weekly calendar grid (Mon-Fri, 8am to 7pm) showing colored appointment blocks, a today summary panel, and a sidebar nav (Calendar, Clients, Services, Analytics, Settings). Add a client management table with search and status filter. Add a provider settings page with business info, availability hour toggles, services list, and cancellation policy toggle. Design system: white background, black text, small typography (like Apple or OpenAI), blue (#2B65F6) only on primary CTA buttons. Use Supabase for auth and bookings database, Stripe for payments.How to use this Booking and Scheduling App as a prompt
- Paste the prompt into Lovable, Replit, or Claude Code to build a complete Next.js booking and scheduling app with a public booking page, date picker, and provider admin calendar all wired together.
- Best for coaches, tutors, hair stylists, personal trainers, and freelancers who want to launch a white-label booking platform without paying for Calendly or Acuity.
- Ask Claude Code or Cursor to swap the auth provider (Supabase, Clerk, Auth.js), wire Stripe for payments, or extend the admin calendar to support group sessions and recurring bookings.
How to use this Booking and Scheduling App as code
- Copy the full multi-file code and paste it into a fresh Next.js 14+ project. Cursor and Claude Code split the file automatically using the // === filename === headers.
- Built on Next.js App Router + Tailwind CSS v3 + Switzer font. Supabase for auth and the bookings database. Stripe for session payments. No motion libraries required.
- Compatible with Supabase, Clerk, or Auth.js for authentication. Stripe or LemonSqueezy for payment collection. Vercel or Cloudflare Pages for hosting.
Sections inside the Booking and Scheduling App
Each section is its own page with a live preview, section-only code, and vibe coding prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Service Selection Screen
Booking app service browse screen for Lovable and Claude Code: filter chips and a 4-column provider card grid with rating, price, and Book Now button.
Booking Date and Time Picker
Booking app calendar step for Lovable and Claude Code: 3-column layout with service summary, monthly calendar with availability dots, and time slot pills.
Booking Confirmation Screen
Booking app success screen for Lovable and Claude Code: checkmark icon, booking summary card, add-to-calendar buttons, and "View your bookings" link.
Client Dashboard Screen
Booking app client dashboard for Lovable and Claude Code: sidebar nav, upcoming session card, stats tiles, and recent bookings list.
Provider Admin Calendar
Booking app provider calendar for Lovable and Claude Code: weekly grid Mon-Fri with colored appointment blocks, sidebar nav, and today summary panel.
Provider Client List
Booking app client management table for Lovable and Claude Code: searchable, filterable table with last session, total sessions, spend, and status badge.
Provider Settings Screen
Booking app provider settings for Lovable and Claude Code: business info form, availability hour toggles, services list, and cancellation policy.
Vibe coding guides
FAQ
How do I build a booking app with Lovable?+
Copy the prompt on this page into Lovable. Paste it as a new project prompt. Lovable generates the full Bookly booking app: a public homepage, service browse grid, date and time picker, booking confirmation, client dashboard, provider admin calendar, client list, and settings page. Connect Supabase for auth and the bookings table, then wire Stripe for session payments from the Lovable integrations panel.
Can I add Stripe payments to a booking app built with Replit?+
Yes. Install the stripe package in your Replit environment and store your STRIPE_SECRET_KEY and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY in the Replit Secrets tab. Create a Next.js route handler at /api/checkout that creates a Stripe Checkout session for the session price. Redirect the client to the Stripe-hosted checkout page, then back to /book/confirmation on success.
What database should I use for a booking and scheduling app?+
Supabase is the recommended choice for this template. You need three core tables: providers (business info, availability as JSONB, Stripe account ID), bookings (client_id, provider_id, service_id, date, time, status, meeting_url), and services (provider_id, name, duration, price). Supabase also handles auth out of the box and lets you set row-level security so clients only see their own bookings.
How do I prevent double-bookings in a scheduling app?+
Add a unique constraint in Supabase on (provider_id, date, start_time). When a client submits a booking, use a Supabase transaction or RPC that checks for an existing row with the same provider, date, and time before inserting. If a conflict exists, return an error and show an "This slot was just taken" message on the time picker screen.
Can I add video call links (Zoom, Google Meet) to bookings automatically?+
Yes. When a booking is confirmed (after Stripe payment), call the Zoom Create Meeting API or the Google Calendar API with Google Meet enabled to generate a meeting link. Store the URL in the `meeting_url` column of your Supabase bookings table. Surface it in the client dashboard upcoming session card and in the confirmation email.
How do I build a recurring booking feature for a coaching app?+
Add a "Repeat weekly" checkbox to the date picker step. When checked, show a duration selector (4 weeks, 8 weeks, 12 weeks). On confirmation, insert one booking row per occurrence into the Supabase bookings table. All rows share a `recurring_group_id` so the provider can cancel or reschedule the full series at once from the admin calendar.
Is this booking app template free to use commercially?+
Yes. Every component, code file, and prompt in this template is free to use in commercial projects with no attribution required. You can build and sell a SaaS booking platform using this template, use it for client work, or adapt it for an internal scheduling tool. The code is yours from the first copy-paste.
How do I deploy a Next.js booking app to Vercel?+
Run `npx vercel --prod` in your project directory, or connect the GitHub repo to a Vercel project and push to main. Add your environment variables (NEXT_PUBLIC_SUPABASE_URL, SUPABASE_ANON_KEY, STRIPE_SECRET_KEY, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) in the Vercel project settings under Environment Variables. Vercel deploys the Next.js App Router app with ISR and Edge Functions automatically.