LuxeSalon
Back to Home

LuxeSalon

Visit Live Site

A modern salon booking web application built to streamline appointment scheduling for customers and simplify booking visibility for staff.

Next.js 16React 19TypeScriptTailwind CSS v4Framer Motionshadcn/ui

Overview

LuxeSalon is a modern salon booking web application built to streamline appointment scheduling for customers and simplify booking visibility for staff. Users can browse premium services, complete a guided 5-step booking flow (service, date, time, details, confirmation), and receive a polished booking summary. The project focuses on clean UX, responsive design, smooth micro-interactions, and production-ready frontend architecture.

Core Architecture

  • Frontend FrameworkNext.js 16 (App Router), React 19, TypeScript
  • Styling & UITailwind CSS v4, custom design tokens (OKLCH), shadcn/ui, Radix UI primitives
  • Animations & PolishFramer Motion, Lucide icons
  • Forms & ValidationReact Hook Form + Zod, date-fns
  • DeploymentVercel (Optimized for Next.js hosting)

Key Features

  • Showcases salon services with pricing, duration, and visual cards.
  • Supports multi-step appointment booking with progress stepper.
  • Validates customer form inputs before confirmation using React Hook Form + Zod.
  • Provides time-slot selection with unavailable slot handling.
  • Displays booking confirmation with full appointment details.
  • Includes an admin view to search/filter bookings by customer, service, phone, and date.

Challenges Solved

  • Multi-step Form State Management: Managing complex state across a 5-step booking flow ensuring validated progress without a backend.
  • Micro-interactions & Polish: Implementing smooth Framer Motion transitions and layout animations to create a premium, luxury feel.
  • UX & Responsive Layouts: Designing beautiful visual cards and progress steppers that respond fluidly across mobile and desktop devices.
  • Mocking Real-World Scenarios: Designing a frontend architecture robust enough to simulate unavailable slots, validation rules, and comprehensive search/filtering for the admin dashboard using mock data.

Outcome & Impact

Created an excellent frontend product demo exhibiting clean UX, responsive design, and smooth micro-interactions. The strong, production-ready frontend architecture lays a solid foundation for integrating a real backend ecosystem in the future.