# eroldalk/mevzu architecture

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

- Interactive diagram: https://gitdiagram.com/eroldalk/mevzu
- Repository: https://github.com/eroldalk/mevzu

## Overview

Mevzu is a Turkish quote-content creation app: users sign in, choose a creation or management area, style quote cards or reels, then preview, download, or manage published content. The tree also shows a Remotion-based reel studio and composition system, plus profile, settings, and surprise-card features. The excerpts confirm the main app routing, canvas reel rendering, Firestore quote/video operations, and parts of the studio workflow; wiring for unsampled pages and utilities is left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/eroldalk/mevzu/blob/main/src/App.jsx) (App navigation), [`src/components/RemotionStudioPage.jsx`](https://github.com/eroldalk/mevzu/blob/main/src/components/RemotionStudioPage.jsx) (Reel studio), [`src/components/ReelsPage.jsx`](https://github.com/eroldalk/mevzu/blob/main/src/components/ReelsPage.jsx) (Reel editor), [`src/components/PostlarPage.jsx`](https://github.com/eroldalk/mevzu/blob/main/src/components/PostlarPage.jsx) (Posts and library)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_entry["App entry<br/>[main.jsx]"]
  node_router["App navigation<br/>[App.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_home["Home<br/>[HomePage.jsx]"]
  node_profile["Profile<br/>[ProfilePage.jsx]"]
  node_settings["Settings<br/>[SettingsPage.jsx]"]
end

subgraph group_create["Content creation"]
  node_editor["Card editor<br/>[EditorPage.jsx]"]
  node_reels["Reel editor<br/>[ReelsPage.jsx]"]
  node_surprise["Surprise cards<br/>[SurprizPage.jsx]"]
  node_studio["Reel studio"]
  node_quotes["Quote utilities<br/>[quotes.js]"]
  node_captions["Caption generator"]
end

subgraph group_render["Rendering and assets"]
  node_canvas["Canvas rendering<br/>[videoRender.js]"]
  node_card["Card display<br/>[Card.jsx]"]
  node_remotion["Reel composition"]
  node_subtitles["Animated subtitles"]
  node_backgrounds["Background presets<br/>[naturePresets.js]"]
  node_cover["Cover export<br/>[coverExporter.js]"]
end

subgraph group_manage["Content management"]
  node_postlar["Posts and library<br/>[PostlarPage.jsx]"]
  node_battery["Quote pool"]
end

node_user(("User"))
node_firestore[("Firestore")]
node_downloads["Local downloads"]

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_router
node_router -->|"shows unauthenticated"| node_login
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_editor
node_router -->|"routes to"| node_reels
node_router -->|"routes to"| node_surprise
node_router -->|"routes to"| node_studio
node_router -->|"routes to"| node_profile
node_router -->|"routes to"| node_postlar
node_router -->|"routes to"| node_settings
node_reels -->|"renders frames"| node_canvas
node_reels -->|"previews card"| node_card
node_studio -->|"selects quote"| node_quotes
node_studio -->|"reads and updates quotes"| node_firestore
node_studio -->|"writes publish queue"| node_firestore
node_studio -->|"exports cover"| node_cover
node_studio -->|"uses presets"| node_backgrounds
node_postlar -->|"reads and updates posts"| node_firestore
node_postlar -->|"opens studio"| node_router
node_remotion -->|"renders subtitles"| node_subtitles
node_reels -->|"downloads recording"| node_downloads
node_studio -->|"downloads cover"| node_downloads

click node_entry "https://github.com/eroldalk/mevzu/blob/main/src/main.jsx"
click node_router "https://github.com/eroldalk/mevzu/blob/main/src/App.jsx"
click node_login "https://github.com/eroldalk/mevzu/blob/main/src/components/Login.jsx"
click node_home "https://github.com/eroldalk/mevzu/blob/main/src/components/HomePage.jsx"
click node_profile "https://github.com/eroldalk/mevzu/blob/main/src/components/ProfilePage.jsx"
click node_settings "https://github.com/eroldalk/mevzu/blob/main/src/components/SettingsPage.jsx"
click node_editor "https://github.com/eroldalk/mevzu/blob/main/src/components/EditorPage.jsx"
click node_reels "https://github.com/eroldalk/mevzu/blob/main/src/components/ReelsPage.jsx"
click node_surprise "https://github.com/eroldalk/mevzu/blob/main/src/components/SurprizPage.jsx"
click node_studio "https://github.com/eroldalk/mevzu/blob/main/src/components/RemotionStudioPage.jsx"
click node_quotes "https://github.com/eroldalk/mevzu/blob/main/src/utils/quotes.js"
click node_captions "https://github.com/eroldalk/mevzu/blob/main/src/utils/captionGenerator.js"
click node_canvas "https://github.com/eroldalk/mevzu/blob/main/src/utils/videoRender.js"
click node_card "https://github.com/eroldalk/mevzu/blob/main/src/components/Card.jsx"
click node_remotion "https://github.com/eroldalk/mevzu/blob/main/src/remotion/MevzuReelsComposition.jsx"
click node_subtitles "https://github.com/eroldalk/mevzu/blob/main/src/remotion/AnimatedSubtitles.jsx"
click node_backgrounds "https://github.com/eroldalk/mevzu/blob/main/src/remotion/naturePresets.js"
click node_cover "https://github.com/eroldalk/mevzu/blob/main/src/utils/coverExporter.js"
click node_postlar "https://github.com/eroldalk/mevzu/blob/main/src/components/PostlarPage.jsx"
click node_battery "https://github.com/eroldalk/mevzu/blob/main/src/components/SozHavuzuBattery.jsx"

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_login,node_home,node_profile,node_settings,node_user toneBlue
class node_editor,node_reels,node_surprise,node_studio,node_quotes,node_captions,node_firestore toneAmber
class node_canvas,node_card,node_remotion,node_subtitles,node_backgrounds,node_cover toneMint
class node_postlar,node_battery toneRose
class node_downloads toneIndigo
```

## Components

### App and navigation

- [App entry](https://github.com/eroldalk/mevzu/blob/main/src/main.jsx): `src/main.jsx`
- [App navigation](https://github.com/eroldalk/mevzu/blob/main/src/App.jsx): `src/App.jsx`
- [Sign in](https://github.com/eroldalk/mevzu/blob/main/src/components/Login.jsx): `src/components/Login.jsx`
- [Home](https://github.com/eroldalk/mevzu/blob/main/src/components/HomePage.jsx): `src/components/HomePage.jsx`
- [Profile](https://github.com/eroldalk/mevzu/blob/main/src/components/ProfilePage.jsx): `src/components/ProfilePage.jsx`
- [Settings](https://github.com/eroldalk/mevzu/blob/main/src/components/SettingsPage.jsx): `src/components/SettingsPage.jsx`

### Content creation

- [Card editor](https://github.com/eroldalk/mevzu/blob/main/src/components/EditorPage.jsx): `src/components/EditorPage.jsx`
- [Reel editor](https://github.com/eroldalk/mevzu/blob/main/src/components/ReelsPage.jsx): `src/components/ReelsPage.jsx`
- [Surprise cards](https://github.com/eroldalk/mevzu/blob/main/src/components/SurprizPage.jsx): `src/components/SurprizPage.jsx`
- [Reel studio](https://github.com/eroldalk/mevzu/blob/main/src/components/RemotionStudioPage.jsx): `src/components/RemotionStudioPage.jsx`
- [Quote utilities](https://github.com/eroldalk/mevzu/blob/main/src/utils/quotes.js): `src/utils/quotes.js`
- [Caption generator](https://github.com/eroldalk/mevzu/blob/main/src/utils/captionGenerator.js): `src/utils/captionGenerator.js`

### Rendering and assets

- [Canvas rendering](https://github.com/eroldalk/mevzu/blob/main/src/utils/videoRender.js): `src/utils/videoRender.js`
- [Card display](https://github.com/eroldalk/mevzu/blob/main/src/components/Card.jsx): `src/components/Card.jsx`
- [Reel composition](https://github.com/eroldalk/mevzu/blob/main/src/remotion/MevzuReelsComposition.jsx): `src/remotion/MevzuReelsComposition.jsx`
- [Animated subtitles](https://github.com/eroldalk/mevzu/blob/main/src/remotion/AnimatedSubtitles.jsx): `src/remotion/AnimatedSubtitles.jsx`
- [Background presets](https://github.com/eroldalk/mevzu/blob/main/src/remotion/naturePresets.js): `src/remotion/naturePresets.js`
- [Cover export](https://github.com/eroldalk/mevzu/blob/main/src/utils/coverExporter.js): `src/utils/coverExporter.js`

### Content management

- [Posts and library](https://github.com/eroldalk/mevzu/blob/main/src/components/PostlarPage.jsx): `src/components/PostlarPage.jsx`
- [Quote pool](https://github.com/eroldalk/mevzu/blob/main/src/components/SozHavuzuBattery.jsx): `src/components/SozHavuzuBattery.jsx`

### Other components

- **User**
- **Firestore**
- **Local downloads**

## Connections

- User → App entry: opens app
- App entry → App navigation: renders
- App navigation → Sign in: shows unauthenticated
- App navigation → Home: routes to
- App navigation → Card editor: routes to
- App navigation → Reel editor: routes to
- App navigation → Surprise cards: routes to
- App navigation → Reel studio: routes to
- App navigation → Profile: routes to
- App navigation → Posts and library: routes to
- App navigation → Settings: routes to
- Reel editor → Canvas rendering: renders frames
- Reel editor → Card display: previews card
- Reel studio → Quote utilities: selects quote
- Reel studio → Firestore: reads and updates quotes
- Reel studio → Firestore: writes publish queue
- Reel studio → Cover export: exports cover
- Reel studio → Background presets: uses presets
- Posts and library → Firestore: reads and updates posts
- Posts and library → App navigation: opens studio
- Reel composition → Animated subtitles: renders subtitles
- Reel editor → Local downloads: downloads recording
- Reel studio → Local downloads: downloads cover