A full-stack, mobile-first app, The all-in-one home services platform for the Arabic world. Browse verified craftsmen, compare prices, view before/after portfolios, book instantly, and track your orders , all from your phone.
Hirfa is a complete home maintenance platform built with Next.js 16 and Supabase. It serves three user types:
- Clients β Browse craftsmen and organizations, book services, request emergency help, manage orders and wallet
- Craftsmen (Workers) β Manage gallery with before/after photos, accept/reject orders, set services, manage schedule and payments
- Organizations β Manage a team of craftsmen under one brand, handle org bookings, assign workers, manage services and portfolio
- Phone-based login with OTP verification
- Role selection (Client / Craftsman)
- Multi-step onboarding flow with splash, welcome, intro carousel, and success animation
| Feature | Description |
|---|---|
| Home | Category grid, featured craftsmen & organizations, nearby listings |
| Craftsman Profile | Full profile with before/after gallery, services, reviews, booking CTA |
| Organization Profile | Org profile with services catalog, portfolio gallery, workers, reviews |
| Gallery Modal | Card-based photo viewer with navigation (before/after comparison) |
| Booking | 4-step wizard with date picker, time slots, address, payment method |
| Emergency SOS | Quick emergency booking with live tracking simulation |
| Orders | Track orders β shows org name + worker name for org bookings |
| Invoice | Final invoice with org branding for org bookings |
| Rating | Rate workers or organizations after completion |
| Wallet | Deposit, cards management, transaction history |
| Addresses | Saved addresses with CRUD |
| Search | Search craftsmen by name or profession |
| Notifications | Real-time notifications |
| Profile | Edit personal info, settings menu |
| Feature | Description |
|---|---|
| Home | Availability toggle, new requests, appointments, quick links |
| Orders | Accept/reject orders, update status, order cards with emergency badge |
| Gallery | Add/delete before/after work photos with card modal |
| Services | Manage offered services and pricing |
| Messages | Chat with clients |
| Schedule | Manage availability and appointments |
| Notifications | In-app notifications |
| Profile | Edit info, verification status, payment methods, help, terms |
| Wallet | Earnings overview, withdrawals |
| Calendar | View booked appointments |
| Org Rating | Rating as part of an organization shown on profile |
| Feature | Description |
|---|---|
| Dashboard | Real-time stats (bookings, revenue, pending/completed), recent orders, rating |
| Orders Management | View all org bookings, accept/reject, assign workers, update tracking status |
| Worker Assignment | Assign org workers to bookings, search linked accounts, send notifications |
| Workers Management | Dedicated workers page β add, remove, search linked accounts, portfolio upload |
| Services Management | Manage org services and pricing |
| Portfolio Gallery | Upload/remove org portfolio photos (up to 5) |
| Organization Profile | Create/edit org with name, category, city, logo, description |
| Plan System | Free plan with worker limits, Pro plan for unlimited workers |
| Wallet | Org wallet with earnings, withdrawals, transaction history |
| Messages | Chat with clients |
| Settings | Org settings and configuration |
- User management, system rules, content moderation
The platform supports a full organization management system where craftsmen can form organizations and manage teams.
- Worker creates an organization via their profile β becomes the owner
- Owner adds workers to the org (search by name/phone, link accounts)
- Clients browse organizations alongside individual craftsmen
- Client books an org β order appears in the org's dashboard
- Owner assigns a worker to the booking
- Worker completes the job β confirmation code flow
- Payment goes to the org owner's wallet (not the individual worker)
- Client rates β rating goes to both the worker and the organization
| Component | Description |
|---|---|
| Org Profile (Client) | Services catalog, portfolio gallery (5 photos), workers list, reviews |
| Org Dashboard (Owner) | Stats grid, recent orders, gallery management, quick actions |
| Org Orders | Full order list with worker assignment, tracking updates, status badges |
| Org Workers | Add/remove workers, search linked accounts, portfolio upload (4 photos) |
| Org Wallet | Earnings from all org bookings, transaction history, withdrawals |
| Org Booking Flow | Client selects org service β default schedule β org owner assigns worker |
organizationsβ org profile with name, category, city, logo, plan, ratingorganization_workersβ workers linked to an org (linked_user_id β auth.users)organization_worker_portfolioβ portfolio photos per workerorganization_reviewsβ client reviews for the org (auto-updated via trigger)organization_galleryβ org portfolio photosorganization_servicesβ services offered by the org- Bookings link to org via
organization_idandassigned_worker_id
- Worker ratings: stored in
reviewstable, average onprofiles.rating - Org ratings: stored in
organization_reviewstable, average onorganizations.rating - Auto-propagation: when a worker review is inserted and the worker belongs to an org, a database trigger automatically inserts an org review β keeping org ratings in sync
- Workers see "ΨͺΩΩΩΩ ΩΨ¬Ψ²Ψ‘ Ω Ω Ψ§ΩΩ Ψ€Ψ³Ψ³Ψ©" (rating as part of organization) on their profile
- Direct bookings: money goes to the worker's wallet
- Org bookings: money goes to the org owner's wallet
- Commission rate determined by the recipient's subscription tier
- Transactions logged with
(Ω Ψ€Ψ³Ψ³Ψ©)label for org bookings
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 + custom dark theme |
| Database | Supabase (PostgreSQL with RLS) |
| Auth | Supabase Auth (phone OTP) |
| Icons | Lucide React |
| Maps | Leaflet / Mapbox GL |
| Animations | Framer Motion |
| Internationalization | next-intl (Arabic RTL-first) |
| State | React Hooks + TanStack Query |
| UI Primitives | shadcn/ui + Base UI |
Hirfa/
βββ app/
β βββ (auth)/ # Login, register, OTP, verification
β βββ (main)/ # Worker pages (home, orders, gallery, etc.)
β βββ (onboarding)/ # Splash, welcome, intro, success
β βββ admin/ # Admin dashboard
β βββ api/ # Supabase API routes
β βββ client/ # Client pages (craftsman, booking, wallet, etc.)
β β βββ organization/ # Org profile page (client view)
β β βββ craftsman/ # Worker profile page (client view)
β β βββ booking/ # Booking flow (individual & org)
β β βββ orders/ # Client orders list
β β βββ order/ # Order detail, invoice, success
β β βββ rate-review/ # Rating page (workers & orgs)
β β βββ services/ # Category services listing
β β βββ ...
β βββ organization/ # Org owner dashboard
β β βββ home/ # Dashboard with stats, orders, gallery
β β βββ orders/ # Org orders with worker assignment
β β βββ workers/ # Workers management (add, search, portfolio)
β β βββ messages/ # Org messages
β β βββ wallet/ # Org wallet & earnings
β β βββ settings/ # Org settings
β βββ globals.css # Global styles + design tokens
β βββ layout.tsx # Root layout with RTL and fonts
β βββ page.tsx # Splash redirect
βββ components/
β βββ auth/ # ProtectedRoute, Route guards
β βββ shared/ # CraftsmanCard, CategoryCard, OTPInput
β βββ ui/ # BeforeAfterCard, ImageUploader, modals, etc.
β βββ orders/ # OrderCard, OrdersTabs (supports org bookings)
β βββ profile/ # StatCard, ReviewCard, MenuGroup, etc.
β βββ wallet/ # WalletBalanceCard, TransactionCard
βββ contexts/ # AuthContext
βββ hooks/ # useGallery, useCraftsmanProfile, useOrganization, etc.
βββ lib/ # Types, utils, Supabase client/server
β βββ supabase/ # booking-payments.ts (handles org payments)
βββ services/ # Auth and profile services
βββ supabase/ # Migrations, schema
βββ public/ # Static assets
One-tap emergency booking that auto-fills user address and creates an urgent order with real-time tracking simulation.
- Node.js (v18+)
- pnpm (recommended) or npm/yarn
- Supabase account & project
Create a .env or .env.local file in the root directory and add the following keys:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# SMTP Configuration for Emails
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=your_email@example.com
SMTP_PASS=your_email_password
SMTP_FROM=noreply@example.com
# Map Integrations
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key- Clone the repository and install dependencies:
git clone https://github.com/your-username/Hirfa.git
cd Hirfa
pnpm install- Start the development server:
pnpm run dev- Open http://localhost:3000 in your browser.
The project uses Next.js with specialized build commands for different targets:
pnpm run build:webβ Standard Next.js production build for web hosting (Vercel, etc.).pnpm run build:capacitorβ Specialized static export build (output: 'export') that compiles the app for Capacitor, generating static HTML/JS files in theoutdirectory.
Hirfa is built as a mobile-first application and is compiled into a native Android APK using Capacitor.
The project is equipped with a robust GitHub Actions workflow (.github/workflows/build-apk.yml) that automatically builds the Android APK upon pushing to any branch.
- It builds the Next.js app using
pnpm run build:capacitor. - It safely configures Capacitor and runs
npx cap sync android. - It compiles the APK using Gradle (
assembleDebug). - The resulting
app-debug.apkis available as a downloadable artifact directly from the Actions tab on GitHub.
If you want to build the APK locally on your machine:
- Build the web assets specifically for Capacitor:
pnpm run build:capacitor- Sync the web assets with the Android project:
npx cap sync android- Open the project in Android Studio (or build via CLI):
npx cap open androidWe welcome contributions! Please see our Contributing Guide for detailed instructions on how to set up your environment, follow our coding standards, and submit pull requests.
Hirfa Team β All rights reserved.
Built with β€οΈ for the Arabic-speaking world
ΨΩΨ±ΩΨ© β ΩΨ£Ω ΨΨ±ΩΨͺΩ ΨͺΨ³ΨͺΨΩ Ψ§ΩΨ£ΩΨΆΩ