236 lines
6.9 KiB
Markdown
236 lines
6.9 KiB
Markdown
# 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
|
|
|
|
1. **Clone the repository**
|
|
```bash
|
|
git clone <repository-url>
|
|
cd AppBarber
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Set up environment variables**
|
|
Create a `.env` file in the root directory:
|
|
```env
|
|
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
|
|
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
|
```
|
|
|
|
4. **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
|
|
|
|
5. **Start the development server**
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
6. **Run on device/simulator**
|
|
```bash
|
|
npm run android # For Android
|
|
npm run ios # For iOS
|
|
npm run web # For web
|
|
```
|
|
|
|
## Configuration
|
|
|
|
### Supabase Setup
|
|
1. Create a new project at [supabase.com](https://supabase.com)
|
|
2. Run the provided SQL schema in the Supabase SQL editor
|
|
3. Enable authentication providers
|
|
4. Configure Row Level Security policies
|
|
|
|
### Environment Variables
|
|
Copy `.env.example` to `.env` and fill in your credentials:
|
|
- `EXPO_PUBLIC_SUPABASE_URL`: Your Supabase project URL
|
|
- `EXPO_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
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Add tests if applicable
|
|
5. 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 🎯✨
|