Building a Reservation System with AI (No Coding Experience)

Problem

Required Tools

Solution Steps

# Claude Code installation command (paste in terminal):
npm install -g @anthropic-ai/claude-code

# Verify installation (also enter this in terminal):
claude --version
# -> If a version number appears, it worked (e.g., 1.x.x)

# Run Claude Code:
claude
# -> If "Welcome to Claude Code!" appears, success!
# -> Follow the instructions to connect your Claude account.

# === Prompt to Send to Claude (paste in the claude.ai chat) ===
# Modify only the shop information below to match your own.

"Based on the following shop information, organize a design for an online reservation system.
I'll use this design to build the actual website later.

Shop Information:
- Shop Name: Bloom Hair Salon
- Phone: 555-123-4567
- Address: 123 Main Street, Suite 4

Business Hours:
- Tue-Sat 10:00 AM - 8:00 PM
- Lunch break: 1:00 PM - 2:00 PM (no bookings)
- Closed: Sunday, Monday

Service Menu:
- Haircut: 30 min, $15
- Perm: 120 min, $80
- Coloring: 90 min, $60
- Treatment: 60 min, $40

Booking Rules:
- 3 stations (up to 3 concurrent appointments)
- 30-minute booking intervals
- Minimum 2 hours advance booking
- No same-day cancellations

Information Collected at Booking:
- Required: Name, phone number
- Optional: Special requests

Organize this information and show it as a configuration file."

# Claude will neatly organize your shop info.
# Keep this handy - you'll use it in the next steps.

# === Prompt to Send to Claude (paste in the claude.ai chat) ===

"Build a hair salon online booking calendar using Artifacts and show it to me.
Build it with React.

Shop Info:
- Shop Name: Bloom Hair Salon
- Business Hours: Tue-Sat 10:00 AM - 8:00 PM
- Lunch Break: 1:00 PM - 2:00 PM (no bookings)
- Days Off: Sunday, Monday
- Stations: 3

Service Menu:
- Haircut: 30 min, $15
- Perm: 120 min, $80
- Coloring: 90 min, $60
- Treatment: 60 min, $40

Feature Requirements:
1. Service selection buttons at the top (4 menu items)
2. Monthly calendar (previous/next month navigation)
3. Show available time slots when a date is clicked
4. Past dates are not selectable (grayed out)
5. Days off (Sun, Mon) not selectable (grayed out)
6. Show booking form after time slot selection (name, phone, special requests)
7. Booking summary popup on confirmation

Design:
- Clean and modern design
- Responsive for mobile devices
- Available times in blue, unavailable in gray
- Selected service highlighted with blue border
- Prices displayed in dollar format"

# [Example modification requests]
#
# "Also show date, time, service name, and price summary on the booking form"
# "Make the confirm booking button bigger and more noticeable"
# "Increase the overall font size a bit"
# "Add a 'Lunch Break' label for the 1:00-2:00 PM time slots"

# Navigate to project folder (paste in terminal):
# Windows:
cd Desktop\my-reservation

# Mac:
cd ~/Desktop/my-reservation

# Run Claude Code:
claude

# === Prompt to Send to Claude Code (paste after claude is running) ===

"Build a hair salon online reservation system from scratch with Next.js in this folder.

[Project Setup]
- Next.js + TypeScript + Tailwind CSS + App Router
- Project name: my-reservation

[Shop Info - Create as a config file]
- Shop Name: Bloom Hair Salon
- Phone: 555-123-4567
- Business Hours: Tue-Sat 10:00 AM - 8:00 PM
- Lunch Break: 1:00 PM - 2:00 PM
- Days Off: Sunday (0), Monday (1)
- Stations: 3
- Services: Haircut (30min/$15), Perm (120min/$80), Coloring (90min/$60), Treatment (60min/$40)
- Minimum 2 hours advance booking, no same-day cancellations

[Pages to Build]
1. Main page (/) - Booking Calendar
   - Service selection -> Date selection -> Time selection -> Booking form
   - Days off and past dates not selectable
   - Lunch time slots show 'Lunch Break' label
   - Already booked times grayed out
   - Automatic consecutive time slot check based on service duration

2. Confirmation page (/confirmation)
   - Booking summary (date, time, service, price)
   - Booking number display

3. Admin page (/admin)
   - Password protected (default: admin1234)
   - Today/this week's booking list
   - Booking status changes (confirmed/cancelled/completed/no-show)
   - Date-based booking overview calendar

[Design]
- Clean and modern design
- Mobile optimized (most customers use smartphones)
- Touch-friendly buttons (minimum 44x44px)
- Input font size 16px+ (prevents iOS auto-zoom)

[Data Storage]
- Use localStorage for now (for testing)
- Separate data access functions so we can switch to Supabase later

Create all files and install required packages.
Make it so I can run it with npm run dev when done."

# === Design Modification Prompt Examples (enter in Claude Code) ===

# Change colors
"Change the overall color scheme to pink (#E91E8C).
Make buttons, selected indicators, and headers all match."

# Adjust font sizes
"The text is too small on mobile. Increase body text to 16px,
headings to 20px, and button text to 18px."

# Improve booking form
"Add automatic phone number formatting to the booking form.
Make hyphens auto-insert in 555-123-4567 format."

# Improve confirmation screen
"Show booking details in a nice card format on the confirmation screen.
Include date, time, service, price, and customer name."

# Improve admin page
"Show today's bookings in chronological order on the admin page.
Allow changing each booking's status to 'confirmed/completed/cancelled/no-show'."

# Update shop info (replace with your actual shop info)
"Change the shop name in the config file to 'Beauty Hair',
business hours to 09:00 AM - 7:00 PM,
and update the service menu to:
- Women's Cut: 40 min, $25
- Men's Cut: 20 min, $15
- Digital Perm: 150 min, $120"

# === 1. Ask Claude to Generate SQL (paste in claude.ai) ===

"Create SQL for a hair salon reservations table in Supabase.

Table name: reservations

Columns:
- id: UUID (auto-generated)
- customer_name: text (required)
- customer_phone: text (required)
- service_id: text (required)
- service_name: text (required)
- date: date (required)
- time: time (required)
- duration: integer (duration in minutes)
- price: integer (price)
- status: text (default 'confirmed', one of confirmed/cancelled/completed/noshow)
- memo: text (optional)
- created_at: timestamp (auto)

Additional settings:
- Add index for fast date+time lookups
- Enable Row Level Security (RLS)
- Allow anyone to create reservations (INSERT)
- Allow anyone to view reservations (SELECT) (for calendar availability display)"

# Paste Claude's generated SQL into Supabase SQL Editor and click Run!

# === 2. Ask Claude Code to Connect Supabase ===
# (Enter this prompt while Claude Code is running)

"Connect Supabase to this project.

Supabase info:
- Project URL: https://xxxxxxxx.supabase.co
- Anon Key: eyJxxxxxxxxxx...

Tasks to complete:
1. Install @supabase/supabase-js package
2. Store environment variables in .env.local file
3. Create Supabase client configuration file
4. Replace existing localStorage data storage with Supabase
5. Add duplicate booking check logic on reservation creation
   (no more than station count bookings at same date/time)
6. Update admin page to query data from Supabase

Add .env.local to .gitignore so it
doesn't get uploaded to GitHub."

# Claude Code will automatically modify all files.
# After completion, open localhost:3000 in the browser
# and try making a booking.
# In Supabase dashboard > Table Editor > reservations,
# if you see the booking you just made, the connection is successful!

# === Email Notification Integration Prompt (enter in Claude Code) ===

"Add a feature to send an email notification to the shop owner when a booking is created.

Email service: Resend
API Key: re_xxxxxxxxxxxxx (replace with your key)
Owner email: owner@example.com (replace with your email)

Email content:
- Subject: [New Booking] John Doe - Haircut (March 5)
- Body should include:
  - Customer name
  - Phone number
  - Service name and duration
  - Booking date and time
  - Price
  - Special requests (if any)

Store the Resend API Key in .env.local.
Implement email sending after successful Supabase INSERT
in the reservation creation function."

# === Testing Email Notifications ===
# 1. Try making a booking in the browser
# 2. Check the owner's email inbox
# 3. If a "New Booking" email arrives, success!
#
# If the email doesn't arrive:
# -> Ask Claude Code "The email isn't sending. Check the logs and fix it"
# -> Check send history on the Resend dashboard (resend.com > Emails)
# -> Verify the API Key is correct

# === Claude Code Prompt 1: Pre-deployment Check ===

"Check this project before deployment:
- Run npm run build to check for build errors
- Fix any errors
- Verify .env.local is included in .gitignore
- Add Open Graph meta tags for nice previews when sharing on social media:
  - Title: Bloom Hair Salon - Online Booking
  - Description: Book your appointment online with ease
- Also add a PWA manifest.json (so it can be added to home screen)
- Let me know when done"

# === Claude Code Prompt 2: Upload to GitHub ===

"Upload this project to GitHub.
The GitHub repository URL is https://github.com/myusername/my-reservation.git.
Initialize git, commit all files, and push."

# -> Replace "myusername" with your actual GitHub username!
# -> Claude Code will automatically run git init, add, commit, push.

# === Updating Later ===

# After modifying code, tell Claude Code:
"Push the changes to GitHub"
# -> Vercel automatically deploys the new version (reflected in 1-2 minutes)

# === Recommended Extension Feature Prompts (enter in Claude Code) ===

# [Popular] Chat support button
"Add a floating chat support button in the bottom right corner.
Clicking it should open a link to our support page."

# [Popular] Shop location map
"Show the shop location with Google Maps at the bottom of the main page.
Address: 123 Main Street, Suite 4"

# [Popular] Booking QR code
"Add a feature to generate a booking QR code for the shop.
Scanning the QR code should go directly to the booking page."

# [SEO] Search engine optimization
"Optimize for SEO so my site appears when people search
'hair salon booking near me' on Google"

# [Analytics] Visitor tracking
"Integrate Google Analytics. The tracking ID is G-XXXXXXXXXX."
# -> Sign up for free at analytics.google.com to get the ID

# [Advanced] Real-time booking alerts
"Integrate Supabase Realtime so the admin page shows
real-time alerts when new bookings come in"

# === Deploy After Changes ===
# After adding features, tell Claude Code:
"Push the changes to GitHub"
# -> Vercel automatically deploys the new version in 1-2 minutes!

Core Code

Following this entire process takes about 2-3 hours to complete your own reservation system. You don't need to write a single line of code yourself - just make requests to Claude in plain English. The key to good results is organizing your shop information as specifically as possible.

// === Core Summary: Complete Reservation System Build Order ===
//
// [Preparation]
// 1. Sign up for Claude Pro (claude.ai, $20/month)
// 2. Install Node.js (nodejs.org)
// 3. Sign up for GitHub (github.com)
// 4. Sign up for Supabase (supabase.com)
// 5. Install Claude Code (npm install -g @anthropic-ai/claude-code in terminal)
//
// [Build Order]
// Step 1: Account signup + program installation (15 min)
// Step 2: Organize shop booking rules (10 min)
// Step 3: Preview design with Claude Artifacts (20 min)
// Step 4: Create actual project with Claude Code (30 min)
// Step 5: Preview + feature testing (30 min)
// Step 6: Connect Supabase database (20 min)
// Step 7: Set up email notifications - optional (15 min)
// Step 8: Deploy with GitHub + Vercel (15 min)
// Step 9: Start operations!
//
// Total time: About 2-3 hours (one day is plenty!)
//
// [Core Principles]
// - Don't edit code yourself. Leave all modifications to Claude Code.
// - Progress one feature at a time -> preview -> next feature.
// - If an error occurs, pass the error message directly to Claude Code.
// - After completing each feature, ask "Please commit the changes to git."
//
// [Cost Comparison]
// Outsourced development: $2,000-5,000 + maintenance fees
// Platform bookings:      $0.50-1.00 per booking (accumulates monthly)
// Build with AI:          ~$20 dev cost (one-time) + $0-5/month maintenance
//
// [Operations Tips]
// - Place a booking QR code at your shop (business cards, counter, etc.)
// - Put the booking link in your social media profiles
// - Add the booking link to your Google Business page
// - Register the booking URL on review sites and directories

Common Mistakes

Related liminfo Services