A premium barber salon landing page designed to streamline appointment booking, marketing of services and client testimonials using React 19, Spline 3D and GSAP Animations.

1. Features
2. Tech Stack
3. Quick Start
4. Architecture
5. Strengths & Improvement Areas
6. Component Highlights
7. Core Technologies
8. Acknowledgments
9. License

• Client Management: Comprehensive client booking and profile management
• Appointment Scheduling: Intuitive booking system with real-time availability
• Service Portfolio: Dynamic service catalog with pricing and duration
• Barber Profiles: Professional team showcase with specialties and experience
• 3D Interactive UI: Engaging Spline-powered 3D elements for modern aesthetics
• Gallery Showcase: Before/after transformations and portfolio display
• Client Testimonials: Review system with rating management
• Responsive Design: Mobile-first approach with luxury dark theme
• Real-time Updates: Live data synchronization with Convex backend
• Performance Optimized: Lazy loading and code splitting for optimal performance

Make sure you have the following installed:

Using npm is recommended, but yarn or pnpm will work too.

git clone https://github.com/your-username/prestige-salon.git
cd prestige-salon

npm install

A. Method 1 Run 'npx convex dev --once' to start the Convex development server.

Run 'npx convex run seed:seedAll' to seed the database.

// OR //

B. Method 2

Create a .env.local file in the root directory and add your environment variables:

# Convex Configuration
VITE_CONVEX_URL=your_convex_deployment_url

# Optional: Additional environment variables
NODE_ENV=development

npm run dev

This will start both the frontend (Vite) and backend (Convex) servers simultaneously.

Open http://localhost:5173 in your browser – the app will hot-reload on changes.

Frontend Framework & Runtime

• React 19 with modern hooks and concurrent features, TypeScript for type safety, Vite for lightning-fast development

Styling & Animations

• Tailwind CSS for utility-first styling, GSAP for professional animations, Custom CSS for luxury aesthetics

3D & Graphics

• Spline Tool for 3D scene creation, React Spline integration for interactive elements, Optimized runtime performance

Backend & Database

• Convex for real-time backend services, Convex Auth for authentication, Real-time data synchronization

Performance & Optimization

• Lazy loading for components, Code splitting with manual chunks, Terser minification for production builds

Component-Based Architecture: Modular, reusable UI components with strict TypeScript typing

Real-time Data Layer: Convex backend with reactive queries and mutations for live updates

Advanced Animation System: GSAP integration with Spline 3D elements for premium user experience

Responsive & Accessible Design: Mobile-first Tailwind CSS with luxury dark theme aesthetics

Performance-First Approach: Lazy loading, code splitting, and optimized bundle management

✅ Strengths

• Modern React 19 with latest features and TypeScript
• Real-time backend with Convex for live data synchronization
• Premium 3D interactive user interface with Spline
• Professional GSAP animations for smooth user experience
• Mobile-responsive design with luxury aesthetics
• Performance optimized with lazy loading and code splitting

⚒️ Potential Improvements

• Implement comprehensive error boundaries
• Add unit and integration testing suite
• Enhance SEO optimization and meta tags
• Implement PWA capabilities for offline support
• Add comprehensive documentation
• Implement advanced state management for complex flows

Hero Section

• Interactive video background with blur-to-focus effect
• GSAP-powered staggered text animations
• Responsive design with luxury typography
• Smooth scroll indicators and call-to-action elements

Booking System

• Real-time appointment scheduling
• Service selection with pricing display
• Barber preference selection
• Form validation and confirmation system

Gallery Showcase

• Before/after transformation displays
• Category-based filtering system
• Responsive grid layout with hover effects
• Featured work highlighting

Team Profiles

• Professional barber showcases
• Specialty and experience highlighting
• Interactive profile cards
• Featured team member system

3D Spline Integration

• Interactive 3D scenes for visual appeal
• Optimized loading and performance
• Responsive 3D element positioning
• Smooth integration with React components

Built with precision for the modern barber shop experience. ✨

Built with inspiration from:

• Adrian Hajdin's JavaScript Mastery community JavaScript Mastery
• The React community for cutting-edge development patterns
• Convex team for revolutionary real-time backend solutions
• Spline community for accessible 3D web experiences
• GSAP team for professional animation libraries
• Tailwind CSS community for utility-first design principles
• Open-source contributors who share their knowledge freely

MIT License - see LICENSE.md for details.