# voxtech-byte/cosmic-editorial architecture

> Architecture diagram of the GitHub repository voxtech-byte/cosmic-editorial, 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/voxtech-byte/cosmic-editorial
- Repository: https://github.com/voxtech-byte/cosmic-editorial

## Overview

Cosmic Editorial is an educational web app about space phenomena, integrating scientific explanations with Islamic reflection. Its user-facing flow is route-based: visitors enter the app, navigate among the home, exploration, AI assistant, archive, and portfolio sections, and explore the content or AI assistance each offers. The sampled code confirms the route wiring and the AI gateway’s multi-provider design; the provided excerpts do not show how the assistant page invokes that gateway or how every content page obtains its data, so those connections are omitted.

Main entry points: [`Frontend/cosmic-editorial-app/src/App.tsx`](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/App.tsx) (App routes), [`Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts) (AI gateway), [`Frontend/cosmic-editorial-app/src/main.tsx`](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/main.tsx) (React entry), [`Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts`](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts) (Preview query hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_router["App routes<br/>[App.tsx]"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_welcome["Welcome sequence"]
end

subgraph group_learning["Learning content"]
  node_home["Home page<br/>[BerandaPage.tsx]"]
  node_exploration["Phenomena exploration<br/>[EksplorasiPage.tsx]"]
  node_phenomena["Phenomena content<br/>[phenomena.ts]"]
  node_archive["Archive<br/>[ArsipPage.tsx]"]
end

subgraph group_assist["AI assistant"]
  node_assistant["AI assistant page<br/>[AsistenAIPage.tsx]"]
  node_gateway["AI gateway<br/>[ai-gateway.ts]"]
end

subgraph group_extras["Portfolio and previews"]
  node_portfolio["Portfolio projects"]
  node_linkcard["Link preview card"]
  node_previewhook["Preview query hook<br/>[useLinkPreview.ts]"]
  node_previewapi["Preview endpoint<br/>[link-preview.js]"]
end

node_visitor(("Visitor"))
node_groq{{"Groq"}}
node_gemini{{"Gemini"}}
node_openrouter{{"OpenRouter"}}
node_huggingface{{"Hugging Face"}}
node_puter{{"Puter"}}

node_entry -->|"renders"| node_router
node_router -->|"renders"| node_navigation
node_router -->|"renders"| node_welcome
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_exploration
node_router -->|"routes to"| node_assistant
node_router -->|"routes to"| node_archive
node_router -->|"routes to"| node_portfolio
node_previewhook -->|"fetches"| node_previewapi
node_gateway -->|"streams from"| node_groq
node_gateway -->|"streams from"| node_gemini
node_gateway -->|"streams from"| node_openrouter
node_gateway -->|"streams from"| node_huggingface
node_gateway -->|"streams from"| node_puter

click node_entry "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/main.tsx"
click node_router "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/App.tsx"
click node_navigation "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/app/Navigation.tsx"
click node_welcome "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/ui/WelcomeSequence.tsx"
click node_home "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/beranda/components/BerandaPage.tsx"
click node_exploration "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/eksplorasi/components/EksplorasiPage.tsx"
click node_phenomena "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/entities/phenomena.ts"
click node_archive "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/arsip/components/ArsipPage.tsx"
click node_assistant "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/asisten-ai/components/AsistenAIPage.tsx"
click node_gateway "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts"
click node_portfolio "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/portfolio/components/PortfolioProjects.tsx"
click node_linkcard "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/components/LinkPreviewCard.tsx"
click node_previewhook "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts"
click node_previewapi "https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/api/link-preview.js"

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_entry,node_router,node_navigation,node_welcome toneBlue
class node_home,node_exploration,node_phenomena,node_archive toneAmber
class node_assistant,node_gateway,node_openrouter toneMint
class node_portfolio,node_linkcard,node_previewhook,node_previewapi toneRose
class node_visitor,node_groq,node_gemini,node_huggingface,node_puter toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/main.tsx): `Frontend/cosmic-editorial-app/src/main.tsx`
- [App routes](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/App.tsx): `Frontend/cosmic-editorial-app/src/App.tsx`
- [Navigation](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/app/Navigation.tsx): `Frontend/cosmic-editorial-app/src/app/Navigation.tsx`
- [Welcome sequence](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/ui/WelcomeSequence.tsx): `Frontend/cosmic-editorial-app/src/shared/ui/WelcomeSequence.tsx`

### Learning content

- [Home page](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/beranda/components/BerandaPage.tsx): `Frontend/cosmic-editorial-app/src/features/beranda/components/BerandaPage.tsx`
- [Phenomena exploration](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/eksplorasi/components/EksplorasiPage.tsx): `Frontend/cosmic-editorial-app/src/features/eksplorasi/components/EksplorasiPage.tsx`
- [Phenomena content](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/entities/phenomena.ts): `Frontend/cosmic-editorial-app/src/entities/phenomena.ts`
- [Archive](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/arsip/components/ArsipPage.tsx): `Frontend/cosmic-editorial-app/src/features/arsip/components/ArsipPage.tsx`

### AI assistant

- [AI assistant page](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/asisten-ai/components/AsistenAIPage.tsx): `Frontend/cosmic-editorial-app/src/features/asisten-ai/components/AsistenAIPage.tsx`
- [AI gateway](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts): `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`

### Portfolio and previews

- [Portfolio projects](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/features/portfolio/components/PortfolioProjects.tsx): `Frontend/cosmic-editorial-app/src/features/portfolio/components/PortfolioProjects.tsx`
- [Link preview card](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/components/LinkPreviewCard.tsx): `Frontend/cosmic-editorial-app/src/shared/components/LinkPreviewCard.tsx`
- [Preview query hook](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts): `Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts`
- [Preview endpoint](https://github.com/voxtech-byte/cosmic-editorial/blob/main/Frontend/cosmic-editorial-app/api/link-preview.js): `Frontend/cosmic-editorial-app/api/link-preview.js`

### Other components

- **Visitor**
- **Groq**
- **Gemini**
- **OpenRouter**
- **Hugging Face**
- **Puter**

## Connections

- React entry → App routes: renders (evidence: `Frontend/cosmic-editorial-app/src/main.tsx`)
- App routes → Navigation: renders (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → Welcome sequence: renders (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → Home page: routes to (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → Phenomena exploration: routes to (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → AI assistant page: routes to (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → Archive: routes to (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- App routes → Portfolio projects: routes to (evidence: `Frontend/cosmic-editorial-app/src/App.tsx`)
- Preview query hook → Preview endpoint: fetches (evidence: `Frontend/cosmic-editorial-app/src/shared/hooks/useLinkPreview.ts`)
- AI gateway → Groq: streams from (evidence: `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`)
- AI gateway → Gemini: streams from (evidence: `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`)
- AI gateway → OpenRouter: streams from (evidence: `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`)
- AI gateway → Hugging Face: streams from (evidence: `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`)
- AI gateway → Puter: streams from (evidence: `Frontend/cosmic-editorial-app/src/shared/lib/ai-gateway.ts`)