Case Study • Project 2

The Problem

The project addresses several key challenges in booking and managing hairdressing services:

Difficulty Finding Appointments: Customers often struggle to find available time slots that suit their schedules.
Lack of Transparent Pricing: Service prices and durations are not always clearly communicated upfront.
Inconvenient Salon Visits: Traveling to a salon can be difficult for customers who prefer or require home services.
Unsecured Payments: There is no reliable way to pay deposits or guarantee appointments online.
Poor Communication: Ineffective communication leads to missed appointments and last-minute cancellations.
Inefficient Manual Management: Hairdressers rely on manual scheduling, cash payments, and disconnected systems, which limits efficiency and business growth.

The Solution

The project delivers a web-based full-stack platform that improves the experience for both customers and service providers:

Online Booking System: Customers can book appointments in real time with instant confirmation.
Clear Service Information: Hairstyles are displayed with transparent pricing and estimated service durations.
Flexible Service Locations: Customers can choose between office-based or home services, based on service rules.
Secure Online Payments: The platform supports partial deposits or full payments made securely online.
Automated Communication: Booking confirmations and reminders reduce no-shows and cancellations.
Consent and Permissions Management: Required permissions for home services are collected and stored digitally.
Centralized Administration: Staff can manage bookings, calendars, payments, availability, and customer records from one system.

Code Deep Dive

1 / 3

1. Custom Utility for Merging Tailwind Classes

File: lib/utils.ts

Merges multiple class names together conditionally, ensuring non- duplicate classes and proper handling of Tailwind's utility classes.



import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Key Features:

Intelligently resolves conflicting Tailwind classes
Merges multiple class names together conditionally
Ensures no duplicate classes in the final output

2. Authentication Management Hook

File: hooks/use-auth.ts


const [loadingAction, setLoadingAction] = useState(null);
const [loadingMinDelayActive, setLoadingMinDelayActive] = useState(false);

// Show loading state for at least 500ms to ensure spinner is visible
useEffect(() => {
  if (!convexIsLoading && loadingAction) {
    const timer = setTimeout(() => {
      setLoadingAction(null);
      setLoadingMinDelayActive(false);
    }, 500);
    return () => clearTimeout(timer);
  }
}, [convexIsLoading, loadingAction]);

Manages a minimum loading duration (500ms) to prevent flickering spinners on fast auth requests.

3. Role-Based Access Control Hook

File: hooks/use-role-guard.ts

Determines if a user has permission to access a route based on their role.


const authStatus = useMemo(() => {
  if (user === undefined) return { isLoading: true, hasRole: false, isAuthorized: false };
  if (!user) return { isLoading: false, hasRole: false, isAuthorized: false };
  if (!user.role) return { isLoading: false, hasRole: false, isAuthorized: false };
  
  const authorized = requiredRoles.includes(user.role as UserRole);
  return { isLoading: false, hasRole: true, isAuthorized: authorized };
}, [user, requiredRoles]);

Back to Projects