# prabhas-koppireddy/thumblify architecture

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

- Interactive diagram: https://gitdiagram.com/prabhas-koppireddy/thumblify
- Repository: https://github.com/prabhas-koppireddy/thumblify

## Overview

Thumblify is a web application for creating AI-generated thumbnails, managing saved generations, and previewing or downloading images. Users enter through the React app, with routes for generation, saved thumbnails, login, and YouTube-style preview. The server exposes session-authenticated thumbnail and user APIs; generation records a request, then asynchronously invokes image generation and stores the resulting image URL. The README is empty and several frontend pages and controllers were not sampled, so their internal API wiring is not asserted.

Main entry points: [`client/reactjs/src/App.tsx`](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/App.tsx) (App routes), [`server/server.ts`](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/server.ts) (Express server), [`server/controllers/ThumbnailController.ts`](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/ThumbnailController.ts) (Thumbnail controller), [`client/reactjs/src/main.tsx`](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React application"]
  node_main["React entry<br/>[main.tsx]"]
  node_app["App routes<br/>[App.tsx]"]
  node_generate_page["Generate page<br/>[Generate.tsx]"]
  node_history_page["Generation history<br/>[MyGeneration.tsx]"]
  node_preview_page["YouTube preview<br/>[YtPreview.tsx]"]
  node_login["Login UI<br/>[Login.tsx]"]
  node_preview_panel["Image preview<br/>[PreviewPanel.tsx]"]
end

subgraph group_server["API server"]
  node_server["Express server<br/>[server.ts]"]
  node_user_routes["User routes<br/>[UserRoutes.ts]"]
  node_user_controller["User thumbnails<br/>[UserController.ts]"]
  node_db_config["DB connection<br/>[db.ts]"]
end

subgraph group_identity["Authentication"]
  node_auth_context["Auth context<br/>[AuthContext.tsx]"]
  node_auth_routes["Auth routes<br/>[AuthRoutes.ts]"]
  node_auth_controller["Auth controller<br/>[AuthControllers.ts]"]
  node_auth_guard["Session guard<br/>[auth.ts]"]
  node_user_model["User model<br/>[User.ts]"]
end

subgraph group_thumbnails["Thumbnail services"]
  node_thumbnail_routes["Thumbnail routes<br/>[ThumbnailRoutes.ts]"]
  node_thumbnail_controller["Thumbnail controller"]
  node_thumbnail_model["Thumbnail model<br/>[Thumbnail.ts]"]
  node_ai_config["AI client<br/>[ai.ts]"]
end

node_user(("User"))
node_mongodb[("MongoDB")]
node_openai["OpenAI image API"]
node_cloudinary["Cloudinary"]

node_user -->|"opens app"| node_main
node_main -->|"renders"| node_app
node_main -->|"wraps app"| node_auth_context
node_app -->|"routes to"| node_generate_page
node_app -->|"routes to"| node_history_page
node_app -->|"routes to"| node_preview_page
node_app -->|"routes to"| node_login
node_preview_panel -->|"requests download"| node_server
node_server -->|"connects"| node_db_config
node_db_config -->|"connects"| node_mongodb
node_server -->|"mounts routes"| node_auth_routes
node_server -->|"mounts routes"| node_thumbnail_routes
node_server -->|"mounts routes"| node_user_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_auth_routes -->|"guards verify/logout"| node_auth_guard
node_auth_controller -->|"reads/writes users"| node_user_model
node_user_routes -->|"guards requests"| node_auth_guard
node_user_routes -->|"dispatches"| node_user_controller
node_user_controller -->|"reads thumbnails"| node_thumbnail_model
node_thumbnail_routes -->|"guards requests"| node_auth_guard
node_thumbnail_routes -->|"dispatches"| node_thumbnail_controller
node_thumbnail_controller -->|"creates/updates/deletes"| node_thumbnail_model
node_thumbnail_controller -->|"requests image"| node_ai_config
node_ai_config -->|"generates image"| node_openai
node_thumbnail_controller -->|"uploads image"| node_cloudinary
node_thumbnail_controller -->|"fetches download"| node_cloudinary

click node_main "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/main.tsx"
click node_app "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/App.tsx"
click node_generate_page "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/Generate.tsx"
click node_history_page "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/MyGeneration.tsx"
click node_preview_page "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/YtPreview.tsx"
click node_login "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/components/Login.tsx"
click node_preview_panel "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/components/PreviewPanel.tsx"
click node_auth_context "https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/context/AuthContext.tsx"
click node_server "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/server.ts"
click node_auth_routes "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/AuthRoutes.ts"
click node_auth_controller "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/AuthControllers.ts"
click node_auth_guard "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/middlewares/auth.ts"
click node_user_routes "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/UserRoutes.ts"
click node_user_controller "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/UserController.ts"
click node_thumbnail_routes "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/ThumbnailRoutes.ts"
click node_thumbnail_controller "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/ThumbnailController.ts"
click node_user_model "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/models/User.ts"
click node_thumbnail_model "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/models/Thumbnail.ts"
click node_db_config "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/configs/db.ts"
click node_ai_config "https://github.com/prabhas-koppireddy/thumblify/blob/main/server/configs/ai.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_main,node_app,node_generate_page,node_history_page,node_preview_page,node_login,node_preview_panel,node_user toneBlue
class node_server,node_user_routes,node_user_controller,node_db_config,node_mongodb toneAmber
class node_auth_context,node_auth_routes,node_auth_controller,node_auth_guard,node_user_model,node_openai toneMint
class node_thumbnail_routes,node_thumbnail_controller,node_thumbnail_model,node_ai_config toneRose
class node_cloudinary toneIndigo
```

## Components

### React application

- [React entry](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/main.tsx): `client/reactjs/src/main.tsx`
- [App routes](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/App.tsx): `client/reactjs/src/App.tsx`
- [Generate page](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/Generate.tsx): `client/reactjs/src/pages/Generate.tsx`
- [Generation history](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/MyGeneration.tsx): `client/reactjs/src/pages/MyGeneration.tsx`
- [YouTube preview](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/pages/YtPreview.tsx): `client/reactjs/src/pages/YtPreview.tsx`
- [Login UI](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/components/Login.tsx): `client/reactjs/src/components/Login.tsx`
- [Image preview](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/components/PreviewPanel.tsx): `client/reactjs/src/components/PreviewPanel.tsx`

### API server

- [Express server](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/server.ts): `server/server.ts`
- [User routes](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/UserRoutes.ts): `server/routes/UserRoutes.ts`
- [User thumbnails](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/UserController.ts): `server/controllers/UserController.ts`
- [DB connection](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/configs/db.ts): `server/configs/db.ts`

### Authentication

- [Auth context](https://github.com/prabhas-koppireddy/thumblify/blob/main/client/reactjs/src/context/AuthContext.tsx): `client/reactjs/src/context/AuthContext.tsx`
- [Auth routes](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/AuthRoutes.ts): `server/routes/AuthRoutes.ts`
- [Auth controller](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/AuthControllers.ts): `server/controllers/AuthControllers.ts`
- [Session guard](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/middlewares/auth.ts): `server/middlewares/auth.ts`
- [User model](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/models/User.ts): `server/models/User.ts`

### Thumbnail services

- [Thumbnail routes](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/routes/ThumbnailRoutes.ts): `server/routes/ThumbnailRoutes.ts`
- [Thumbnail controller](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/controllers/ThumbnailController.ts): `server/controllers/ThumbnailController.ts`
- [Thumbnail model](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/models/Thumbnail.ts): `server/models/Thumbnail.ts`
- [AI client](https://github.com/prabhas-koppireddy/thumblify/blob/main/server/configs/ai.ts): `server/configs/ai.ts`

### Other components

- **User**
- **MongoDB**
- **OpenAI image API**
- **Cloudinary**

## Connections

- User → React entry: opens app
- React entry → App routes: renders
- React entry → Auth context: wraps app
- App routes → Generate page: routes to
- App routes → Generation history: routes to
- App routes → YouTube preview: routes to
- App routes → Login UI: routes to
- Image preview → Express server: requests download
- Express server → DB connection: connects
- DB connection → MongoDB: connects
- Express server → Auth routes: mounts routes
- Express server → Thumbnail routes: mounts routes
- Express server → User routes: mounts routes
- Auth routes → Auth controller: dispatches
- Auth routes → Session guard: guards verify/logout
- Auth controller → User model: reads/writes users
- User routes → Session guard: guards requests
- User routes → User thumbnails: dispatches
- User thumbnails → Thumbnail model: reads thumbnails
- Thumbnail routes → Session guard: guards requests
- Thumbnail routes → Thumbnail controller: dispatches
- Thumbnail controller → Thumbnail model: creates/updates/deletes
- Thumbnail controller → AI client: requests image
- AI client → OpenAI image API: generates image
- Thumbnail controller → Cloudinary: uploads image
- Thumbnail controller → Cloudinary: fetches download