# yashmgp69420/online_post_project architecture

> Architecture diagram of the GitHub repository yashmgp69420/online_post_project, 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/yashmgp69420/online_post_project
- Repository: https://github.com/yashmgp69420/online_post_project

## Overview

Threadit is a lightweight image-and-caption posting application. A visitor opens the React app, browses a feed fetched from the Express API, or creates a post by entering a caption and optionally selecting an image. The API uploads the image to ImageKit, stores its URL and caption in MongoDB, and returns the created post; feed requests read posts from MongoDB. The frontend also provides theme switching and local presentation controls. Source excerpts show these core paths, but do not establish persistence for votes, comments, or sorting.

Main entry points: [`BACKEND/src/app.js`](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/app.js) (Express API), [`FRONTEND/frontend/src/App.jsx`](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/App.jsx) (App routing), [`FRONTEND/frontend/src/pages/Feed.jsx`](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/pages/Feed.jsx) (Feed view), [`BACKEND/src/services/storage.service.js`](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/services/storage.service.js) (Image upload)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App routing<br/>[App.jsx]"]
  node_feed["Feed view<br/>[Feed.jsx]"]
  node_create["Post editor<br/>[CreatePost.jsx]"]
  node_theme["Theme state<br/>[ThemeContext.jsx]"]
end

subgraph group_api["Post API"]
  node_server["Server startup<br/>[server.js]"]
  node_http["Express API<br/>[app.js]"]
  node_postmodel["Post model<br/>[post.models.js]"]
  node_dbconnect["DB connection<br/>[db.js]"]
end

subgraph group_integrations["Storage integrations"]
  node_upload["Image upload<br/>[storage.service.js]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_localstorage[("Browser storage")]
node_mongodb[("MongoDB")]
node_imagekit[("ImageKit")]

node_visitor -->|"uses"| node_browser
node_browser -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes to"| node_feed
node_app -->|"routes to"| node_create
node_visitor -->|"browses"| node_feed
node_visitor -->|"composes post"| node_create
node_app -->|"provides theme"| node_theme
node_theme -->|"reads and writes"| node_localstorage
node_feed -->|"GET /"| node_http
node_http -->|"returns posts"| node_feed
node_create -->|"POST /create-post"| node_http
node_server -->|"starts listener"| node_http
node_server -->|"connects database"| node_dbconnect
node_dbconnect -->|"connects"| node_mongodb
node_http -->|"creates and finds"| node_postmodel
node_postmodel -->|"reads and writes"| node_mongodb
node_http -->|"uploads image"| node_upload
node_upload -->|"sends image"| node_imagekit
node_upload -->|"returns image URL"| node_http

click node_entry "https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/main.jsx"
click node_app "https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/App.jsx"
click node_feed "https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/pages/Feed.jsx"
click node_create "https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/pages/CreatePost.jsx"
click node_theme "https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/ThemeContext.jsx"
click node_server "https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/server.js"
click node_http "https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/app.js"
click node_postmodel "https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/models/post.models.js"
click node_dbconnect "https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/db/db.js"
click node_upload "https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/services/storage.service.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_app,node_feed,node_create,node_theme,node_browser toneBlue
class node_server,node_http,node_postmodel,node_dbconnect,node_localstorage,node_mongodb,node_imagekit toneAmber
class node_upload toneMint
class node_visitor toneIndigo
```

## Components

### Web client

- [React entry](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/main.jsx): `FRONTEND/frontend/src/main.jsx`
- [App routing](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/App.jsx): `FRONTEND/frontend/src/App.jsx`
- [Feed view](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/pages/Feed.jsx): `FRONTEND/frontend/src/pages/Feed.jsx`
- [Post editor](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/pages/CreatePost.jsx): `FRONTEND/frontend/src/pages/CreatePost.jsx`
- [Theme state](https://github.com/yashmgp69420/online_post_project/blob/master/FRONTEND/frontend/src/ThemeContext.jsx): `FRONTEND/frontend/src/ThemeContext.jsx`

### Post API

- [Server startup](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/server.js): `BACKEND/server.js`
- [Express API](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/app.js): `BACKEND/src/app.js`
- [Post model](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/models/post.models.js): `BACKEND/src/models/post.models.js`
- [DB connection](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/db/db.js): `BACKEND/src/db/db.js`

### Storage integrations

- [Image upload](https://github.com/yashmgp69420/online_post_project/blob/master/BACKEND/src/services/storage.service.js): `BACKEND/src/services/storage.service.js`

### Other components

- **Visitor**
- **Browser**
- **Browser storage**
- **MongoDB**
- **ImageKit**

## Connections

- Visitor → Browser: uses
- Browser → React entry: opens app
- React entry → App routing: renders
- App routing → Feed view: routes to
- App routing → Post editor: routes to
- Visitor → Feed view: browses
- Visitor → Post editor: composes post
- App routing → Theme state: provides theme
- Theme state → Browser storage: reads and writes
- Feed view → Express API: GET /
- Express API → Feed view: returns posts
- Post editor → Express API: POST /create-post
- Server startup → Express API: starts listener
- Server startup → DB connection: connects database
- DB connection → MongoDB: connects
- Express API → Post model: creates and finds
- Post model → MongoDB: reads and writes
- Express API → Image upload: uploads image
- Image upload → ImageKit: sends image
- Image upload → Express API: returns image URL