# albarstring/follower-tracker architecture

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

- Interactive diagram: https://gitdiagram.com/albarstring/follower-tracker
- Repository: https://github.com/albarstring/follower-tracker

## Overview

FollowTrack is a browser-based Instagram follower analyzer: users upload Instagram JSON exports, the app parses follower and following lists, computes relationship categories, and presents lists and analytics. The primary workflow is routed by App, with DataContext holding the parsed data and derived results in browser local storage. The enhanced parser/context pair is present as a separate implementation, but the sampled routing does not show it used by the app. Source excerpts do not establish any server-side processing or external data service.

Main entry points: [`frontend/src/App.tsx`](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/App.tsx) (App routing), [`frontend/src/context/DataContext.tsx`](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/context/DataContext.tsx) (Data provider), [`frontend/src/pages/UploadData.tsx`](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/UploadData.tsx) (Upload page), [`frontend/src/pages/DashboardOverview.tsx`](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/DashboardOverview.tsx) (Dashboard overview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App routing<br/>[App.tsx]"]
  node_landing["Landing page<br/>[Landing.tsx]"]
  node_dashboard["Dashboard layout"]
  node_sidebar["Navigation sidebar<br/>[Sidebar.tsx]"]
end

subgraph group_ingestion["Data ingestion"]
  node_upload["Upload page<br/>[UploadData.tsx]"]
  node_parser["JSON parser<br/>[parser.ts]"]
end

subgraph group_analysis["Relationship analysis"]
  node_data["Data provider<br/>[DataContext.tsx]"]
  node_localstorage[("Browser local storage")]
  node_enhancedcontext["Enhanced data provider"]
  node_enhancedparser["Enhanced parser<br/>[parser-enhanced.ts]"]
end

subgraph group_presentation["Results and UI"]
  node_overview["Dashboard overview"]
  node_analytics["Analytics page<br/>[Analytics.tsx]"]
  node_unfollowers["Unfollowers page<br/>[Unfollowers.tsx]"]
  node_fans["Fans page<br/>[Fans.tsx]"]
  node_mutuals["Mutuals page<br/>[Mutuals.tsx]"]
  node_userlist["User list<br/>[UserList.tsx]"]
  node_card["Card components<br/>[Card.tsx]"]
  node_button["Button component<br/>[Button.tsx]"]
  node_classnames["Class name utility<br/>[cn.ts]"]
end

node_user(("Browser user"))

node_user -.->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_dashboard
node_app -->|"provides state"| node_data
node_app -->|"routes to"| node_overview
node_app -->|"routes to"| node_upload
node_app -->|"routes to"| node_unfollowers
node_app -->|"routes to"| node_fans
node_app -->|"routes to"| node_mutuals
node_app -->|"routes to"| node_analytics
node_landing -->|"links to"| node_upload
node_dashboard -->|"renders"| node_sidebar
node_upload -->|"parses JSON"| node_parser
node_upload -->|"updates lists"| node_data
node_data -->|"loads and saves"| node_localstorage
node_enhancedcontext -->|"uses parser"| node_enhancedparser
node_overview -->|"reads results"| node_data
node_analytics -->|"reads results"| node_data
node_overview -->|"renders"| node_card
node_analytics -->|"renders"| node_card
node_unfollowers -->|"reads results"| node_data
node_fans -->|"reads results"| node_data
node_mutuals -->|"reads results"| node_data
node_unfollowers -->|"renders"| node_userlist
node_fans -->|"renders"| node_userlist
node_mutuals -->|"renders"| node_userlist
node_button -->|"uses"| node_classnames
node_card -->|"uses"| node_classnames

click node_app "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/App.tsx"
click node_landing "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Landing.tsx"
click node_dashboard "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/layout/DashboardLayout.tsx"
click node_sidebar "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/layout/Sidebar.tsx"
click node_upload "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/UploadData.tsx"
click node_parser "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/parser.ts"
click node_data "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/context/DataContext.tsx"
click node_enhancedcontext "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/context/DataContext-enhanced.tsx"
click node_enhancedparser "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/parser-enhanced.ts"
click node_overview "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/DashboardOverview.tsx"
click node_analytics "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Analytics.tsx"
click node_unfollowers "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Unfollowers.tsx"
click node_fans "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Fans.tsx"
click node_mutuals "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Mutuals.tsx"
click node_userlist "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/UserList.tsx"
click node_card "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/Card.tsx"
click node_button "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/Button.tsx"
click node_classnames "https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/cn.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_app,node_landing,node_dashboard,node_sidebar,node_user toneBlue
class node_upload,node_parser toneAmber
class node_data,node_localstorage,node_enhancedcontext,node_enhancedparser toneMint
class node_overview,node_analytics,node_unfollowers,node_fans,node_mutuals,node_userlist,node_card,node_button,node_classnames toneRose
```

## Components

### App experience

- [App routing](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Landing page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Landing.tsx): `frontend/src/pages/Landing.tsx`
- [Dashboard layout](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/layout/DashboardLayout.tsx): `frontend/src/components/layout/DashboardLayout.tsx`
- [Navigation sidebar](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/layout/Sidebar.tsx): `frontend/src/components/layout/Sidebar.tsx`

### Data ingestion

- [Upload page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/UploadData.tsx): `frontend/src/pages/UploadData.tsx`
- [JSON parser](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/parser.ts): `frontend/src/utils/parser.ts`

### Relationship analysis

- [Data provider](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/context/DataContext.tsx): `frontend/src/context/DataContext.tsx`
- **Browser local storage**
- [Enhanced data provider](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/context/DataContext-enhanced.tsx): `frontend/src/context/DataContext-enhanced.tsx`
- [Enhanced parser](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/parser-enhanced.ts): `frontend/src/utils/parser-enhanced.ts`

### Results and UI

- [Dashboard overview](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/DashboardOverview.tsx): `frontend/src/pages/DashboardOverview.tsx`
- [Analytics page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Analytics.tsx): `frontend/src/pages/Analytics.tsx`
- [Unfollowers page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Unfollowers.tsx): `frontend/src/pages/Unfollowers.tsx`
- [Fans page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Fans.tsx): `frontend/src/pages/Fans.tsx`
- [Mutuals page](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/pages/Mutuals.tsx): `frontend/src/pages/Mutuals.tsx`
- [User list](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/UserList.tsx): `frontend/src/components/ui/UserList.tsx`
- [Card components](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/Card.tsx): `frontend/src/components/ui/Card.tsx`
- [Button component](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/components/ui/Button.tsx): `frontend/src/components/ui/Button.tsx`
- [Class name utility](https://github.com/albarstring/follower-tracker/blob/master/frontend/src/utils/cn.ts): `frontend/src/utils/cn.ts`

### Other components

- **Browser user**

## Connections

- Browser user → App routing: opens
- App routing → Landing page: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Dashboard layout: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Data provider: provides state (evidence: `frontend/src/App.tsx`)
- App routing → Dashboard overview: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Upload page: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Unfollowers page: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Fans page: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Mutuals page: routes to (evidence: `frontend/src/App.tsx`)
- App routing → Analytics page: routes to (evidence: `frontend/src/App.tsx`)
- Landing page → Upload page: links to (evidence: `frontend/src/pages/Landing.tsx`)
- Dashboard layout → Navigation sidebar: renders (evidence: `frontend/src/components/layout/DashboardLayout.tsx`)
- Upload page → JSON parser: parses JSON (evidence: `frontend/src/pages/UploadData.tsx`)
- Upload page → Data provider: updates lists (evidence: `frontend/src/pages/UploadData.tsx`)
- Data provider → Browser local storage: loads and saves (evidence: `frontend/src/context/DataContext.tsx`)
- Enhanced data provider → Enhanced parser: uses parser (evidence: `frontend/src/context/DataContext-enhanced.tsx`)
- Dashboard overview → Data provider: reads results (evidence: `frontend/src/pages/DashboardOverview.tsx`)
- Analytics page → Data provider: reads results (evidence: `frontend/src/pages/Analytics.tsx`)
- Dashboard overview → Card components: renders (evidence: `frontend/src/pages/DashboardOverview.tsx`)
- Analytics page → Card components: renders (evidence: `frontend/src/pages/Analytics.tsx`)
- Unfollowers page → Data provider: reads results (evidence: `frontend/src/pages/Unfollowers.tsx`)
- Fans page → Data provider: reads results (evidence: `frontend/src/pages/Fans.tsx`)
- Mutuals page → Data provider: reads results (evidence: `frontend/src/pages/Mutuals.tsx`)
- Unfollowers page → User list: renders (evidence: `frontend/src/pages/Unfollowers.tsx`)
- Fans page → User list: renders (evidence: `frontend/src/pages/Fans.tsx`)
- Mutuals page → User list: renders (evidence: `frontend/src/pages/Mutuals.tsx`)
- Button component → Class name utility: uses (evidence: `frontend/src/components/ui/Button.tsx`)
- Card components → Class name utility: uses (evidence: `frontend/src/components/ui/Card.tsx`)