# harrypatria/awesome-fullstack-prediction-app- architecture

> Architecture diagram of the GitHub repository harrypatria/awesome-fullstack-prediction-app-, 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/harrypatria/awesome-fullstack-prediction-app-
- Repository: https://github.com/harrypatria/awesome-fullstack-prediction-app-

## Overview

Attrition Predictor is an HR analytics app for entering employee attributes, requesting an individual risk estimate, and viewing explanations; it also provides team insights and a retention command center. The README describes a broader ITDO lifecycle—risk insights, alerts, interventions, and operational tasks—alongside batch analytics. The sampled frontend shows the prediction request path and feature navigation. Backend training and serving modules are present, but their implementation details and wiring to the TypeScript server were not excerpted, so those connections remain unasserted.

Main entry points: [`src/App.tsx`](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/App.tsx) (App shell), [`src/features/command-center/CommandCenter.tsx`](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/command-center/CommandCenter.tsx) (Command center), [`src/features/predictor/PredictionResult.tsx`](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/PredictionResult.tsx) (Risk explanation), [`src/features/predictor/SlicerPanel.tsx`](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/SlicerPanel.tsx) (Employee slicer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App shell<br/>[App.tsx]"]
  node_landing["Landing page<br/>[LandingPage.tsx]"]
  node_chatbot["Chatbot<br/>[Chatbot.tsx]"]
  node_notifications["Notifications"]
  node_export_utils["Export utilities<br/>[exportUtils.ts]"]
  node_dialog["Dialog control<br/>[Dialog.tsx]"]
  node_popover["Popover control<br/>[Popover.tsx]"]
  node_tooltip["Tooltip control<br/>[Tooltip.tsx]"]
  node_accordion["Accordion control<br/>[Accordion.tsx]"]
end

subgraph group_analytics["Risk analytics"]
  node_slicer["Employee slicer<br/>[SlicerPanel.tsx]"]
  node_prediction_result["Risk explanation"]
  node_predict_hook["Prediction request<br/>[usePredict.ts]"]
  node_team_insights["Team insights<br/>[TeamInsights.tsx]"]
  node_team_stats["Team statistics<br/>[useTeamStats.ts]"]
  node_stat_card["Metric card<br/>[StatCard.tsx]"]
end

subgraph group_retention["Retention operations"]
  node_command_center["Command center<br/>[CommandCenter.tsx]"]
  node_command_hook["Operations state"]
end

subgraph group_ml["Model services"]
  node_backend_predict["Prediction service<br/>[predict.py]"]
  node_feature_engineering["Feature processing<br/>[features.py]"]
  node_training["Model training<br/>[train.py]"]
  node_model_artifact[("Model artifacts<br/>[model.pkl]")]
  node_api_server["TypeScript server<br/>[server.ts]"]
end

node_hr_user(("HR user"))

node_hr_user -->|"uses"| node_app
node_app -->|"shows"| node_landing
node_app -->|"renders"| node_slicer
node_app -->|"renders"| node_prediction_result
node_app -->|"uses"| node_predict_hook
node_app -->|"routes to"| node_team_insights
node_app -->|"routes to"| node_command_center
node_app -->|"renders"| node_chatbot
node_app -->|"renders"| node_notifications
node_slicer -.->|"edits inputs"| node_prediction_result
node_predict_hook -.->|"requests prediction"| node_backend_predict
node_team_insights -->|"loads stats"| node_team_stats
node_team_insights -->|"renders"| node_stat_card
node_command_center -->|"loads state"| node_command_hook
node_command_center -->|"uses"| node_dialog
node_command_center -->|"uses"| node_popover
node_prediction_result -->|"uses"| node_popover
node_prediction_result -->|"uses"| node_tooltip
node_slicer -->|"uses"| node_accordion
node_slicer -->|"uses"| node_tooltip
node_team_insights -->|"exports via"| node_export_utils
node_command_center -->|"exports via"| node_export_utils
node_prediction_result -->|"exports via"| node_export_utils

click node_app "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/App.tsx"
click node_landing "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/landing/LandingPage.tsx"
click node_chatbot "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/Chatbot.tsx"
click node_notifications "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/NotificationCenter.tsx"
click node_slicer "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/SlicerPanel.tsx"
click node_prediction_result "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/PredictionResult.tsx"
click node_predict_hook "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/usePredict.ts"
click node_team_insights "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/insights/TeamInsights.tsx"
click node_team_stats "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/useTeamStats.ts"
click node_stat_card "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/StatCard.tsx"
click node_command_center "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/command-center/CommandCenter.tsx"
click node_command_hook "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/useCommandCenter.ts"
click node_export_utils "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/lib/exportUtils.ts"
click node_dialog "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Dialog.tsx"
click node_popover "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Popover.tsx"
click node_tooltip "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Tooltip.tsx"
click node_accordion "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Accordion.tsx"
click node_backend_predict "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/predict.py"
click node_feature_engineering "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/features.py"
click node_training "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/train.py"
click node_model_artifact "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/models/model.pkl"
click node_api_server "https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/server.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_chatbot,node_notifications,node_export_utils,node_dialog,node_popover,node_tooltip,node_accordion,node_hr_user toneBlue
class node_slicer,node_prediction_result,node_predict_hook,node_team_insights,node_team_stats,node_stat_card toneAmber
class node_command_center,node_command_hook toneMint
class node_backend_predict,node_feature_engineering,node_training,node_model_artifact,node_api_server toneRose
```

## Components

### App experience

- [App shell](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/App.tsx): `src/App.tsx`
- [Landing page](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/landing/LandingPage.tsx): `src/features/landing/LandingPage.tsx`
- [Chatbot](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/Chatbot.tsx): `src/components/Chatbot.tsx`
- [Notifications](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/NotificationCenter.tsx): `src/components/NotificationCenter.tsx`
- [Export utilities](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/lib/exportUtils.ts): `src/lib/exportUtils.ts`
- [Dialog control](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Dialog.tsx): `src/components/ui/Dialog.tsx`
- [Popover control](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Popover.tsx): `src/components/ui/Popover.tsx`
- [Tooltip control](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Tooltip.tsx): `src/components/ui/Tooltip.tsx`
- [Accordion control](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/ui/Accordion.tsx): `src/components/ui/Accordion.tsx`

### Risk analytics

- [Employee slicer](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/SlicerPanel.tsx): `src/features/predictor/SlicerPanel.tsx`
- [Risk explanation](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/predictor/PredictionResult.tsx): `src/features/predictor/PredictionResult.tsx`
- [Prediction request](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/usePredict.ts): `src/hooks/usePredict.ts`
- [Team insights](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/insights/TeamInsights.tsx): `src/features/insights/TeamInsights.tsx`
- [Team statistics](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/useTeamStats.ts): `src/hooks/useTeamStats.ts`
- [Metric card](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/components/StatCard.tsx): `src/components/StatCard.tsx`

### Retention operations

- [Command center](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/features/command-center/CommandCenter.tsx): `src/features/command-center/CommandCenter.tsx`
- [Operations state](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/src/hooks/useCommandCenter.ts): `src/hooks/useCommandCenter.ts`

### Model services

- [Prediction service](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/predict.py): `backend/src/predict.py`
- [Feature processing](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/features.py): `backend/src/features.py`
- [Model training](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/backend/src/train.py): `backend/src/train.py`
- [Model artifacts](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/models/model.pkl): `models/model.pkl`
- [TypeScript server](https://github.com/harrypatria/awesome-fullstack-prediction-app-/blob/main/server.ts): `server.ts`

### Other components

- **HR user**

## Connections

- HR user → App shell: uses (evidence: `src/App.tsx`)
- App shell → Landing page: shows (evidence: `src/App.tsx`)
- App shell → Employee slicer: renders (evidence: `src/App.tsx`)
- App shell → Risk explanation: renders (evidence: `src/App.tsx`)
- App shell → Prediction request: uses (evidence: `src/App.tsx`)
- App shell → Team insights: routes to (evidence: `src/App.tsx`)
- App shell → Command center: routes to (evidence: `src/App.tsx`)
- App shell → Chatbot: renders (evidence: `src/App.tsx`)
- App shell → Notifications: renders (evidence: `src/App.tsx`)
- Employee slicer → Risk explanation: edits inputs
- Prediction request → Prediction service: requests prediction
- Team insights → Team statistics: loads stats (evidence: `src/features/insights/TeamInsights.tsx`)
- Team insights → Metric card: renders (evidence: `src/features/insights/TeamInsights.tsx`)
- Command center → Operations state: loads state (evidence: `src/features/command-center/CommandCenter.tsx`)
- Command center → Dialog control: uses (evidence: `src/features/command-center/CommandCenter.tsx`)
- Command center → Popover control: uses (evidence: `src/features/command-center/CommandCenter.tsx`)
- Risk explanation → Popover control: uses (evidence: `src/features/predictor/PredictionResult.tsx`)
- Risk explanation → Tooltip control: uses (evidence: `src/features/predictor/PredictionResult.tsx`)
- Employee slicer → Accordion control: uses (evidence: `src/features/predictor/SlicerPanel.tsx`)
- Employee slicer → Tooltip control: uses (evidence: `src/features/predictor/SlicerPanel.tsx`)
- Team insights → Export utilities: exports via (evidence: `src/features/insights/TeamInsights.tsx`)
- Command center → Export utilities: exports via (evidence: `src/features/command-center/CommandCenter.tsx`)
- Risk explanation → Export utilities: exports via (evidence: `src/features/predictor/PredictionResult.tsx`)