System Requirements Document (SRD)

Project Name: simple-salon

1. Introduction

The simple-salon project aims to deliver a premium, modern salon booking and real-time queue management web application. This document outlines the system requirements for the project, ensuring clarity and alignment with the vision shared by Amarjit Sharma. The application will focus on providing a clean, minimal, and high-end user experience, catering to both salon customers and owners.

2. System Overview

The simple-salon platform will serve as a responsive web application designed to streamline salon bookings and queue management. It will feature a sleek, intuitive interface inspired by premium brands like Apple, Stripe, and Uber. The system will include functionalities for customer profile management, service selection, barber assignment, and real-time queue updates. Owners will have access to a dashboard for managing services, barbers, and live queues.

Key features include:

• A clean, modern UI with smooth animations and minimal clutter.
• Real-time queue updates powered by Supabase.
• Responsive design optimized for mobile-first usage.
• Secure authentication using Supabase Auth and Cloudflare Turnstile.

3. Functional Requirements

As a Customer:

• I should be able to log in or sign up using my phone or email.
• I should be able to create and save my profile with details like name and phone number.
• I should be able to book a service in a clean, 3-step flow:
  • Step 1: Provide user details (auto-filled or manual input).
  • Step 2: Select a service from a card-based UI.
  • Step 3: Choose a barber based on availability, rating, and chair number.
  • Step 4: Select a date and time (up to 30 days ahead).
• I should be able to view my booking summary, including queue position, estimated wait time, and total price.
• I should be able to join the queue and receive real-time updates on my position.

As an Owner:

• I should be able to log in or sign up separately from customers.
• I should be able to view stats like total customers, earnings, active queue, and average wait time.
• I should be able to manage services, barbers, and live queues.
• I should be able to manually add walk-in customers to the queue.

4. User Personas

Customer

• Description: A salon visitor looking for a seamless booking experience.
• Goals: Book services quickly, avoid waiting, and track queue position in real-time.
• Pain Points: Long wait times, unclear queue status, and complicated booking processes.

Owner

• Description: A salon manager or owner overseeing daily operations.
• Goals: Manage services, barbers, and queues efficiently while tracking business performance.
• Pain Points: Difficulty in managing walk-in customers and tracking real-time queue updates.

5. Visuals Colors and Theme

Color Palette

The simple-salon project will feature a premium, modern color scheme:

• Background: #F8F9FA (Soft White)
• Surface: #FFFFFF (Pure White)
• Text: #2C2C2C (Charcoal Black)
• Accent: #A855F7 (Gradient Purple) → #F97316 (Gradient Orange)
• Muted Tones: #E5E7EB (Light Gray)

Design Style

• Clean layout with ample white space.
• Rounded-xl cards with soft shadows.
• Gradient accents for buttons and highlights.
• Glassmorphism for key sections like booking summary.

6. Signature Design Concept

Concept: Interactive Queue Animation

The homepage will feature a dynamic queue visualization that instantly grabs attention.

Details:

• Hero Section:

  • A 3D animated queue line where avatars (representing customers) move forward in real-time.
  • Each avatar displays a name, service, and estimated wait time.
  • The queue dynamically updates as new users join or leave.

• Interaction:

  • Hovering over an avatar reveals detailed booking information.
  • Clicking on "Join Queue" smoothly transitions to the booking flow.

• Transitions:

  • Gradient background subtly shifts colors (purple → orange) as the queue progresses.
  • Micro-interactions like button hover effects and card flips enhance the premium feel.

This bold, interactive design will make the homepage unforgettable, emphasizing the app's real-time capabilities and modern aesthetic.

7. Non-Functional Requirements

• Performance:

  • Fast loading times with lazy loading for components.
  • Optimized images and assets.

• Security:

  • Cloudflare Turnstile for bot protection on login, signup, and booking submission.
  • Backend verification API for secure data handling.

• Scalability:

  • Designed to handle high traffic and real-time updates.

• Responsiveness:

  • Mobile-first design with adaptive layouts for tablet and desktop.

8. Tech Stack

Frontend

• React (Web)
• Vite (Build Tool)
• Tailwind CSS

Backend

• Supabase (Auth + Database + Realtime)

Security

• Cloudflare Turnstile

Local Orchestration

• Docker
• docker-compose

9. Assumptions and Constraints

Assumptions

• The initial version will focus on web functionality, with APIs and advanced integrations added later.
• Users will primarily access the platform via mobile devices.

Constraints

• Limited to Supabase for database and real-time functionalities.
• Booking system must support up to 30 days in advance.

10. Glossary

• Supabase: A backend-as-a-service platform providing authentication, database, and real-time capabilities.
• Cloudflare Turnstile: A bot protection tool for secure user interactions.
• Glassmorphism: A design style featuring translucent surfaces with subtle shadows and highlights.
• FIFO: First In, First Out queue logic ensuring fairness in customer order.
• Gradient: A smooth transition between two or more colors.