# mhacccc/ping-me-safetyapp architecture

> Architecture diagram of the GitHub repository mhacccc/ping-me-safetyapp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mhacccc/ping-me-safetyapp
- Repository: https://github.com/mhacccc/ping-me-safetyapp

## Overview

PingMe is a mobile-first safety PWA for people using a GPS/SOS bracelet and their trusted family observers. Users sign in, view linked people and live bracelet status/location, manage safe zones, and review notifications and incident reports. Bracelet SOS status drives alert records, report creation, and optional emergency SMS; geofence monitoring produces entry/exit alerts. The tree and excerpts support these core flows, but not the implementation details of every page or provider. The admin area is explicitly a local mock backed by browser storage, separate from Firebase user operations.

Main entry points: [`src/layouts/AppLayout.jsx`](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/layouts/AppLayout.jsx) (User app layout), [`src/App.jsx`](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/App.jsx) (Application routes), [`src/hooks/useBraceletData.js`](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/hooks/useBraceletData.js) (Bracelet data sync), [`src/context/GeofenceMonitorProvider.jsx`](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/GeofenceMonitorProvider.jsx) (Geofence monitoring)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["PWA experience"]
  node_app["Application routes<br/>[App.jsx]"]
  node_layout["User app layout<br/>[AppLayout.jsx]"]
  node_home["Safety home<br/>[Home.jsx]"]
  node_people["People tracking<br/>[People.jsx]"]
  node_places["Safe places<br/>[Places.jsx]"]
  node_reports["Incident reports<br/>[Report.jsx]"]
  node_reportdetail["Report details<br/>[ReportDetail.jsx]"]
  node_notifications["Notifications<br/>[Notifications.jsx]"]
end

subgraph group_identity["Identity and setup"]
  node_auth["Authentication<br/>[AuthContext.jsx]"]
  node_login["Sign-in and signup<br/>[Login.jsx]"]
  node_onboarding["Onboarding<br/>[Onboarding.jsx]"]
end

subgraph group_safety["Tracking and response"]
  node_braceletdata["Bracelet data sync<br/>[useBraceletData.js]"]
  node_history["Location history"]
  node_geofence["Geofence monitoring"]
  node_geofenceservice["Geofence operations<br/>[geofenceService.js]"]
  node_notificationservice["Alert persistence"]
  node_smsservice["SMS delivery<br/>[smsService.js]"]
  node_firebaseconfig["Firebase connection<br/>[firebaseConfig.js]"]
end

subgraph group_admin["Local admin"]
  node_admin["Admin pages<br/>[AdminDashboard.jsx]"]
  node_adminservice["Mock admin data"]
end

node_user(("Safety user"))
node_bracelet(("SOS bracelet"))
node_firebase[("Firebase")]
node_sms{{"Semaphore SMS"}}

node_user -->|"opens"| node_app
node_app -->|"provides auth"| node_auth
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_onboarding
node_app -->|"routes to"| node_layout
node_layout -->|"renders"| node_home
node_layout -->|"renders"| node_people
node_layout -->|"renders"| node_places
node_layout -->|"renders"| node_reports
node_layout -->|"renders"| node_reportdetail
node_layout -->|"renders"| node_notifications
node_auth -->|"uses"| node_firebaseconfig
node_firebaseconfig -->|"connects"| node_firebase
node_bracelet -->|"sends status"| node_firebase
node_home -->|"reads status"| node_braceletdata
node_people -->|"reads tracking"| node_braceletdata
node_braceletdata -->|"reads live data"| node_firebase
node_history -->|"subscribes history"| node_firebase
node_places -->|"manages zones"| node_geofence
node_geofence -->|"uses operations"| node_geofenceservice
node_geofence -->|"saves alerts"| node_notificationservice
node_notificationservice -->|"writes alerts"| node_firebase
node_braceletdata -->|"records SOS"| node_notificationservice
node_braceletdata -->|"writes reports"| node_firebase
node_braceletdata -->|"requests SMS"| node_smsservice
node_smsservice -.->|"sends messages"| node_sms
node_notifications -->|"reads alerts"| node_firebase
node_reports -->|"reads reports"| node_firebase
node_reportdetail -->|"reads report"| node_firebase
node_app -->|"routes to"| node_admin
node_admin -->|"uses mock data"| node_adminservice

click node_app "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/App.jsx"
click node_layout "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/layouts/AppLayout.jsx"
click node_home "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/home-page/Home.jsx"
click node_people "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/people/People.jsx"
click node_places "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/places/Places.jsx"
click node_reports "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/report/Report.jsx"
click node_reportdetail "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/report/ReportDetail.jsx"
click node_notifications "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/notifications/Notifications.jsx"
click node_auth "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/Login.jsx"
click node_onboarding "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/onboarding/Onboarding.jsx"
click node_braceletdata "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/hooks/useBraceletData.js"
click node_history "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/hooks/useLocationHistory.js"
click node_geofence "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/GeofenceMonitorProvider.jsx"
click node_geofenceservice "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/geofenceService.js"
click node_notificationservice "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/notificationService.js"
click node_smsservice "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/smsService.js"
click node_firebaseconfig "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/config/firebaseConfig.js"
click node_admin "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/admin/AdminDashboard.jsx"
click node_adminservice "https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/adminMockService.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_app,node_layout,node_home,node_people,node_places,node_reports,node_reportdetail,node_notifications,node_user toneBlue
class node_auth,node_login,node_onboarding,node_firebase toneAmber
class node_braceletdata,node_history,node_geofence,node_geofenceservice,node_notificationservice,node_smsservice,node_firebaseconfig toneMint
class node_admin,node_adminservice toneRose
class node_bracelet,node_sms toneIndigo
```

## Components

### PWA experience

- [Application routes](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/App.jsx): `src/App.jsx`
- [User app layout](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/layouts/AppLayout.jsx): `src/layouts/AppLayout.jsx`
- [Safety home](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/home-page/Home.jsx): `src/pages/home-page/Home.jsx`
- [People tracking](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/people/People.jsx): `src/pages/people/People.jsx`
- [Safe places](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/places/Places.jsx): `src/pages/places/Places.jsx`
- [Incident reports](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/report/Report.jsx): `src/pages/report/Report.jsx`
- [Report details](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/report/ReportDetail.jsx): `src/pages/report/ReportDetail.jsx`
- [Notifications](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/notifications/Notifications.jsx): `src/pages/notifications/Notifications.jsx`

### Identity and setup

- [Authentication](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Sign-in and signup](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/Login.jsx): `src/context/Login.jsx`
- [Onboarding](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/onboarding/Onboarding.jsx): `src/pages/onboarding/Onboarding.jsx`

### Tracking and response

- [Bracelet data sync](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/hooks/useBraceletData.js): `src/hooks/useBraceletData.js`
- [Location history](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/hooks/useLocationHistory.js): `src/hooks/useLocationHistory.js`
- [Geofence monitoring](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/context/GeofenceMonitorProvider.jsx): `src/context/GeofenceMonitorProvider.jsx`
- [Geofence operations](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/geofenceService.js): `src/services/geofenceService.js`
- [Alert persistence](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/notificationService.js): `src/services/notificationService.js`
- [SMS delivery](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/smsService.js): `src/services/smsService.js`
- [Firebase connection](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/config/firebaseConfig.js): `src/config/firebaseConfig.js`

### Local admin

- [Admin pages](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/pages/admin/AdminDashboard.jsx): `src/pages/admin/AdminDashboard.jsx`
- [Mock admin data](https://github.com/mhacccc/ping-me-safetyapp/blob/main/src/services/adminMockService.js): `src/services/adminMockService.js`

### Other components

- **Safety user**
- **SOS bracelet**
- **Firebase**
- **Semaphore SMS**

## Connections

- Safety user → Application routes: opens
- Application routes → Authentication: provides auth
- Application routes → Sign-in and signup: routes to
- Application routes → Onboarding: routes to
- Application routes → User app layout: routes to
- User app layout → Safety home: renders
- User app layout → People tracking: renders
- User app layout → Safe places: renders
- User app layout → Incident reports: renders
- User app layout → Report details: renders
- User app layout → Notifications: renders
- Authentication → Firebase connection: uses
- Firebase connection → Firebase: connects
- SOS bracelet → Firebase: sends status
- Safety home → Bracelet data sync: reads status
- People tracking → Bracelet data sync: reads tracking
- Bracelet data sync → Firebase: reads live data
- Location history → Firebase: subscribes history
- Safe places → Geofence monitoring: manages zones
- Geofence monitoring → Geofence operations: uses operations
- Geofence monitoring → Alert persistence: saves alerts
- Alert persistence → Firebase: writes alerts
- Bracelet data sync → Alert persistence: records SOS
- Bracelet data sync → Firebase: writes reports
- Bracelet data sync → SMS delivery: requests SMS
- SMS delivery → Semaphore SMS: sends messages
- Notifications → Firebase: reads alerts
- Incident reports → Firebase: reads reports
- Report details → Firebase: reads report
- Application routes → Admin pages: routes to
- Admin pages → Mock admin data: uses mock data