How prabhas-koppireddy/thumblify works
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: App.tsx App routes · server.ts Express server · ThumbnailController.ts Thumbnail controller · main.tsx React entry
Components 24
React application
- React entry
client/reactjs/src/main.tsx - App routes
client/reactjs/src/App.tsx - Generate page
client/reactjs/src/pages/Generate.tsx - Generation history
client/reactjs/src/pages/MyGeneration.tsx - YouTube preview
client/reactjs/src/pages/YtPreview.tsx - Login UI
client/reactjs/src/components/Login.tsx - Image preview
client/reactjs/src/components/PreviewPanel.tsx
API server
- Express server
server/server.ts - User routes
server/routes/UserRoutes.ts - User thumbnails
server/controllers/UserController.ts - DB connection
server/configs/db.ts
Authentication
- Auth context
client/reactjs/src/context/AuthContext.tsx - Auth routes
server/routes/AuthRoutes.ts - Auth controller
server/controllers/AuthControllers.ts - Session guard
server/middlewares/auth.ts - User model
server/models/User.ts
Thumbnail services
- Thumbnail routes
server/routes/ThumbnailRoutes.ts - Thumbnail controller
server/controllers/ThumbnailController.ts - Thumbnail model
server/models/Thumbnail.ts - AI client
server/configs/ai.ts
Other components
- User
- MongoDB
- OpenAI image API
- Cloudinary
Connections 26
- 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