# danzulbenavides/visionfit architecture

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

- Interactive diagram: https://gitdiagram.com/danzulbenavides/visionfit
- Repository: https://github.com/danzulbenavides/visionfit

## Overview

VisionFit is an eyewear commerce product: customers browse frames, scan their face, receive recommendations and try frames virtually, manage prescriptions, then purchase and track orders. Its mobile app and two web portals use an Express API backed by MongoDB; the API also integrates a Python facial-analysis service. The graph preserves the documented feature areas, while detailed internal links are limited to relationships visible in the README or sampled source/index; several feature implementations were not inspected.

Main entry points: [`backend/src/app.js`](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/app.js) (Express API), [`frontend/src/navigation/AppNavigator.js`](https://github.com/danzulbenavides/visionfit/blob/main/frontend/src/navigation/AppNavigator.js) (Mobile app), [`admin-web/src/api`](https://github.com/danzulbenavides/visionfit/tree/main/admin-web/src/api) (Admin and staff API clients), [`backend/src/models`](https://github.com/danzulbenavides/visionfit/tree/main/backend/src/models) (Commerce data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer experience"]
  node_mobile["Mobile app<br/>[AppNavigator.js]"]
  node_identity["Account and profile<br/>[AuthContext.js]"]
  node_catalog["Browse and favorites"]
  node_face["Face scan and measurements"]
  node_recommend["Recommendations and try-on"]
  node_prescription["Prescription management"]
  node_checkout["Cart and checkout"]
  node_orders["Orders and receipts"]
  node_learning["Education and reviews"]
  node_api["Customer API client"]
end

subgraph group_commerce["Commerce API"]
  node_backend["Express API<br/>[app.js]"]
  node_auth["Authentication<br/>[auth.controller.js]"]
  node_product["Product catalog"]
  node_order["Order processing"]
  node_reviews["Reviews"]
  node_data[("Commerce data")]
end

subgraph group_vision["Vision services"]
  node_ai["Facial analysis<br/>[main.py]"]
  node_face_service["Face analysis adapter"]
end

subgraph group_operations["Operations portals"]
  node_admin["Admin portal<br/>[AppRouter.tsx]"]
  node_staff["Staff portal<br/>[AppRouter.tsx]"]
  node_ops_api["Admin and staff API clients"]
end

node_customer(("Customer"))

node_customer -->|"uses"| node_mobile
node_mobile -->|"provides context"| node_identity
node_mobile -.->|"uses API"| node_api
node_api -->|"calls"| node_backend
node_backend -->|"routes requests"| node_auth
node_backend -->|"routes requests"| node_product
node_backend -->|"routes requests"| node_order
node_backend -->|"routes requests"| node_reviews
node_backend -.->|"integrates analysis"| node_face_service
node_backend -->|"persists data"| node_data
node_order -->|"reads and writes"| node_data
node_reviews -->|"reads and writes"| node_data
node_face_service -.->|"requests analysis"| node_ai
node_admin -.->|"uses API"| node_ops_api
node_staff -.->|"uses API"| node_ops_api
node_ops_api -->|"calls"| node_backend
node_admin -->|"administers"| node_backend
node_staff -.->|"supports operations"| node_backend

click node_mobile "https://github.com/danzulbenavides/visionfit/blob/main/frontend/src/navigation/AppNavigator.js"
click node_identity "https://github.com/danzulbenavides/visionfit/blob/main/frontend/src/context/AuthContext.js"
click node_catalog "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/products"
click node_face "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/scan"
click node_recommend "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/recommendations"
click node_prescription "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/prescriptions"
click node_checkout "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/checkout"
click node_orders "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/orders"
click node_learning "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/educational"
click node_api "https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/api"
click node_backend "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/app.js"
click node_auth "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/auth.controller.js"
click node_product "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/product.controller.js"
click node_order "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/order.controller.js"
click node_reviews "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/review.controller.js"
click node_data "https://github.com/danzulbenavides/visionfit/tree/main/backend/src/models"
click node_ai "https://github.com/danzulbenavides/visionfit/blob/main/ai-service/main.py"
click node_face_service "https://github.com/danzulbenavides/visionfit/blob/main/backend/src/services/faceAnalysis.service.js"
click node_admin "https://github.com/danzulbenavides/visionfit/blob/main/admin-web/src/router/AppRouter.tsx"
click node_staff "https://github.com/danzulbenavides/visionfit/blob/main/staff-web/src/router/AppRouter.tsx"
click node_ops_api "https://github.com/danzulbenavides/visionfit/tree/main/admin-web/src/api"

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_mobile,node_identity,node_catalog,node_face,node_recommend,node_prescription,node_checkout,node_orders,node_learning,node_api toneBlue
class node_backend,node_auth,node_product,node_order,node_reviews,node_data toneAmber
class node_ai,node_face_service toneMint
class node_admin,node_staff,node_ops_api toneRose
class node_customer toneIndigo
```

## Components

### Customer experience

- [Mobile app](https://github.com/danzulbenavides/visionfit/blob/main/frontend/src/navigation/AppNavigator.js): `frontend/src/navigation/AppNavigator.js`
- [Account and profile](https://github.com/danzulbenavides/visionfit/blob/main/frontend/src/context/AuthContext.js): `frontend/src/context/AuthContext.js`
- [Browse and favorites](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/products): `frontend/src/screens/products`
- [Face scan and measurements](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/scan): `frontend/src/screens/scan`
- [Recommendations and try-on](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/recommendations): `frontend/src/screens/recommendations`
- [Prescription management](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/prescriptions): `frontend/src/screens/prescriptions`
- [Cart and checkout](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/checkout): `frontend/src/screens/checkout`
- [Orders and receipts](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/orders): `frontend/src/screens/orders`
- [Education and reviews](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/screens/educational): `frontend/src/screens/educational`
- [Customer API client](https://github.com/danzulbenavides/visionfit/tree/main/frontend/src/api): `frontend/src/api`

### Commerce API

- [Express API](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/app.js): `backend/src/app.js`
- [Authentication](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [Product catalog](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/product.controller.js): `backend/src/controllers/product.controller.js`
- [Order processing](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/order.controller.js): `backend/src/controllers/order.controller.js`
- [Reviews](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/controllers/review.controller.js): `backend/src/controllers/review.controller.js`
- [Commerce data](https://github.com/danzulbenavides/visionfit/tree/main/backend/src/models): `backend/src/models`

### Vision services

- [Facial analysis](https://github.com/danzulbenavides/visionfit/blob/main/ai-service/main.py): `ai-service/main.py`
- [Face analysis adapter](https://github.com/danzulbenavides/visionfit/blob/main/backend/src/services/faceAnalysis.service.js): `backend/src/services/faceAnalysis.service.js`

### Operations portals

- [Admin portal](https://github.com/danzulbenavides/visionfit/blob/main/admin-web/src/router/AppRouter.tsx): `admin-web/src/router/AppRouter.tsx`
- [Staff portal](https://github.com/danzulbenavides/visionfit/blob/main/staff-web/src/router/AppRouter.tsx): `staff-web/src/router/AppRouter.tsx`
- [Admin and staff API clients](https://github.com/danzulbenavides/visionfit/tree/main/admin-web/src/api): `admin-web/src/api`

### Other components

- **Customer**

## Connections

- Customer → Mobile app: uses (evidence: `README.md`)
- Mobile app → Account and profile: provides context (evidence: `frontend/App.js`)
- Mobile app → Customer API client: uses API
- Customer API client → Express API: calls (evidence: `README.md`)
- Express API → Authentication: routes requests (evidence: `backend/src/app.js`)
- Express API → Product catalog: routes requests (evidence: `backend/src/app.js`)
- Express API → Order processing: routes requests (evidence: `backend/src/app.js`)
- Express API → Reviews: routes requests (evidence: `backend/src/app.js`)
- Express API → Face analysis adapter: integrates analysis
- Express API → Commerce data: persists data (evidence: `README.md`)
- Order processing → Commerce data: reads and writes (evidence: `backend/src/controllers/order.controller.js`)
- Reviews → Commerce data: reads and writes (evidence: `backend/src/controllers/review.controller.js`)
- Face analysis adapter → Facial analysis: requests analysis
- Admin portal → Admin and staff API clients: uses API
- Staff portal → Admin and staff API clients: uses API
- Admin and staff API clients → Express API: calls (evidence: `README.md`)
- Admin portal → Express API: administers (evidence: `README.md`)
- Staff portal → Express API: supports operations