# meloonfrong/mfu69-se-bytesquad architecture

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

- Interactive diagram: https://gitdiagram.com/meloonfrong/mfu69-se-bytesquad
- Repository: https://github.com/meloonfrong/mfu69-se-bytesquad

## Overview

InfoCenter brings social announcements into a searchable, organized feed. Users add sources, assign tags, and browse posts using tabs, sorting, platform/tag filters, and keyword search; posts can be bookmarked or marked read. The frontend uses a REST client with mock-data fallback, while the repository also contains a C# API that fetches Apify datasets, processes posts, and manages sources. The README describes an older Python backend, so backend relationships here follow the sampled C# files; unsampled routes and storage behavior are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/App.tsx) (App state and feed), [`backend/Program.cs`](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/Program.cs) (REST API routes), [`backend/ApifyDatasetService.cs`](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/ApifyDatasetService.cs) (Dataset retrieval), [`src/api.ts`](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/api.ts) (REST client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Feed experience"]
  node_app["App state and feed<br/>[App.tsx]"]
  node_feed_tabs["Feed tabs<br/>[FeedTabs.tsx]"]
  node_filters["Search and filters<br/>[FilterSidebar.tsx]"]
  node_post_card["Post actions<br/>[PostCard.tsx]"]
  node_navbar["Navigation and preferences<br/>[Navbar.tsx]"]
  node_about["About and help<br/>[AboutModal.tsx]"]
end

subgraph group_management["Source management"]
  node_add_source["Add source<br/>[AddSourceModal.tsx]"]
  node_manage_sources["Manage sources"]
  node_manage_tags["Manage tags"]
end

subgraph group_backend["Backend services"]
  node_api_server["REST API routes<br/>[Program.cs]"]
  node_dataset_service["Dataset retrieval"]
  node_post_processor["Post processing"]
  node_source_store["Source store<br/>[SourceStore.cs]"]
end

subgraph group_data["Data and integration"]
  node_api_client["REST client<br/>[api.ts]"]
  node_mock_data["Fallback feed data<br/>[mockData.ts]"]
  node_translations["Thai and English strings<br/>[translations.ts]"]
end

node_user(("User"))
node_apify["Apify API"]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_feed_tabs
node_app -->|"renders"| node_filters
node_app -->|"renders"| node_post_card
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_about
node_app -->|"renders"| node_add_source
node_app -->|"renders"| node_manage_sources
node_app -->|"renders"| node_manage_tags
node_app -->|"calls"| node_api_client
node_app -->|"loads fallback"| node_mock_data
node_app -->|"uses"| node_translations
node_api_client -->|"sends REST requests"| node_api_server
node_api_server -->|"retrieves posts"| node_dataset_service
node_api_server -->|"processes posts"| node_post_processor
node_api_server -->|"registers store"| node_source_store
node_dataset_service -->|"fetches datasets"| node_apify

click node_app "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/App.tsx"
click node_feed_tabs "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/FeedTabs.tsx"
click node_filters "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/FilterSidebar.tsx"
click node_post_card "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/PostCard.tsx"
click node_navbar "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/Navbar.tsx"
click node_about "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/AboutModal.tsx"
click node_add_source "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/AddSourceModal.tsx"
click node_manage_sources "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/ManageSourcesModal.tsx"
click node_manage_tags "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/ManageTagsModal.tsx"
click node_api_client "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/api.ts"
click node_mock_data "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/data/mockData.ts"
click node_translations "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/data/translations.ts"
click node_api_server "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/Program.cs"
click node_dataset_service "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/ApifyDatasetService.cs"
click node_post_processor "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/PostDataProcessor.cs"
click node_source_store "https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/SourceStore.cs"

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_feed_tabs,node_filters,node_post_card,node_navbar,node_about,node_user toneBlue
class node_add_source,node_manage_sources,node_manage_tags toneAmber
class node_api_server,node_dataset_service,node_post_processor,node_source_store,node_apify toneMint
class node_api_client,node_mock_data,node_translations toneRose
```

## Components

### Feed experience

- [App state and feed](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/App.tsx): `src/App.tsx`
- [Feed tabs](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/FeedTabs.tsx): `src/components/FeedTabs.tsx`
- [Search and filters](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/FilterSidebar.tsx): `src/components/FilterSidebar.tsx`
- [Post actions](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/PostCard.tsx): `src/components/PostCard.tsx`
- [Navigation and preferences](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [About and help](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/AboutModal.tsx): `src/components/AboutModal.tsx`

### Source management

- [Add source](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/AddSourceModal.tsx): `src/components/AddSourceModal.tsx`
- [Manage sources](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/ManageSourcesModal.tsx): `src/components/ManageSourcesModal.tsx`
- [Manage tags](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/components/ManageTagsModal.tsx): `src/components/ManageTagsModal.tsx`

### Backend services

- [REST API routes](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/Program.cs): `backend/Program.cs`
- [Dataset retrieval](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/ApifyDatasetService.cs): `backend/ApifyDatasetService.cs`
- [Post processing](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/PostDataProcessor.cs): `backend/PostDataProcessor.cs`
- [Source store](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/backend/SourceStore.cs): `backend/SourceStore.cs`

### Data and integration

- [REST client](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/api.ts): `src/api.ts`
- [Fallback feed data](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [Thai and English strings](https://github.com/meloonfrong/mfu69-se-bytesquad/blob/main/src/data/translations.ts): `src/data/translations.ts`

### Other components

- **User**
- **Apify API**

## Connections

- User → App state and feed: uses (evidence: `README.md`)
- App state and feed → Feed tabs: renders (evidence: `src/App.tsx`)
- App state and feed → Search and filters: renders (evidence: `src/App.tsx`)
- App state and feed → Post actions: renders (evidence: `src/App.tsx`)
- App state and feed → Navigation and preferences: renders (evidence: `src/App.tsx`)
- App state and feed → About and help: renders (evidence: `src/App.tsx`)
- App state and feed → Add source: renders (evidence: `src/App.tsx`)
- App state and feed → Manage sources: renders (evidence: `src/App.tsx`)
- App state and feed → Manage tags: renders (evidence: `src/App.tsx`)
- App state and feed → REST client: calls (evidence: `src/App.tsx`)
- App state and feed → Fallback feed data: loads fallback (evidence: `src/App.tsx`)
- App state and feed → Thai and English strings: uses (evidence: `src/App.tsx`)
- REST client → REST API routes: sends REST requests (evidence: `src/api.ts`)
- REST API routes → Dataset retrieval: retrieves posts (evidence: `backend/Program.cs`)
- REST API routes → Post processing: processes posts (evidence: `backend/Program.cs`)
- REST API routes → Source store: registers store (evidence: `backend/Program.cs`)
- Dataset retrieval → Apify API: fetches datasets (evidence: `backend/ApifyDatasetService.cs`)