# ahmedshaban-blip/enjezmobileappversion architecture

> Architecture diagram of the GitHub repository ahmedshaban-blip/enjezmobileappversion, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ahmedshaban-blip/enjezmobileappversion
- Repository: https://github.com/ahmedshaban-blip/enjezmobileappversion

## Overview

1. **Overall shape**
   - This is a **React Native + Expo mobile app** with a classic layered structure: entry files at the root, shared infrastructure in `src/config`, global state in `src/context` and `src/hooks`, navigation in `src/navigation`, feature screens in `src/pages`, and reusable UI in `src/components`.

2. **App bootstrap**
   - `index.js` and `App.js` are the root entry points.
   - They likely initialize the app shell, mount global providers, and hand control to the navigation layer.
   - `app.json`, `eas.json`, Babel, Tailwind/NativeWind, and Expo config files shape build/runtime behavior rather than business logic.

3. **Navigation and route boundaries**
   - The app is split into **auth**, **client**, and **admin** areas.
   - `src/navigation/UserDrawer.jsx` suggests a drawer-based shell for signed-in users.
   - `src/components/layout/ProtectedRoute.jsx` indicates route gating based on authentication/role, so navigation is the main boundary between public and protected flows.

4. **Authentication and session state**
   - `src/hooks/AuthContext.jsx` and `src/hooks/useAuth.js` manage auth state and expose it to screens.
   - `src/context/LoadingContext.jsx` handles app-wide loading state.
   - Auth drives access to the client and admin sections, and likely controls whether the app shows login/signup, a splash/loading state, or the main drawer experience.

5. **Backend/data layer**
   - `src/config/firebase.js` is the main backend bootstrap and aligns with the README’s Firebase Auth + Firestore architecture.
   - `src/utils/firebaseHelpers.js` centralizes Firebase read/write logic so screens/components do not talk to Firebase directly.
   - `src/config/supabase.js` exists as a secondary backend config, but from the tree alone it looks auxiliary or legacy rather than the primary datastore.

6. **Domain modules: client experience**
   - `src/pages/client/*` contains the user-facing product flow: home, services, service details, booking, booking details, confirmation, profile, about/contact, and “how it works.”
   - `src/components/client/*` provides screen-specific building blocks such as headers, hero sections, categories, popular services, booking items, and service detail panels.
   - This is the core browse → inspect → book → track lifecycle.

7. **Domain modules: admin experience**
   - `src/pages/admin/*` contains operational screens: dashboard, add service, and agent bookings.
   - This is a separate control plane from the client flow, intended for managing listings and booking operations.
   - In an architecture diagram, this should be shown as a distinct role-based branch off the authenticated app.

8. **Shared UI and composition**
   - `src/components/common/*` holds reusable features that span multiple screens: auth card, booking form, service card, chatbot, logo/header, and loading spinner.
   - `src/components/ui/*` contains low-level primitives like `Button` and `Input`, which are likely used throughout the app.
   - `src/components/layout/*` provides shell-level pieces such as auth layout, navbar, sidebar, and protected-route wrappers.

9. **Booking and commerce flow**
   - The booking process is encapsulated in `BookingForm`, `BookingItem`, booking pages, and confirmation pages.
   - The README mentions **PayPal via WebView** and an **offline payment option**, so payment is an external step inside the booking pipeline rather than a separate backend service in this repo.
   - Booking status management appears to be a key data model: pending, confirmed, completed, and cancellation.

10. **Recommendations and personalization**
   - `src/components/client/RecommendationSection.jsx` and the README’s “Picked Just for You” feature indicate personalized service ranking.
   - This likely reads from booking history via Firebase and surfaces recommended services on the home screen.
   - The recommendation logic appears to be a UI-facing feature backed by app data rather than a separate service.

11. **AI and notifications**
   - `src/utils/aiService.js` and `src/components/common/Chatbot.jsx` show an AI-assisted support or discovery feature.
   - `src/config/notificationService.js` suggests push/local notification integration for booking or status updates.
   - These are cross-cutting integrations that sit beside the main booking and auth flow.

12. **Design system and styling**
   - The app uses **NativeWind/Tailwind-style utility classes**, plus React Native Expo components and likely React Native Paper based on the README.
   - `tailwind.config.js` and `nativewind.config.js` define the styling system, while `assets/` supplies logos and screenshots.
   - This means UI composition is utility-driven rather than heavily bespoke per screen.

13. **Primary end-to-end data flow**
   - A user starts at the splash/auth layer, authenticates through Firebase, enters the role-appropriate navigation shell, browses services, opens details, creates a booking, and then tracks/cancels that booking from the client area.
   - Admin users follow a parallel authenticated path to manage services and inspect bookings.
   - Most state changes ultimately flow through the Firebase helper/config layer, with contexts coordinating loading/auth UI state.

14. **What to show in an architecture diagram**
   - Show three top-level zones: **public/auth**, **client app**, **admin app**.
   - Put **contexts/hooks** as cross-cutting services feeding both app zones.
   - Put **Firebase/Firestore/Auth** as the primary backend dependency, with **PayPal WebView**, **notifications**, and **AI/chatbot** as secondary integrations.
   - Keep **components/layout/ui** as the presentation layer under each screen group, not as separate business subsystems.

Main entry points: [`App.js`](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/App.js) (App.js), [`src/pages/client`](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/client) (Client home), [`src/components/common`](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/common) (Common UI), [`src/utils/firebaseHelpers.js`](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/utils/firebaseHelpers.js) (Firebase helpers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_public["Public/Auth"]
  node_node_index["index.js<br/>entry<br/>[index.js]"]
  node_node_app["App.js<br/>app shell<br/>[App.js]"]
  node_node_splash["SplashScreen<br/>startup UI<br/>[SplashScreen.jsx]"]
  node_node_auth_pages["Login/Signup<br/>auth screens"]
end

subgraph group_group_client["Client App"]
  node_node_client_home["Client home<br/>client screens"]
  node_node_client_components["Client UI<br/>client components"]
end

subgraph group_group_admin["Admin App"]
  node_node_admin_pages["Admin tools<br/>admin screens"]
end

subgraph group_group_shared["Shared App Layer"]
  node_node_auth_context[("Auth state<br/>auth context<br/>[AuthContext.jsx]")]
  node_node_loading_context[("Loading state<br/>ui context<br/>[LoadingContext.jsx]")]
  node_node_protected_route["ProtectedRoute<br/>route guard<br/>[ProtectedRoute.jsx]"]
  node_node_user_drawer["UserDrawer<br/>nav shell<br/>[UserDrawer.jsx]"]
  node_node_booking_form["Booking form<br/>booking UI<br/>[BookingForm.jsx]"]
  node_node_common_ui["Common UI<br/>shared components"]
  node_node_layout_ui["Layout UI<br/>layout components"]
  node_node_design["Styling<br/>design system<br/>[tailwind.config.js]"]
end

subgraph group_group_backend["Backend"]
  node_node_firebase[("Firebase<br/>backend<br/>[firebase.js]")]
  node_node_firebase_helpers["Firebase helpers<br/>data access<br/>[firebaseHelpers.js]"]
  node_node_supabase[("Supabase<br/>secondary backend<br/>[supabase.js]")]
end

subgraph group_group_integrations["Integrations"]
  node_node_notifications["Notifications<br/>integration"]
  node_node_ai["AI service<br/>integration<br/>[aiService.js]"]
end

node_node_index -->|"boots"| node_node_app
node_node_app -->|"shows"| node_node_splash
node_node_app -->|"provides"| node_node_auth_context
node_node_app -->|"provides"| node_node_loading_context
node_node_app -->|"routes to"| node_node_user_drawer
node_node_auth_pages -->|"updates"| node_node_auth_context
node_node_protected_route -->|"checks"| node_node_auth_context
node_node_user_drawer -->|"wraps"| node_node_protected_route
node_node_user_drawer -->|"navigates"| node_node_client_home
node_node_user_drawer -->|"navigates"| node_node_admin_pages
node_node_client_home -->|"uses"| node_node_client_components
node_node_client_home -->|"books"| node_node_booking_form
node_node_client_home -->|"uses"| node_node_common_ui
node_node_admin_pages -->|"uses"| node_node_common_ui
node_node_admin_pages -->|"manages data"| node_node_firebase_helpers
node_node_booking_form -->|"writes"| node_node_firebase_helpers
node_node_client_home -->|"reads"| node_node_firebase_helpers
node_node_firebase_helpers -->|"calls"| node_node_firebase
node_node_firebase_helpers -.->|"optional"| node_node_supabase
node_node_common_ui -->|"chat support"| node_node_ai
node_node_common_ui -->|"status alerts"| node_node_notifications
node_node_layout_ui -->|"styled by"| node_node_design
node_node_client_components -->|"styled by"| node_node_design
node_node_common_ui -->|"styled by"| node_node_design

click node_node_index "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/index.js"
click node_node_app "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/App.js"
click node_node_splash "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/SplashScreen.jsx"
click node_node_auth_pages "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/auth"
click node_node_auth_context "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/hooks/AuthContext.jsx"
click node_node_loading_context "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/context/LoadingContext.jsx"
click node_node_protected_route "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/layout/ProtectedRoute.jsx"
click node_node_user_drawer "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/navigation/UserDrawer.jsx"
click node_node_client_home "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/client"
click node_node_client_components "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/client"
click node_node_booking_form "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/common/BookingForm.jsx"
click node_node_common_ui "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/common"
click node_node_layout_ui "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/layout"
click node_node_admin_pages "https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/admin"
click node_node_firebase "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/firebase.js"
click node_node_firebase_helpers "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/utils/firebaseHelpers.js"
click node_node_supabase "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/supabase.js"
click node_node_notifications "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/notificationService.js"
click node_node_ai "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/utils/aiService.js"
click node_node_design "https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/tailwind.config.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_index,node_node_app,node_node_splash,node_node_auth_pages toneBlue
class node_node_client_home,node_node_client_components toneAmber
class node_node_admin_pages toneMint
class node_node_auth_context,node_node_loading_context,node_node_protected_route,node_node_user_drawer,node_node_booking_form,node_node_common_ui,node_node_layout_ui,node_node_design toneRose
class node_node_firebase,node_node_firebase_helpers,node_node_supabase toneIndigo
class node_node_notifications,node_node_ai toneTeal
```

## Components

### Public/Auth

Entry, splash, and authentication flow before protected app areas.

- [index.js](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/index.js): entry · Native app entrypoint. · `index.js`
- [App.js](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/App.js): app shell · Root application bootstrap and provider setup. · `App.js`
- [SplashScreen](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/SplashScreen.jsx): startup UI · Initial loading or splash screen. · `src/components/SplashScreen.jsx`
- [Login/Signup](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/auth): auth screens · Public authentication screens for sign-in and account creation. · `src/pages/auth`

### Client App

End-user browsing, booking, profile, and tracking experience.

- [Client home](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/client): client screens · Home, services, details, booking, profile, and informational screens. · `src/pages/client`
- [Client UI](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/client): client components · Screen-specific components for browsing and booking flows. · `src/components/client`

### Admin App

Operational screens for managing services and bookings.

- [Admin tools](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/pages/admin): admin screens · Dashboard, service management, and booking oversight for operators. · `src/pages/admin`

### Shared App Layer

Reusable layout, state, hooks, and UI primitives used across flows.

- [Auth state](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/hooks/AuthContext.jsx): auth context · Authentication state and session exposure to the app. · `src/hooks/AuthContext.jsx`
- [Loading state](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/context/LoadingContext.jsx): ui context · Global loading coordination for app-wide busy states. · `src/context/LoadingContext.jsx`
- [ProtectedRoute](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/layout/ProtectedRoute.jsx): route guard · Role and auth gating for protected navigation. · `src/components/layout/ProtectedRoute.jsx`
- [UserDrawer](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/navigation/UserDrawer.jsx): nav shell · Drawer-based navigation shell for signed-in users. · `src/navigation/UserDrawer.jsx`
- [Booking form](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/components/common/BookingForm.jsx): booking UI · Shared booking capture and submission component. · `src/components/common/BookingForm.jsx`
- [Common UI](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/common): shared components · Reusable app-wide UI such as auth cards, cards, chatbot, headers, and spinners. · `src/components/common`
- [Layout UI](https://github.com/ahmedshaban-blip/enjezmobileappversion/tree/main/src/components/layout): layout components · App shell pieces such as navbar, sidebar, auth layout, and protected wrapper. · `src/components/layout`
- [Styling](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/tailwind.config.js): design system · Tailwind/NativeWind configuration and utility-based styling layer. · `tailwind.config.js`

### Backend

Primary data and backend integration layer.

- [Firebase](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/firebase.js): backend · Primary auth and Firestore backend bootstrap. · `src/config/firebase.js`
- [Firebase helpers](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/utils/firebaseHelpers.js): data access · Centralized read/write helpers around Firebase operations. · `src/utils/firebaseHelpers.js`
- [Supabase](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/supabase.js): secondary backend · Auxiliary or legacy backend configuration. · `src/config/supabase.js`

### Integrations

Secondary services and external capabilities alongside the core backend.

- [Notifications](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/config/notificationService.js): integration · Push or local notification service for booking updates. · `src/config/notificationService.js`
- [AI service](https://github.com/ahmedshaban-blip/enjezmobileappversion/blob/main/src/utils/aiService.js): integration · AI-assisted support or discovery logic used by chatbot features. · `src/utils/aiService.js`

## Connections

- index.js → App.js: boots · Native entry starts the root app.
- App.js → SplashScreen: shows · App may begin with splash/loading experience.
- App.js → Auth state: provides · Root bootstrap wires authentication state.
- App.js → Loading state: provides · Root bootstrap wires global loading state.
- App.js → UserDrawer: routes to · Authenticated users enter the main navigation shell.
- Login/Signup → Auth state: updates · Login and signup mutate session state.
- ProtectedRoute → Auth state: checks · Route guard reads auth and role state.
- UserDrawer → ProtectedRoute: wraps · Signed-in shell sits behind protected access.
- UserDrawer → Client home: navigates · Drawer exposes client screens.
- UserDrawer → Admin tools: navigates · Role-based branch to admin screens.
- Client home → Client UI: uses · Client screens compose dedicated UI blocks.
- Client home → Booking form: books · Booking flow submits through shared booking form.
- Client home → Common UI: uses · Client screens reuse common UI elements.
- Admin tools → Common UI: uses · Admin screens reuse shared UI components.
- Admin tools → Firebase helpers: manages data · Admin flows operate through centralized backend helpers.
- Booking form → Firebase helpers: writes · Booking submissions persist through helper layer.
- Client home → Firebase helpers: reads · Client listings, profiles, and bookings read from backend helpers.
- Firebase helpers → Firebase: calls · Helpers delegate to Firebase services.
- Firebase helpers → Supabase: optional · Secondary backend config exists alongside Firebase.
- Common UI → AI service: chat support · Chatbot and support UI can invoke AI features.
- Common UI → Notifications: status alerts · Shared features may trigger booking notifications.
- Layout UI → Styling: styled by · Layout and shell components use utility styling.
- Client UI → Styling: styled by · Client-facing UI follows the shared design system.
- Common UI → Styling: styled by · Reusable components rely on the same styling layer.