# carloslimamecwide/mecconnect architecture

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

- Interactive diagram: https://gitdiagram.com/carloslimamecwide/mecconnect
- Repository: https://github.com/carloslimamecwide/mecconnect

## Overview

MecConnect is a cross-platform Expo app for administrators to manage events, forms, rewards, notifications, users, settings, and support. The main user flow is login, authenticated access to the app, then dashboard overview and navigation into management or communication tasks. Authentication and form/event operations are visible in the sampled source; other major screens are preserved from the repository tree and README, with unverified links marked dashed. The sampled dashboard hook loads event and reward data. The backend’s internal behavior is outside this repository.

Main entry points: [`app/(app)/(communication)/forms.tsx`](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/forms.tsx) (Forms), [`src/services/apiClient.ts`](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/apiClient.ts) (API clients), [`app/(auth)/login.tsx`](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(auth)/login.tsx) (Login screen), [`src/contexts/AuthContext.tsx`](https://github.com/carloslimamecwide/mecconnect/blob/main/src/contexts/AuthContext.tsx) (Auth context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and navigation"]
  node_login["Login screen<br/>[login.tsx]"]
  node_authctx["Auth context<br/>[AuthContext.tsx]"]
  node_appshell["App layout<br/>[AppLayout.tsx]"]
end

subgraph group_communication["Communication workflows"]
  node_dashboard["Dashboard<br/>[dashboard.tsx]"]
  node_events["Events<br/>[events.tsx]"]
  node_forms["Forms<br/>[forms.tsx]"]
  node_notifications["Notifications<br/>[notifications.tsx]"]
  node_rewards["Rewards<br/>[rewards.tsx]"]
  node_authsettings["Communication settings<br/>[settings.tsx]"]
end

subgraph group_management["Administration and support"]
  node_users["User management<br/>[users.tsx]"]
  node_settings["Settings<br/>[settings.tsx]"]
  node_support["Support<br/>[support.tsx]"]
  node_managementsettings["Management settings<br/>[settings.tsx]"]
end

subgraph group_services["Application services"]
  node_authservice["Authentication<br/>[authService.ts]"]
  node_apiclient["API clients<br/>[apiClient.ts]"]
  node_tokenstore["Token storage key<br/>[storage.ts]"]
  node_dashboardhook["Dashboard data<br/>[useDashBoard.ts]"]
  node_eventsservice["Events service<br/>[eventsService.ts]"]
  node_rewardservice["Rewards service<br/>[rewardService.ts]"]
  node_excels["Spreadsheet tools<br/>[excelService.ts]"]
  node_notificationservice["Notification service"]
  node_supporthook["Support workflow<br/>[useSupport.tsx]"]
  node_supportservice["Support service<br/>[supportService.ts]"]
end

subgraph group_shared["Shared UI"]
  node_toast["Toast context<br/>[ToastContext.tsx]"]
  node_text["Text component<br/>[AppText.tsx]"]
  node_button["Button component<br/>[Button.tsx]"]
  node_confirm["Confirmation modal<br/>[ConfirmModal.tsx]"]
  node_brand["Brand background"]
  node_pagewrapper["Page wrapper<br/>[PageWrapper.tsx]"]
end

node_user(("Administrator"))
node_backend{{"Mecwide APIs"}}

node_user -->|"signs in"| node_login
node_login -->|"submits credentials"| node_authctx
node_authctx -->|"authenticates"| node_authservice
node_authservice -->|"requests auth"| node_apiclient
node_authservice -->|"uses key"| node_tokenstore
node_apiclient -->|"sends requests"| node_backend
node_dashboard -.->|"loads data"| node_dashboardhook
node_dashboardhook -->|"loads events"| node_eventsservice
node_dashboardhook -->|"loads rewards"| node_rewardservice
node_eventsservice -->|"calls API"| node_apiclient
node_rewardservice -->|"calls API"| node_apiclient
node_forms -->|"manages forms"| node_eventsservice
node_forms -->|"imports exports"| node_excels
node_events -.->|"manages events"| node_eventsservice
node_notifications -.->|"uses service"| node_notificationservice
node_rewards -.->|"uses service"| node_rewardservice
node_support -->|"uses workflow"| node_supporthook
node_supporthook -->|"sends request"| node_supportservice
node_users -.->|"uses API"| node_apiclient
node_settings -.->|"uses session"| node_authctx
node_appshell -->|"uses context"| node_toast
node_appshell -->|"renders background"| node_brand
node_login -->|"renders background"| node_brand
node_toast -.->|"renders toast"| node_text
node_forms -->|"shows feedback"| node_toast
node_supporthook -->|"shows feedback"| node_toast
node_forms -->|"renders within"| node_pagewrapper
node_forms -->|"renders text"| node_text
node_login -->|"renders controls"| node_button
node_forms -->|"uses modal"| node_confirm
node_support -->|"uses modal"| node_confirm
node_managementsettings -.->|"uses session"| node_authctx

click node_login "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(auth)/login.tsx"
click node_authctx "https://github.com/carloslimamecwide/mecconnect/blob/main/src/contexts/AuthContext.tsx"
click node_authservice "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/authService.ts"
click node_apiclient "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/apiClient.ts"
click node_tokenstore "https://github.com/carloslimamecwide/mecconnect/blob/main/src/constants/storage.ts"
click node_dashboard "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/dashboard.tsx"
click node_dashboardhook "https://github.com/carloslimamecwide/mecconnect/blob/main/src/hooks/useDashBoard.ts"
click node_events "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/events.tsx"
click node_forms "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/forms.tsx"
click node_notifications "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/notifications.tsx"
click node_rewards "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/rewards.tsx"
click node_eventsservice "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/eventsService.ts"
click node_rewardservice "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/rewardService.ts"
click node_excels "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/excelService.ts"
click node_notificationservice "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/notificationService.ts"
click node_users "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/users.tsx"
click node_settings "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/settings.tsx"
click node_support "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(screens)/support.tsx"
click node_supporthook "https://github.com/carloslimamecwide/mecconnect/blob/main/src/hooks/useSupport.tsx"
click node_supportservice "https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/supportService.ts"
click node_appshell "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/layout/AppLayout.tsx"
click node_toast "https://github.com/carloslimamecwide/mecconnect/blob/main/src/contexts/ToastContext.tsx"
click node_text "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/AppText.tsx"
click node_button "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/Button.tsx"
click node_confirm "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/ConfirmModal.tsx"
click node_brand "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/branding/BrandBackground.tsx"
click node_pagewrapper "https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/layout/PageWrapper.tsx"
click node_authsettings "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/settings.tsx"
click node_managementsettings "https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/settings.tsx"

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_login,node_authctx,node_appshell toneBlue
class node_dashboard,node_events,node_forms,node_notifications,node_rewards,node_authsettings toneAmber
class node_users,node_settings,node_support,node_managementsettings,node_backend toneMint
class node_authservice,node_apiclient,node_tokenstore,node_dashboardhook,node_eventsservice,node_rewardservice,node_excels,node_notificationservice,node_supporthook,node_supportservice toneRose
class node_toast,node_text,node_button,node_confirm,node_brand,node_pagewrapper,node_user toneIndigo
```

## Components

### Access and navigation

- [Login screen](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(auth)/login.tsx): `app/(auth)/login.tsx`
- [Auth context](https://github.com/carloslimamecwide/mecconnect/blob/main/src/contexts/AuthContext.tsx): `src/contexts/AuthContext.tsx`
- [App layout](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/layout/AppLayout.tsx): `src/components/layout/AppLayout.tsx`

### Communication workflows

- [Dashboard](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/dashboard.tsx): `app/(app)/(communication)/dashboard.tsx`
- [Events](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/events.tsx): `app/(app)/(communication)/events.tsx`
- [Forms](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/forms.tsx): `app/(app)/(communication)/forms.tsx`
- [Notifications](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/notifications.tsx): `app/(app)/(communication)/notifications.tsx`
- [Rewards](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/rewards.tsx): `app/(app)/(communication)/rewards.tsx`
- [Communication settings](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(communication)/settings.tsx): `app/(app)/(communication)/settings.tsx`

### Administration and support

- [User management](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/users.tsx): `app/(app)/(management)/users.tsx`
- [Settings](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/settings.tsx): `app/(app)/(management)/settings.tsx`
- [Support](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(screens)/support.tsx): `app/(app)/(screens)/support.tsx`
- [Management settings](https://github.com/carloslimamecwide/mecconnect/blob/main/app/(app)/(management)/settings.tsx): `app/(app)/(management)/settings.tsx`

### Application services

- [Authentication](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/authService.ts): `src/services/authService.ts`
- [API clients](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/apiClient.ts): `src/services/apiClient.ts`
- [Token storage key](https://github.com/carloslimamecwide/mecconnect/blob/main/src/constants/storage.ts): `src/constants/storage.ts`
- [Dashboard data](https://github.com/carloslimamecwide/mecconnect/blob/main/src/hooks/useDashBoard.ts): `src/hooks/useDashBoard.ts`
- [Events service](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/eventsService.ts): `src/services/eventsService.ts`
- [Rewards service](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/rewardService.ts): `src/services/rewardService.ts`
- [Spreadsheet tools](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/excelService.ts): `src/services/excelService.ts`
- [Notification service](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/notificationService.ts): `src/services/notificationService.ts`
- [Support workflow](https://github.com/carloslimamecwide/mecconnect/blob/main/src/hooks/useSupport.tsx): `src/hooks/useSupport.tsx`
- [Support service](https://github.com/carloslimamecwide/mecconnect/blob/main/src/services/supportService.ts): `src/services/supportService.ts`

### Shared UI

- [Toast context](https://github.com/carloslimamecwide/mecconnect/blob/main/src/contexts/ToastContext.tsx): `src/contexts/ToastContext.tsx`
- [Text component](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/AppText.tsx): `src/components/Common/AppText.tsx`
- [Button component](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/Button.tsx): `src/components/Common/Button.tsx`
- [Confirmation modal](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/Common/ConfirmModal.tsx): `src/components/Common/ConfirmModal.tsx`
- [Brand background](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/branding/BrandBackground.tsx): `src/components/branding/BrandBackground.tsx`
- [Page wrapper](https://github.com/carloslimamecwide/mecconnect/blob/main/src/components/layout/PageWrapper.tsx): `src/components/layout/PageWrapper.tsx`

### Other components

- **Administrator**
- **Mecwide APIs**

## Connections

- Administrator → Login screen: signs in
- Login screen → Auth context: submits credentials (evidence: `app/(auth)/login.tsx`)
- Auth context → Authentication: authenticates (evidence: `src/contexts/AuthContext.tsx`)
- Authentication → API clients: requests auth (evidence: `src/services/authService.ts`)
- Authentication → Token storage key: uses key (evidence: `src/services/authService.ts`)
- API clients → Mecwide APIs: sends requests (evidence: `src/services/apiClient.ts`)
- Dashboard → Dashboard data: loads data
- Dashboard data → Events service: loads events (evidence: `src/hooks/useDashBoard.ts`)
- Dashboard data → Rewards service: loads rewards (evidence: `src/hooks/useDashBoard.ts`)
- Events service → API clients: calls API (evidence: `src/services/eventsService.ts`)
- Rewards service → API clients: calls API (evidence: `src/services/rewardService.ts`)
- Forms → Events service: manages forms (evidence: `app/(app)/(communication)/forms.tsx`)
- Forms → Spreadsheet tools: imports exports (evidence: `app/(app)/(communication)/forms.tsx`)
- Events → Events service: manages events
- Notifications → Notification service: uses service
- Rewards → Rewards service: uses service
- Support → Support workflow: uses workflow (evidence: `app/(app)/(screens)/support.tsx`)
- Support workflow → Support service: sends request (evidence: `src/hooks/useSupport.tsx`)
- User management → API clients: uses API
- Settings → Auth context: uses session
- App layout → Toast context: uses context (evidence: `src/components/layout/AppLayout.tsx`)
- App layout → Brand background: renders background (evidence: `src/components/layout/AppLayout.tsx`)
- Login screen → Brand background: renders background (evidence: `app/(auth)/login.tsx`)
- Toast context → Text component: renders toast
- Forms → Toast context: shows feedback (evidence: `app/(app)/(communication)/forms.tsx`)
- Support workflow → Toast context: shows feedback (evidence: `src/hooks/useSupport.tsx`)
- Forms → Page wrapper: renders within (evidence: `app/(app)/(communication)/forms.tsx`)
- Forms → Text component: renders text (evidence: `app/(app)/(communication)/forms.tsx`)
- Login screen → Button component: renders controls (evidence: `app/(auth)/login.tsx`)
- Forms → Confirmation modal: uses modal (evidence: `app/(app)/(communication)/forms.tsx`)
- Support → Confirmation modal: uses modal (evidence: `app/(app)/(screens)/support.tsx`)
- Management settings → Auth context: uses session