Salon Oliander Appointment Booking System

Premium Hair Salon — Digital Platform & Online Booking System

A full-stack web platform built for a high-end hair salon, combining a polished marketing site with a production-ready online reservation system, client portal, and admin CMS. The product supports day-to-day salon operations—from showcasing services and bridal styling to managing appointments, calendars, and customer communication—in three languages.

The Challenge

The salon needed more than a brochure website. They required a modern digital presence that reflects a premium brand, lets clients book appointments online without phone calls, handles both standard and bridal services with different scheduling rules, and gives staff a simple way to manage services, bookings, and customers. The solution also had to serve a multilingual audience (Hungarian, English, and German) and integrate with existing workflows such as Google Calendar and email.

What We Built

1. Marketing & Brand Experience

• Immersive homepage with hero section, services carousel, about section, bridal styling showcase, image gallery, client testimonials, and interactive price list
• Scroll-driven animations powered by GSAP (ScrollTrigger) for a refined, high-end feel
• Fully responsive layout with custom SCSS styling and Bootstrap 5
• Animated loading screen and section transitions for a polished first impression

2. Online Reservation System

• Multi-step booking flow: service selection → date/time slot → confirmation → completion
• Separate flows for standard salon services and bridal packages (full-day or time-based)
• Dynamic pricing by hair length (short, medium, long, extra-long)
• Real-time availability API that checks existing bookings and prevents double-booking
• Automatic end-time calculation based on service duration and 15-minute slot granularity

3. Client Portal & Authentication

• User registration and sign-in with email/password
• Social login via Google, Facebook, and Apple (NextAuth.js)
• Password reset with verification codes
• Account dashboard with profile management, favourite services, and appointment history
• Self-service booking cancellation

4. Admin & Content Management

• Payload CMS 3 headless admin panel for managing:
• • Services and bridal services (with localized names)
  • Bookings and bridal bookings
  • Client records and admin users
• GraphQL API for structured data access
• Role-based access control for admin vs. public content

5. Integrations & Automation

• Google Calendar — automatic event creation, updates, and deletion when bookings are created, modified, or cancelled
• Email notifications — multilingual confirmation, cancellation, and admin alert emails via Nodemailer
• MongoDB — persistent storage for all booking, client, and service data

6. Internationalization

• Full i18n support for Hungarian (default), English, and German using next-intl
• Localized UI copy, navigation, emails, and CMS admin interface
• Locale-based routing (/en, /hu, /de)