Earthy-Salon System Requirements Document

Introduction

The "Earthy-Salon" project aims to develop a comprehensive salon management application that caters to both customers and salon owners. The application will streamline appointment bookings, manage stylist schedules, integrate payment systems, and facilitate customer reviews, enhancing the overall salon experience.

System Overview

The Earthy-Salon application is designed to serve two primary user groups: customers and salon owners. Customers will have the ability to book appointments, make payments, and leave reviews. Salon owners will have administrative access to manage schedules, view appointments, and oversee services offered. The application will be developed with a focus on user-friendly interfaces and seamless integration of essential features.

Functional Requirements

• As a Customer, I should be able to book appointments with available stylists.
• As a Customer, I should be able to make payments for services online.
• As a Customer, I should be able to leave reviews for services received.
• As a Salon Owner, I should be able to manage stylist schedules.
• As a Salon Owner, I should be able to view all appointments and services.
• As a Salon Owner, I should be able to access payment reports and customer feedback.

User Personas

• Customer: Individuals looking to book salon services, make payments, and provide feedback.
• Salon Owner: Individuals managing the salon, responsible for overseeing appointments, schedules, and service offerings.

Visuals Colors and Theme

• primary: #4A7C59 (a deep, earthy green)
• primary_light: #A8C3A0 (a lighter tint of the primary color)
• secondary: #D95D39 (a warm, contrasting coral)
• accent: #F2B705 (a vibrant, sunny yellow for CTAs)
• highlight: #FFB84D (a warm amber for hover states)
• bg: #F7F7F2 (a soft, neutral background)
• surface: rgba(255, 255, 255, 0.9) (a subtle white for cards/panels)
• text: #333333 (a dark charcoal for primary text)
• text_muted: #777777 (a muted gray for secondary text)
• border: rgba(0, 0, 0, 0.1) (a light gray for borders)

Signature Design Concept

The Earthy-Salon homepage will feature an interactive "Garden of Services" concept. Upon landing, users will see a lush, animated garden where each plant represents a different service offered by the salon. As users hover over a plant, it gently sways and reveals more details about the service. Clicking on a plant will open a detailed view with booking options. The garden will subtly change with the time of day, using framer-motion for smooth animations and transitions. This concept will create an engaging, memorable first impression, inviting users to explore the salon's offerings in a unique and interactive way.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth effect as users scroll through the garden. Decorative elements like floating leaves and gentle breezes will move at different speeds, creating a dynamic and immersive experience. Internal pages, such as the booking and admin dashboards, will adopt a "static" model to prioritize clarity and ease of use.

Non-Functional Requirements

• The application must be responsive and accessible on both desktop and mobile devices.
• Payment transactions should be secure and comply with industry standards.
• The system should handle concurrent user access without performance degradation.
• Data privacy and protection must be ensured for all user information.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Models: GPT 5.4 for user-friendly responses
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The application will primarily serve users in India, considering local currency (INR) and timezone (IST).
• Internet connectivity is assumed for all users accessing the application.
• The system will be scalable to accommodate future growth in user base and features.

Glossary

• CTA: Call to Action
• IST: Indian Standard Time
• INR: Indian Rupee
• Responsive Design: An approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
• Parallax: A scrolling technique used to create an illusion of depth by moving background images slower than foreground images.