AppBarber - Premium Barber Shop Mobile App
A modern, premium barber shop booking and management application built with React Native and Expo.
Features
🎯 Core Functionality
- Multi-Role System: Customer, Barber, and Admin roles
- Appointment Booking: Complete booking flow with availability checking
- Real-time Availability: Prevents double bookings
- Service Management: Browse and book various barber services
- Barber Profiles: View barber ratings, specialties, and portfolios
- User Profiles: Booking history and loyalty points system
🎨 Premium Design
- Dark Theme: Luxury black and gold color palette
- Modern UI: Clean, card-based interface
- Responsive Design: Mobile-first approach
- Smooth Animations: Premium user experience
🔐 Authentication
- Secure Login/Signup: Email-based authentication
- Role-Based Access: Different features for different user types
- Profile Management: Users can update their information
📊 Admin Dashboard
- Booking Management: View and manage all appointments
- Analytics: Revenue statistics and daily appointments
- Staff Management: Manage barbers and services
- Real-time Updates: Live booking status management
Tech Stack
Frontend
- React Native with Expo
- TypeScript for type safety
- React Navigation for navigation
- React Native Paper for UI components
- Expo Linear Gradient for premium styling
Backend
- Supabase for database and authentication
- PostgreSQL database with Row Level Security
- Real-time subscriptions for live updates
Integrations
- Supabase Auth for user authentication
- Cloudinary for image uploads (configured)
- Stripe for payments (configured)
- Expo Notifications for push notifications
Project Structure
src/
├── components/ # Reusable UI components
│ ├── ServiceCard.tsx
│ ├── BarberCard.tsx
│ ├── BookingCard.tsx
│ └── ReviewCard.tsx
├── screens/ # App screens
│ ├── auth/ # Authentication screens
│ ├── admin/ # Admin dashboard
│ ├── HomeScreen.tsx
│ ├── ServicesScreen.tsx
│ ├── BarbersScreen.tsx
│ ├── BookingScreen.tsx
│ └── ProfileScreen.tsx
├── navigation/ # Navigation configuration
├── context/ # React Context
├── services/ # API services
├── constants/ # App constants and theme
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
Database Schema
Main Tables
- users: User profiles and authentication
- barbers: Barber-specific information
- services: Available services and pricing
- bookings: Appointment records
- reviews: Customer reviews and ratings
- promotions: Special offers and discounts
Key Features
- Row Level Security: Secure data access
- Real-time Updates: Live booking status
- Foreign Key Constraints: Data integrity
- Indexes: Optimized queries
Getting Started
Prerequisites
- Node.js 16+
- Expo CLI
- Supabase account
Installation
- Clone the repository
git clone <repository-url>
cd AppBarber
- Install dependencies
npm install
- Set up environment variables
Create a
.envfile in the root directory:
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
- Set up Supabase database
- Create a new Supabase project
- Run the SQL schema from
database/schema.sql - Configure authentication settings
- Set up Row Level Security policies
- Start the development server
npm start
- Run on device/simulator
npm run android # For Android
npm run ios # For iOS
npm run web # For web
Configuration
Supabase Setup
- Create a new project at supabase.com
- Run the provided SQL schema in the Supabase SQL editor
- Enable authentication providers
- Configure Row Level Security policies
Environment Variables
Copy .env.example to .env and fill in your credentials:
EXPO_PUBLIC_SUPABASE_URL: Your Supabase project URLEXPO_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key
Key Features Implementation
Booking Logic
- Availability Checking: Prevents double bookings
- Time Slot Management: 30-minute intervals from 9 AM to 6 PM
- Date Validation: Prevents booking past dates
- Status Management: Pending → Confirmed → Completed flow
Authentication Flow
- Email/Password Login: Secure authentication
- Role Assignment: Customer, Barber, or Admin
- Profile Creation: Automatic user profile creation
- Session Management: Persistent login state
Admin Features
- Dashboard Analytics: Real-time statistics
- Booking Management: Approve/cancel appointments
- Revenue Tracking: Financial insights
- Staff Oversight: Barber performance monitoring
UI/UX Features
Premium Design Elements
- Dark Theme: Modern black and gold palette
- Card-Based Layout: Clean, organized content
- Gradient Accents: Premium visual effects
- Smooth Transitions: Professional animations
User Experience
- Intuitive Navigation: Bottom tab navigation
- Progressive Disclosure: Step-by-step booking
- Real-time Feedback: Loading states and confirmations
- Error Handling: User-friendly error messages
Development Guidelines
Code Style
- TypeScript: Strict typing throughout
- Component Architecture: Reusable, modular components
- State Management: React Context for global state
- Error Boundaries: Graceful error handling
Best Practices
- Performance: Optimized re-renders and queries
- Security: Row Level Security and input validation
- Accessibility: Screen reader support and semantic markup
- Testing: Component testing recommended
Future Enhancements
Planned Features
- Push Notifications: Booking reminders
- Payment Integration: Stripe payment processing
- Calendar Sync: Export to device calendars
- Loyalty Program: Points and rewards system
- Multi-language Support: Internationalization
Technical Improvements
- Offline Support: Cached data and offline mode
- Performance Optimization: Code splitting and lazy loading
- Advanced Analytics: User behavior tracking
- API Rate Limiting: Prevent abuse
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
License
This project is licensed under the MIT License.
Support
For support and questions:
- Create an issue in the repository
- Check the documentation
- Review the code comments
AppBarber - Premium barber shop management solution 🎯✨