Build A Car Detailing Booking System

Nov 7, 2025 by Admin 37 views

🚀 Executive Summary:

This article outlines a comprehensive plan to implement a car detailing booking system for a detailing business. This system is designed to streamline operations, enhance customer experience, and boost efficiency. The implementation includes a modern admin dashboard, real-time availability checking, customer management tools, automated email communications, and a user-friendly public booking flow. This project prioritizes core business functionality and aims to significantly improve the booking process.

Key Features:

Modern Admin Dashboard: TemplUI components with sidebar navigation.
Real-Time Availability: Slot-based scheduling.
Customer Management: Account creation.
Automated Email Communications: Confirmations, reminders, and follow-ups.
Public Booking Flow: Multi-step form.
No Payment Integration: Booking requests only.

Estimated Time:

Total Estimated Time: 35-45 hours
Priority: High - Core business functionality

🛠️ Research Summary:

Industry Best Practices (2025):

Based on leading car detailing booking systems, the following features are crucial for success in the automotive detailing industry:

Must-Have Features:

24/7 Online Booking: Customers can book anytime.
Real-Time Availability Display: Shows available slots.
Automated Confirmations and Reminders: Reduces no-shows by up to 30%.
Mobile-Responsive Interface: Works on all devices.
Customer History and Relationship Management: Keeps track of customer data.
Calendar Integration: Simplifies staff scheduling.
Email/SMS Notifications: Keeps everyone informed.

Modern Admin Dashboard Standards:

Fixed Sidebar Navigation: Easy access to all features.
Clear Visual Hierarchy: Organized information display.
Collapsible Navigation Groups: Clean interface for nested items.
Breadcrumb Trails: Shows the user's path.
Card-Based Metrics Display: Quick overview of key data.
Real-Time Data Tables: Allows filtering and sorting.
Responsive Design: Works well on mobile devices.

Current Architecture Analysis:

The current tech stack is based on modern web technologies. This project will extend the existing system to include booking features. The development plan will integrate with existing components and data structures.

Tech Stack:

Backend: Go 1.23 + Echo v4.13.3 + SQLC (for type-safe queries).
Database: SQLite with modernc.org/sqlite (pure Go, no CGO).
Frontend: Templ v0.3.943 (type-safe Go templates) + Tailwind CSS.
Architecture: Server-side rendered with progressive enhancement.

Existing Features:

Services Page: Displays service packages.
Work Portfolio: Showcases before/after images.
Reviews System: Allows customer reviews.
Contact Form: Enables customer contact.
Basic Admin Package Management: CRUD operations for packages.

Missing Features:

Booking System: Needed for scheduling.
Complete Admin Dashboard: Needed for business management.
Authentication: Planned with Clerk but not yet implemented.
Email Automation: SMTP configured but unused.

Database Schema (Existing):

packages: Service offerings.
vehicles: Customer/dealer vehicles.
jobs: Completed work tied to vehicles/packages.
media: Before/after images.
reviews: Customer testimonials.
posts: Blog posts.

📝 Detailed Implementation Plan:

Phase 0: Setup templUI Foundation (1-2 hours):

templUI is a UI component library for Go templ. It provides type-safe, production-ready components. This phase involves installing and configuring the templUI.

0.1 Install templUI CLI & Initialize:

Install the templUI CLI and initialize it in the project.

# Install CLI
go install github.com/templui/templui/cmd/templui@latest

# Initialize in project
templui init

Configuration prompts:

Component directory: web/templates/components
Utilities directory: web/templates/utils
Go module name: (use existing module)
JavaScript directory: web/static/js/templui
Public path: /static/js/templui

0.2 Update Tailwind Configuration:

Update assets/css/input.css with templUI color variables using OKLch color space.

@layer base {
  :root {
    --background: oklch(100% 0 0);
    --foreground: oklch(15% 0 0);
    --primary: oklch(50% 0.15 250); /* Adapt to existing Ford Blue #003DA5 */
    --primary-foreground: oklch(100% 0 0);
    /* ...additional variables per templUI docs */
  }
  
  .dark {
    --background: oklch(15% 0 0); /* Match existing dark theme */
    --foreground: oklch(98% 0 0);
    /* ...dark theme variables */
  }
}

Update tailwind.config.js to include templUI component paths.

0.3 Install Core Admin Components:

Install the essential components for the admin dashboard.

templui add sidebar breadcrumb table card button dialog alert badge toast tabs select input textarea checkbox dropdown pagination calendar charts slider switch skeleton

Components installed:

Navigation: Sidebar, Breadcrumb, Tabs
Data Display: Table, Card, Badge, Charts
Forms: Input, Textarea, Select, Checkbox, Dropdown, Calendar
Feedback: Alert, Toast, Skeleton
Overlays: Dialog
Actions: Button, Switch, Slider

Phase 1: Admin Dashboard Foundation (4-5 hours):

This phase focuses on creating the structure of the admin dashboard, including the layout and core components.

1.1 Create Admin Layout with Sidebar Navigation:

Create a layout file that will serve as the foundation for the admin dashboard. This layout will include the sidebar navigation.

File: web/templates/admin/layout.templ

Sidebar Structure:

┌─────────────────────────────────────────────────────────────┐
│  [Logo] AutoDetail Pro                [≡] ← collapse button │
├─────────────────────────────────────────────────────────────┤
│  🏠 Dashboard                                                │
│  📅 Bookings                                  [2] ← badge   │
│     ├─ Pending                                               │
│     ├─ Confirmed                                             │
│     ├─ Completed                                             │
│     └─ Calendar View                                         │
│  📦 Services                                                 │
│  👥 Customers                                                │
│  🚗 Vehicles                                                 │
│  🖼️  Portfolio (Jobs)                                        │
│  ⭐ Reviews                                                  │
│  ⚙️  Settings                                                │
│     ├─ Availability                                          │
│     ├─ Notifications                                         │
│     └─ Business Info                                         │
├─────────────────────────────────────────────────────────────┤
│  [👤] Admin User              [🔔][🌙][↗️] ← profile/logout │
└─────────────────────────────────────────────────────────────┘

Specifications:

Width: 280px expanded, 64px collapsed (icon-only mode).
Position: Fixed left, full height.
Responsive: Desktop always visible/collapsible, mobile hamburger overlay.
Active State: Highlight current page.
Sub-menus: Collapsible.

1.2 Admin Dashboard Home (`/admin`):

Create the admin dashboard home page to display key metrics and recent activity.

File: web/templates/admin/dashboard.templ

Layout:

Top Row - Metric Cards (4 cards):
- Pending Bookings (with badge).
- Today's Schedule (count + timeline).
- This Month Revenue.
- Active Customers.
Second Row - Charts:
- Bookings trend (last 30 days line chart).
- Package popularity (pie chart).
Third Row - Recent Activity:
- Recent bookings table (10 rows).
- Recent reviews (5 items).

templUI Components: Card, Badge, Table, Charts, Button

Phase 2: Database Schema - Booking System (2-3 hours):

This phase defines the database schema for the booking system, including tables for customers, bookings, and availability.

2.1 Create Migration File:

Create a migration file to add the new tables to the database.

File: internal/db/migrations/003_create_booking_tables.sql

New Tables:

customers:

CREATE TABLE customers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    clerk_user_id TEXT UNIQUE,  -- Nullable for guest customers
    email TEXT NOT NULL,
    phone TEXT NOT NULL,
    first_name TEXT NOT NULL,
    last_name TEXT NOT NULL,
    address_line1 TEXT,
    address_line2 TEXT,
    city TEXT,
    state TEXT,
    zip TEXT,
    notes TEXT,
    total_bookings INTEGER DEFAULT 0,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

bookings:

CREATE TABLE bookings (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    customer_id INTEGER NOT NULL,
    package_id INTEGER NOT NULL,
    status TEXT NOT NULL CHECK(status IN ('pending', 'confirmed', 'in_progress', 'completed', 'cancelled')) DEFAULT 'pending',
    preferred_date DATE NOT NULL,
    preferred_time_slot TEXT NOT NULL,
    confirmed_datetime DATETIME,
    vehicle_year INTEGER,
    vehicle_make TEXT,
    vehicle_model TEXT,
    vehicle_color TEXT,
    vehicle_license_plate TEXT,
    service_location TEXT NOT NULL CHECK(service_location IN ('shop', 'mobile')) DEFAULT 'shop',
    mobile_address_line1 TEXT,
    mobile_city TEXT,
    mobile_state TEXT,
    mobile_zip TEXT,
    duration_minutes INTEGER NOT NULL,
    total_price_cents INTEGER NOT NULL,
    add_ons TEXT,  -- JSON array
    notes_customer TEXT,
    notes_internal TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    confirmed_at DATETIME,
    completed_at DATETIME,
    cancelled_at DATETIME,
    cancellation_reason TEXT,
    FOREIGN KEY (customer_id) REFERENCES customers(id) ON DELETE CASCADE,
    FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE RESTRICT
);

availability_slots:

CREATE TABLE availability_slots (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    day_of_week INTEGER NOT NULL CHECK(day_of_week >= 0 AND day_of_week <= 6),
    start_time TIME NOT NULL,
    end_time TIME NOT NULL,
    slot_duration_minutes INTEGER NOT NULL DEFAULT 30,
    max_concurrent_bookings INTEGER NOT NULL DEFAULT 1,
    is_active BOOLEAN NOT NULL DEFAULT 1,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

availability_exceptions:

CREATE TABLE availability_exceptions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    exception_date DATE NOT NULL UNIQUE,
    reason TEXT NOT NULL,
    is_closed BOOLEAN NOT NULL DEFAULT 1,
    custom_start_time TIME,
    custom_end_time TIME,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

booking_notifications:

CREATE TABLE booking_notifications (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    booking_id INTEGER NOT NULL,
    notification_type TEXT NOT NULL CHECK(notification_type IN (
        'booking_confirmation',
        'admin_notification',
        'reminder_24h',
        'reminder_2h',
        'completion_followup',
        'cancellation_confirmation'
    )),
    recipient_email TEXT NOT NULL,
    sent_at DATETIME,
    email_status TEXT CHECK(email_status IN ('queued', 'sent', 'failed', 'bounced')),
    error_message TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (booking_id) REFERENCES bookings(id) ON DELETE CASCADE
);

2.2 Write SQLC Queries:

Create query files for database operations, including CRUD operations, search queries, and availability checks.

Create query files in internal/db/queries/:

customers.sql: CRUD operations, search, booking history.
bookings.sql: CRUD, filtering, status updates, reminder queries.
availability.sql: Slot management, exception management, availability checks.
notifications.sql: Create, update notification status.

Phase 3: Admin Booking Management UI (5-6 hours):

This phase implements the admin interface for managing bookings, including list views, detail views, and a calendar view.

3.1 Bookings List Page (`/admin/bookings`):

Create a list view to manage bookings with filtering, sorting, and bulk actions.

Features:

Filter bar (status, date range, package, search).
Tabs with badge counts (All/Pending/Confirmed/Completed/Cancelled).
Table with sortable columns.
Bulk actions (confirm multiple).
Row click opens detail drawer.

templUI Components: Table, Badge, Tabs, Dropdown, Button, Pagination, Date Picker, Checkbox

3.2 Booking Detail Sheet:

Implement a detailed view for each booking.

Sections:

Header with action buttons (Confirm/Reschedule/Cancel/Complete).
Customer info card (with link to profile).
Vehicle info card.
Service details card (package, add-ons, date/time, price).
Customer notes.
Internal notes (editable textarea).
Timeline (Created → Confirmed → Completed).
Communication log (emails sent).

templUI Components: Sheet/Dialog, Card, Button, Textarea, Badge

3.3 Calendar View (`/admin/bookings/calendar`):

Implement a calendar view to visualize bookings.

Day/Week/Month view toggle.
Color-coded events by status.
Click event → detail drawer.
Click empty slot → quick add dialog.
Legend showing status colors.

templUI Components: Calendar, Badge, Dialog, Dropdown

3.4 Quick Add Booking Dialog:

Implement a dialog to quickly add new bookings.

Multi-section form:

Customer search/select or new customer.
Package + add-ons selection.
Vehicle information.
Date/time picker (with availability check).
Location (shop/mobile).
Notes.
Real-time price calculation.

templUI Components: Dialog, Input, Select, Checkbox, Date Picker, Textarea

Phase 4: Backend - Booking Management Logic (3-4 hours):

This phase focuses on the backend logic for managing bookings, including handlers and services.

4.1 Create Booking Handlers:

Implement API handlers for booking operations.

File: internal/server/handlers/booking.go

Endpoints:

GET /admin/bookings: List with filters.
GET /admin/bookings/:id: Detail.
POST /admin/bookings: Create.
PUT /admin/bookings/:id: Update.
PUT /admin/bookings/:id/confirm: Confirm.
PUT /admin/bookings/:id/cancel: Cancel.
PUT /admin/bookings/:id/complete: Mark complete.
GET /api/availability: Get available slots.

Key Functions:

Validate booking data.
Check availability before creation.
Calculate total price (package + add-ons).
Trigger email notifications.
Update customer booking count.

4.2 Availability Service:

Create a service for managing and checking availability.

File: internal/services/availability.go

Functions:

GetAvailableSlots(date, duration): Return available time slots.
IsSlotAvailable(datetime, duration): Validate specific slot.
Account for business hours, exceptions, and existing bookings.

Logic:

Get business hours for the day of the week.
Check for exceptions (holidays/custom hours).
Generate time slots based on configuration.
Query existing bookings for each slot.
Mark slots as available/unavailable.

4.3 Email Service:

Implement an email service for sending notifications.

File: internal/services/email.go

Functions:

SendBookingConfirmation(booking): Customer confirmation.
SendAdminNotification(booking): Alert admin of new booking.
SendReminder24h(booking): Day-before reminder.
SendReminder2h(booking): 2-hour reminder.
SendFollowUp(booking): Review request after completion.
SendCancellationConfirmation(booking): Cancellation notice.

Email Templates: Create HTML templates in web/templates/email/

Dependencies: Use gopkg.in/mail.v2 for SMTP.

Phase 5: Customer Management (2-3 hours):

This phase implements features for managing customer data, including list and detail views.

5.1 Customers List Page (`/admin/customers`):

Implement a list view to manage customers.

Search by name, email, phone.
Table: Name, Email, Phone, Total Bookings, Last Booking, Actions.
Click row → customer detail.
Pagination.

templUI Components: Table, Input, Pagination, Button

5.2 Customer Detail Page (`/admin/customers/:id`):

Implement a detailed view for each customer.

Sections:

Customer info (editable).
Booking history table.
Saved vehicles list.
Staff notes.
"Create New Booking" button (pre-fills customer).

templUI Components: Card, Table, Input, Textarea, Button

Phase 6: Settings - Availability Management (2-3 hours):

This phase implements settings for configuring business availability.

6.1 Availability Configuration (`/admin/settings/availability`):

Implement settings to configure weekly schedules and exceptions.

Weekly Schedule:

Table: 7 days, each with open/close time, slot duration, max concurrent, active toggle.
Save updates all.

Exceptions:

List of upcoming holidays/closures.
Add/edit/delete exceptions.
Dialog: Date, reason, closed checkbox, custom hours.

Booking Settings:

Default slot duration.
Buffer time between bookings.
Max bookings per slot.
Lead time (how far in advance).
Minimum notice.

templUI Components: Card, Table, Time Picker, Checkbox, Input, Dialog, Button

Phase 7: Public Booking Flow (6-7 hours):

This phase implements the public-facing booking flow, including a multi-step form and confirmation page.

7.1 Booking Page (`/book`):

Implement a multi-step form for customers to book detailing services.

Multi-Step Form with Progress Indicator:

Step 1: Choose Service

Package cards (Interior/Exterior/Full Detail).
Add-ons checkboxes.
Real-time price calculator.

Step 2: Select Date & Time

Calendar component.
Available dates highlighted.
Time slot grid (loaded via HTMX based on selected date).
Unavailable slots grayed out.

Step 3: Vehicle Information

Year/Make/Model/Color.
License plate (optional).
Service location radio (shop/mobile).
Mobile address fields (conditional).

Step 4: Your Information

First/Last name, Email, Phone.
"Create account" checkbox (optional).
Special requests textarea.
Terms agreement checkbox.

Step 5: Review & Confirm

Summary cards for all sections.
Edit links to go back.
Total price display.
Submit button.

JavaScript: Multi-step navigation, validation, HTMX for dynamic loading

templUI Components: Card, Button, Calendar, Input, Select, Checkbox, Textarea, Progress, Badge, Alert

7.2 Booking Confirmation Page:

Implement a confirmation page after a booking is successfully made.

Success page with:

Confirmation message + booking ID.
Booking summary.
"What happens next" timeline.
"Add to Calendar" button (.ics download).
"Return Home" button.

7.3 Customer Dashboard (Optional Accounts):

If optional accounts are enabled, create a customer dashboard.

Protected by Clerk auth:

Upcoming bookings with countdown.
Past bookings table.
"Book Again" quick action.
Saved vehicles.
Profile settings.

Phase 8: Automated Communications & Background Jobs (3-4 hours):

This phase sets up automated communications using cron jobs and email templates.

8.1 Cron Job System:

Implement a cron job system to schedule automated tasks.

File: cmd/server/main.go

Use github.com/robfig/cron/v3:

c := cron.New()

// Check for reminders every hour
c.AddFunc("@hourly", func() {
    emailService.SendScheduledReminders()
})

// Daily digest at 5 PM
c.AddFunc("0 17 * * *", func() {
    emailService.SendDailyDigest()
})

// Weekly report Monday 9 AM
c.AddFunc("0 9 * * 1", func() {
    emailService.SendWeeklyReport()
})

c.Start()

EmailService Functions:

SendScheduledReminders(): Check and send 24h, 2h reminders, follow-ups.
SendDailyDigest(): Tomorrow's schedule to admin.
SendWeeklyReport(): Weekly stats to admin.

8.2 Email Templates:

Create HTML email templates for different notifications.

Create mobile-responsive HTML templates:

booking_confirmation.html
admin_notification.html
reminder_24h.html
reminder_2h.html
followup.html
cancellation_confirmation.html

Phase 9: Authentication Integration (2-3 hours):

This phase integrates user authentication using Clerk. This provides secure access to the admin dashboard and customer accounts.

9.1 Install Clerk SDK:

Install the Clerk Go SDK.

go get github.com/clerkinc/clerk-sdk-go/v2

Environment variables:

CLERK_SECRET_KEY=sk_test_...
CLERK_PUBLISHABLE_KEY=pk_test_...

9.2 Configure Middleware:

Set up middleware to handle authentication and authorization.

File: internal/server/middleware/auth.go

func ClerkAuth() echo.MiddlewareFunc {
    return echo.WrapMiddleware(clerkhttp.WithHeaderAuthorization())
}

func RequireAdmin() echo.MiddlewareFunc {
    // Check if user has admin role/email
    // Redirect to /admin/login if not authenticated
}

Apply to routes:

admin := e.Group("/admin")
admin.Use(middleware.ClerkAuth())
admin.Use(middleware.RequireAdmin())

9.3 User Flows:

Define the user flows for admin and customer access.

Admin: Must sign in with Clerk, check admin role.
Customer (optional): Create account during booking or separately.
Guest: Book without account, email only.
Link guest bookings to account if customer signs up later (match by email).

Phase 10: Testing, Polish & Documentation (3-4 hours):

This phase focuses on comprehensive testing, refining the user interface, and creating documentation.

10.1 Testing Checklist:

Perform thorough testing of all features.

Full booking flow (guest and with account).
Admin confirm/reschedule/cancel/complete booking.
Availability calculation edge cases.
Email delivery (all types).
Mobile responsiveness.
Accessibility (keyboard nav, screen readers).
Form validation.
Error handling.

10.2 UI/UX Polish:

Enhance the user experience with UI/UX improvements.

Loading states (Skeleton component).
Error messages (Alert component).
Form validation (inline errors).
Empty states.
Success feedback (Toast notifications).
Smooth animations.
Dark mode support.

10.3 Documentation:

Create comprehensive documentation for users and developers.

Admin Guide:

Managing bookings.
Configuring availability.
Understanding notifications.

Developer Docs:

Database schema.
Adding email templates.
Extending booking logic.
Customizing templUI.

Deployment Checklist:

Environment variables.
Database migrations.
SMTP configuration.
Clerk setup.

📦 Dependencies to Add:

Add these dependencies to your project.

# Go packages
go get github.com/templui/templui/cmd/templui@latest
go get github.com/clerkinc/clerk-sdk-go/v2
go get gopkg.in/mail.v2
go get github.com/robfig/cron/v3

🚀 Implementation Priority Order:

Follow the recommended order for a smooth implementation.

Phase 0-1: Foundation (templUI + Admin Dashboard Shell) - 5-7 hours
Phase 2-4: Core Booking System (Database + Backend + Admin UI) - 10-13 hours
Phase 5-6: Admin Tools (Customers + Availability Settings) - 4-6 hours
Phase 7: Public Booking Flow - 6-7 hours
Phase 8-9: Automation + Auth - 5-7 hours
Phase 10: Testing + Polish - 3-4 hours

Total: 35-45 hours

🎨 Design System Notes:

Adhere to the following design principles for a consistent look and feel.

Brand Colors:

Primary: #003DA5 (Ford Blue) → Convert to OKLch for templUI
Background: #0B0F13 (Dark)
Fonts: Poppins, Inter, Dancing Script

Component Styling:

Cards: Subtle borders, rounded-lg
Buttons: Primary uses brand blue
Badges: Color-coded by status
Tables: Hover states

🔒 Security Considerations:

Prioritize security throughout the implementation process.

SQL injection: SQLC parameterized queries ✅
XSS: Templ auto-escapes ✅
CSRF: Add middleware to forms.
Auth: Clerk handles securely ✅
Input validation: Server-side for all forms.
Rate limiting: Consider for public endpoints.

📊 Success Metrics:

Track these metrics to measure the success of the booking system.

Booking conversion rate.
Average time to complete booking (target < 5 min).
No-show rate (target < 10%).
Admin time managing bookings (should decrease).
Customer satisfaction scores.

🔮 Future Enhancements (Out of Scope):

Explore potential future features.

Payment integration (Stripe/Square).
SMS notifications (Twilio).
Calendar sync (Google/Outlook).
Multi-technician scheduling.
Mobile app.
Advanced analytics.
AI-powered recommendations.

📝 Implementation Notes:

Keep these notes in mind during the implementation.

All times are estimates.
templUI components may need minor brand customization.
Test email templates across clients (Gmail, Outlook, Apple Mail).
Set up a staging environment for testing.
Create reversible database migrations.

Ready to implement! Start with Phase 0 to set up the templUI foundation, then proceed systematically through each phase.