simple-salon

byAmarjit Sharma

Build a modern, premium salon booking + real-time queue web app called "Snippr". 🎯 Goal: Create a clean, minimal, premium UI (like Apple / Stripe / Uber style) with smooth UX, not cluttered. The design must feel high-end and modern. ----------------------------------- 🧱 TECH STACK: - React + Vite - Tailwind CSS - Supabase (Auth + Database + Realtime) - Cloudflare Turnstile (bot protection) - Responsive (mobile-first) ----------------------------------- 🎨 UI DESIGN RULES: - Clean layout, lots of white space - Soft shadows, rounded-xl cards - Gradient primary color (purple → orange) - Smooth hover animations - No clutter, no unnecessary borders - Consistent spacing system - Glassmorphism for highlight sections - Sticky summary panel on desktop - Bottom sheet UI on mobile ----------------------------------- 🏠 LANDING PAGE: - Hero section with headline: "Skip the Wait. Join the Queue." - CTA buttons: - Find Salons - Owner Login / Register - Show nearby salons based on user location - Modern navbar with login/signup ----------------------------------- 👤 AUTH SYSTEM: - Customer login/signup (phone or email) - Owner login/signup (separate) - Use Supabase Auth - Add Cloudflare Turnstile on login/signup ----------------------------------- 👤 CUSTOMER PROFILE: - On first login → show modal: - First Name (required) - Last Name (required) - Phone Number (required) - Save profile in database - Next time → auto-fill details ----------------------------------- 📅 BOOKING FLOW (IMPORTANT): Create a clean 3-step layout: STEP 1: User Details - Auto-filled profile - Toggle: "Booking for someone else?" → If ON → show manual input fields STEP 2: Select Service - Card UI with: - Name - Duration - Price - Selectable with highlight STEP 3: Choose Barber - Show barber cards: - Name - Chair number - Rating - Availability (Available / Busy) STEP 4: Select Date & Time - Allow booking up to 30 days ahead - Time slots based on availability ----------------------------------- 📊 BOOKING SUMMARY (RIGHT PANEL): Sticky card showing: - Customer name - Selected service - Barber - Estimated wait time - Queue position (LIVE) - Total price CTA: 👉 "Join Queue" ----------------------------------- ⏱ REAL-TIME QUEUE SYSTEM: - Show live queue position - Update automatically using Supabase realtime - Show: - "If you join now: #3" - Estimated wait time (dynamic) - Queue logic: - FIFO (first come first serve) - Prevent cheating (no manual override) ----------------------------------- 👨‍💼 OWNER DASHBOARD: - Stats: - Total customers - Earnings - Active queue - Avg wait time - Manage: - Services - Barbers (with chair number) - Live queue - Add walk-in customers manually ----------------------------------- 📍 LOCATION FEATURE: - Detect user location - Show nearby salons - Sort by distance ----------------------------------- 🛡 SECURITY: - Cloudflare Turnstile on: - Login - Signup - Booking submission - Backend verification API ----------------------------------- 📱 RESPONSIVENESS: - Mobile: - Stack layout - Bottom sticky CTA - Tablet: - 2-column layout - Desktop: - 3-column layout with sticky summary ----------------------------------- ⚡ PERFORMANCE: - Fast loading - Lazy loading components - Optimized images ----------------------------------- 🎯 FINAL RESULT: A premium, scalable salon booking + queue system similar to: - Fresha - UrbanClap - Uber waiting system Focus heavily on: 👉 Clean UI 👉 Smooth UX 👉 Real-time updates 👉 No clutter 👉 Premium feel