# radebeneo/subhog architecture

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

- Interactive diagram: https://gitdiagram.com/radebeneo/subhog
- Repository: https://github.com/radebeneo/subhog

## Overview

SubHog is an Expo subscription-tracking app. Its main flow is signed-in account resolution, optional profile provisioning, subscription retrieval from an API, then display across home, subscription-list, and insights screens. A context/controller layer coordinates authentication-scoped requests and converts API records for display. The README describes only the Expo starter; capabilities here are inferred from the supplied source index and excerpts. Some routes and integrations were not excerpted, so their interactions are not expanded beyond supported references.

Main entry points: [`context/SubscriptionContext.tsx`](https://github.com/radebeneo/subhog/blob/main/context/SubscriptionContext.tsx) (Subscription context), [`app/(tabs)/index.tsx`](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/index.tsx) (Home overview), [`app/(tabs)/_layout.tsx`](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/_layout.tsx) (Tab navigation), [`app/(tabs)/insights.tsx`](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/insights.tsx) (Insights)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_authscreens["Sign in / up<br/>[sign-in.tsx]"]
  node_tabs["Tab navigation<br/>[_layout.tsx]"]
  node_home["Home overview<br/>[index.tsx]"]
  node_insights["Insights<br/>[insights.tsx]"]
  node_subscriptionlist["Subscription list<br/>[subscriptions.tsx]"]
  node_settings["Settings<br/>[settings.tsx]"]
  node_detailroute["Subscription detail<br/>[&#91;id&#93;.tsx]"]
end

subgraph group_identity["Identity and state"]
  node_context["Subscription context"]
  node_controller["Subscription controller"]
end

subgraph group_api["API access"]
  node_apiconfig["API configuration<br/>[api-config.ts]"]
  node_apiclient["API client<br/>[api-client.ts]"]
  node_apierrors["API errors<br/>[api-errors.ts]"]
  node_apitypes["API data types<br/>[api-types.ts]"]
end

subgraph group_presentation["Presentation and analytics"]
  node_display["Display mapping"]
  node_subcard["Subscription card"]
  node_upcoming["Upcoming card"]
  node_icon["Subscription icon"]
  node_stateview["Subscription state view"]
  node_create["Create modal"]
  node_icons["Subscription icons"]
  node_analytics["PostHog analytics<br/>[posthog.ts]"]
end

node_user(("Subscriber"))
node_clerk(("Clerk identity"))
node_backend(("Subscription API"))
node_posthogservice(("PostHog service"))

node_user -->|"signs in"| node_authscreens
node_user -->|"uses"| node_tabs
node_tabs -.->|"routes to"| node_home
node_tabs -.->|"routes to"| node_insights
node_tabs -.->|"routes to"| node_subscriptionlist
node_tabs -.->|"routes to"| node_settings
node_user -.->|"opens"| node_detailroute
node_context -->|"reads auth state"| node_clerk
node_context -->|"resolves endpoint"| node_apiconfig
node_context -->|"creates"| node_controller
node_context -->|"maps records"| node_display
node_controller -->|"requests identity and subscriptions"| node_apiclient
node_apiclient -->|"sends requests"| node_backend
node_apiclient -->|"classifies failures"| node_apierrors
node_apiclient -->|"validates responses"| node_apitypes
node_home -->|"reads subscriptions"| node_context
node_home -->|"renders"| node_subcard
node_home -->|"renders"| node_upcoming
node_home -->|"renders loading state"| node_stateview
node_home -->|"tracks interactions"| node_analytics
node_insights -->|"reads subscriptions"| node_context
node_insights -->|"uses"| node_icon
node_insights -->|"renders state"| node_stateview
node_subscriptionlist -->|"reads subscriptions"| node_context
node_subscriptionlist -->|"renders"| node_subcard
node_subscriptionlist -->|"renders state"| node_stateview
node_subcard -->|"renders"| node_icon
node_upcoming -->|"renders"| node_icon
node_stateview -->|"reads state and actions"| node_context
node_create -->|"uses icon mapping"| node_icons
node_create -->|"tracks events"| node_analytics
node_analytics -.->|"sends events"| node_posthogservice

click node_authscreens "https://github.com/radebeneo/subhog/blob/main/app/(auth)/sign-in.tsx"
click node_tabs "https://github.com/radebeneo/subhog/blob/main/app/(tabs)/_layout.tsx"
click node_home "https://github.com/radebeneo/subhog/blob/main/app/(tabs)/index.tsx"
click node_insights "https://github.com/radebeneo/subhog/blob/main/app/(tabs)/insights.tsx"
click node_subscriptionlist "https://github.com/radebeneo/subhog/blob/main/app/(tabs)/subscriptions.tsx"
click node_settings "https://github.com/radebeneo/subhog/blob/main/app/(tabs)/settings.tsx"
click node_detailroute "https://github.com/radebeneo/subhog/blob/main/app/subscriptions/%5Bid%5D.tsx"
click node_context "https://github.com/radebeneo/subhog/blob/main/context/SubscriptionContext.tsx"
click node_controller "https://github.com/radebeneo/subhog/blob/main/lib/subscription-controller.ts"
click node_apiconfig "https://github.com/radebeneo/subhog/blob/main/lib/api-config.ts"
click node_apiclient "https://github.com/radebeneo/subhog/blob/main/lib/api-client.ts"
click node_apierrors "https://github.com/radebeneo/subhog/blob/main/lib/api-errors.ts"
click node_apitypes "https://github.com/radebeneo/subhog/blob/main/lib/api-types.ts"
click node_display "https://github.com/radebeneo/subhog/blob/main/lib/subscription-display.ts"
click node_subcard "https://github.com/radebeneo/subhog/blob/main/components/SubscriptionCard.tsx"
click node_upcoming "https://github.com/radebeneo/subhog/blob/main/components/UpcomingSubscriptionCard.tsx"
click node_icon "https://github.com/radebeneo/subhog/blob/main/components/SubscriptionIcon.tsx"
click node_stateview "https://github.com/radebeneo/subhog/blob/main/components/SubscriptionStateView.tsx"
click node_create "https://github.com/radebeneo/subhog/blob/main/components/CreateSubscriptionModal.tsx"
click node_icons "https://github.com/radebeneo/subhog/blob/main/lib/subscription-icons.ts"
click node_analytics "https://github.com/radebeneo/subhog/blob/main/lib/posthog.ts"

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_authscreens,node_tabs,node_home,node_insights,node_subscriptionlist,node_settings,node_detailroute toneBlue
class node_context,node_controller toneAmber
class node_apiconfig,node_apiclient,node_apierrors,node_apitypes,node_backend toneMint
class node_display,node_subcard,node_upcoming,node_icon,node_stateview,node_create,node_icons,node_analytics toneRose
class node_user,node_clerk,node_posthogservice toneIndigo
```

## Components

### App experience

- [Sign in / up](https://github.com/radebeneo/subhog/blob/main/app/(auth)/sign-in.tsx): `app/(auth)/sign-in.tsx`
- [Tab navigation](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/_layout.tsx): `app/(tabs)/_layout.tsx`
- [Home overview](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`
- [Insights](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/insights.tsx): `app/(tabs)/insights.tsx`
- [Subscription list](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/subscriptions.tsx): `app/(tabs)/subscriptions.tsx`
- [Settings](https://github.com/radebeneo/subhog/blob/main/app/(tabs)/settings.tsx): `app/(tabs)/settings.tsx`
- [Subscription detail](https://github.com/radebeneo/subhog/blob/main/app/subscriptions/%5Bid%5D.tsx): `app/subscriptions/[id].tsx`

### Identity and state

- [Subscription context](https://github.com/radebeneo/subhog/blob/main/context/SubscriptionContext.tsx): `context/SubscriptionContext.tsx`
- [Subscription controller](https://github.com/radebeneo/subhog/blob/main/lib/subscription-controller.ts): `lib/subscription-controller.ts`

### API access

- [API configuration](https://github.com/radebeneo/subhog/blob/main/lib/api-config.ts): `lib/api-config.ts`
- [API client](https://github.com/radebeneo/subhog/blob/main/lib/api-client.ts): `lib/api-client.ts`
- [API errors](https://github.com/radebeneo/subhog/blob/main/lib/api-errors.ts): `lib/api-errors.ts`
- [API data types](https://github.com/radebeneo/subhog/blob/main/lib/api-types.ts): `lib/api-types.ts`

### Presentation and analytics

- [Display mapping](https://github.com/radebeneo/subhog/blob/main/lib/subscription-display.ts): `lib/subscription-display.ts`
- [Subscription card](https://github.com/radebeneo/subhog/blob/main/components/SubscriptionCard.tsx): `components/SubscriptionCard.tsx`
- [Upcoming card](https://github.com/radebeneo/subhog/blob/main/components/UpcomingSubscriptionCard.tsx): `components/UpcomingSubscriptionCard.tsx`
- [Subscription icon](https://github.com/radebeneo/subhog/blob/main/components/SubscriptionIcon.tsx): `components/SubscriptionIcon.tsx`
- [Subscription state view](https://github.com/radebeneo/subhog/blob/main/components/SubscriptionStateView.tsx): `components/SubscriptionStateView.tsx`
- [Create modal](https://github.com/radebeneo/subhog/blob/main/components/CreateSubscriptionModal.tsx): `components/CreateSubscriptionModal.tsx`
- [Subscription icons](https://github.com/radebeneo/subhog/blob/main/lib/subscription-icons.ts): `lib/subscription-icons.ts`
- [PostHog analytics](https://github.com/radebeneo/subhog/blob/main/lib/posthog.ts): `lib/posthog.ts`

### Other components

- **Subscriber**
- **Clerk identity**
- **Subscription API**
- **PostHog service**

## Connections

- Subscriber → Sign in / up: signs in (evidence: `app/(auth)/sign-in.tsx`)
- Subscriber → Tab navigation: uses (evidence: `app/(tabs)/_layout.tsx`)
- Tab navigation → Home overview: routes to
- Tab navigation → Insights: routes to
- Tab navigation → Subscription list: routes to
- Tab navigation → Settings: routes to
- Subscriber → Subscription detail: opens
- Subscription context → Clerk identity: reads auth state (evidence: `context/SubscriptionContext.tsx`)
- Subscription context → API configuration: resolves endpoint (evidence: `context/SubscriptionContext.tsx`)
- Subscription context → Subscription controller: creates (evidence: `context/SubscriptionContext.tsx`)
- Subscription context → Display mapping: maps records (evidence: `context/SubscriptionContext.tsx`)
- Subscription controller → API client: requests identity and subscriptions (evidence: `lib/subscription-controller.ts`)
- API client → Subscription API: sends requests (evidence: `lib/api-client.ts`)
- API client → API errors: classifies failures (evidence: `lib/api-client.ts`)
- API client → API data types: validates responses (evidence: `lib/api-client.ts`)
- Home overview → Subscription context: reads subscriptions (evidence: `app/(tabs)/index.tsx`)
- Home overview → Subscription card: renders (evidence: `app/(tabs)/index.tsx`)
- Home overview → Upcoming card: renders (evidence: `app/(tabs)/index.tsx`)
- Home overview → Subscription state view: renders loading state (evidence: `app/(tabs)/index.tsx`)
- Home overview → PostHog analytics: tracks interactions (evidence: `app/(tabs)/index.tsx`)
- Insights → Subscription context: reads subscriptions (evidence: `app/(tabs)/insights.tsx`)
- Insights → Subscription icon: uses (evidence: `app/(tabs)/insights.tsx`)
- Insights → Subscription state view: renders state (evidence: `app/(tabs)/insights.tsx`)
- Subscription list → Subscription context: reads subscriptions (evidence: `app/(tabs)/subscriptions.tsx`)
- Subscription list → Subscription card: renders (evidence: `app/(tabs)/subscriptions.tsx`)
- Subscription list → Subscription state view: renders state (evidence: `app/(tabs)/subscriptions.tsx`)
- Subscription card → Subscription icon: renders (evidence: `components/SubscriptionCard.tsx`)
- Upcoming card → Subscription icon: renders (evidence: `components/UpcomingSubscriptionCard.tsx`)
- Subscription state view → Subscription context: reads state and actions (evidence: `components/SubscriptionStateView.tsx`)
- Create modal → Subscription icons: uses icon mapping (evidence: `components/CreateSubscriptionModal.tsx`)
- Create modal → PostHog analytics: tracks events (evidence: `components/CreateSubscriptionModal.tsx`)
- PostHog analytics → PostHog service: sends events