# isagix-16/quorilo architecture

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

## Overview

Quorilo is a community blogging application. Visitors browse articles; users sign up or log in, then create and publish posts with rich text and featured images, edit or delete their own content, and read sanitized article pages. The documented runtime spans React routes, Redux auth state, Appwrite authentication and post/image services, and an external rich-text editor. The README documents several capabilities whose page and service implementations were not sampled, so those paths and links are shown only where the tree or documentation supports them.

Main entry points: [`src/main.jsx`](https://github.com/isagix-16/quorilo/blob/main/src/main.jsx) (Route setup), [`src/components/post-form/PostForm.jsx`](https://github.com/isagix-16/quorilo/blob/main/src/components/post-form/PostForm.jsx) (Post editor form), [`src/appwrite/config.js`](https://github.com/isagix-16/quorilo/blob/main/src/appwrite/config.js) (Post data service), [`src/store/authSlice.js`](https://github.com/isagix-16/quorilo/blob/main/src/store/authSlice.js) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Web experience"]
  node_app["Application shell<br/>[App.jsx]"]
  node_routing["Route setup<br/>[main.jsx]"]
  node_browse["Home and post lists"]
  node_article["Article view<br/>[Post.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_authpages["Login and signup pages"]
  node_authforms["Auth forms"]
  node_guard["Protected routes<br/>[AuthLayout.jsx]"]
  node_authservice["Auth service<br/>[auth.js]"]
  node_authstate["Auth state<br/>[authSlice.js]"]
end

subgraph group_publishing["Article publishing"]
  node_postpages["Create and edit pages"]
  node_postform["Post editor form<br/>[PostForm.jsx]"]
  node_rte["Rich text editor<br/>[RTE.jsx]"]
end

subgraph group_services["Backend services"]
  node_articledata["Post data service<br/>[config.js]"]
  node_appwriteauth["Appwrite authentication"]
  node_poststore[("Posts table")]
  node_images[("Image storage")]
end

node_reader(("Reader / author"))
node_tinymce["TinyMCE"]
node_purifier["DOMPurify"]

node_reader -->|"uses"| node_routing
node_routing -->|"mounts"| node_app
node_app -->|"checks session"| node_authservice
node_app -->|"updates"| node_authstate
node_routing -->|"routes to"| node_browse
node_routing -->|"routes to"| node_authpages
node_routing -->|"wraps protected"| node_guard
node_guard -->|"checks status"| node_authstate
node_authpages -->|"renders"| node_authforms
node_authforms -->|"authenticates"| node_authservice
node_authservice -->|"calls"| node_appwriteauth
node_authpages -->|"updates"| node_authstate
node_browse -->|"loads posts"| node_articledata
node_routing -->|"routes to"| node_postpages
node_postpages -->|"renders"| node_postform
node_postform -->|"creates or updates"| node_articledata
node_postform -->|"uploads images"| node_images
node_postform -->|"reads author"| node_authstate
node_postform -->|"renders editor"| node_rte
node_rte -->|"powered by"| node_tinymce
node_article -->|"loads and deletes"| node_articledata
node_article -->|"gets preview; deletes"| node_images
node_article -->|"checks author"| node_authstate
node_article -->|"sanitizes content"| node_purifier
node_articledata -->|"reads and writes"| node_poststore
node_articledata -->|"manages files"| node_images

click node_app "https://github.com/isagix-16/quorilo/blob/main/src/App.jsx"
click node_routing "https://github.com/isagix-16/quorilo/blob/main/src/main.jsx"
click node_browse "https://github.com/isagix-16/quorilo/tree/main/src/pages"
click node_article "https://github.com/isagix-16/quorilo/blob/main/src/pages/Post.jsx"
click node_authpages "https://github.com/isagix-16/quorilo/tree/main/src/pages"
click node_authforms "https://github.com/isagix-16/quorilo/tree/main/src/components"
click node_guard "https://github.com/isagix-16/quorilo/blob/main/src/components/AuthLayout.jsx"
click node_authservice "https://github.com/isagix-16/quorilo/blob/main/src/appwrite/auth.js"
click node_authstate "https://github.com/isagix-16/quorilo/blob/main/src/store/authSlice.js"
click node_postpages "https://github.com/isagix-16/quorilo/tree/main/src/pages"
click node_postform "https://github.com/isagix-16/quorilo/blob/main/src/components/post-form/PostForm.jsx"
click node_rte "https://github.com/isagix-16/quorilo/blob/main/src/components/RTE.jsx"
click node_articledata "https://github.com/isagix-16/quorilo/blob/main/src/appwrite/config.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_app,node_routing,node_browse,node_article toneBlue
class node_authpages,node_authforms,node_guard,node_authservice,node_authstate toneAmber
class node_postpages,node_postform,node_rte toneMint
class node_articledata,node_appwriteauth,node_poststore,node_images toneRose
class node_reader,node_tinymce,node_purifier toneIndigo
```

## Components

### Web experience

- [Application shell](https://github.com/isagix-16/quorilo/blob/main/src/App.jsx): `src/App.jsx`
- [Route setup](https://github.com/isagix-16/quorilo/blob/main/src/main.jsx): `src/main.jsx`
- [Home and post lists](https://github.com/isagix-16/quorilo/tree/main/src/pages): `src/pages`
- [Article view](https://github.com/isagix-16/quorilo/blob/main/src/pages/Post.jsx): `src/pages/Post.jsx`

### Identity and access

- [Login and signup pages](https://github.com/isagix-16/quorilo/tree/main/src/pages): `src/pages`
- [Auth forms](https://github.com/isagix-16/quorilo/tree/main/src/components): `src/components`
- [Protected routes](https://github.com/isagix-16/quorilo/blob/main/src/components/AuthLayout.jsx): `src/components/AuthLayout.jsx`
- [Auth service](https://github.com/isagix-16/quorilo/blob/main/src/appwrite/auth.js): `src/appwrite/auth.js`
- [Auth state](https://github.com/isagix-16/quorilo/blob/main/src/store/authSlice.js): `src/store/authSlice.js`

### Article publishing

- [Create and edit pages](https://github.com/isagix-16/quorilo/tree/main/src/pages): `src/pages`
- [Post editor form](https://github.com/isagix-16/quorilo/blob/main/src/components/post-form/PostForm.jsx): `src/components/post-form/PostForm.jsx`
- [Rich text editor](https://github.com/isagix-16/quorilo/blob/main/src/components/RTE.jsx): `src/components/RTE.jsx`

### Backend services

- [Post data service](https://github.com/isagix-16/quorilo/blob/main/src/appwrite/config.js): `src/appwrite/config.js`
- **Appwrite authentication**
- **Posts table**
- **Image storage**

### Other components

- **Reader / author**
- **TinyMCE**
- **DOMPurify**

## Connections

- Reader / author → Route setup: uses
- Route setup → Application shell: mounts
- Application shell → Auth service: checks session
- Application shell → Auth state: updates
- Route setup → Home and post lists: routes to
- Route setup → Login and signup pages: routes to
- Route setup → Protected routes: wraps protected
- Protected routes → Auth state: checks status
- Login and signup pages → Auth forms: renders
- Auth forms → Auth service: authenticates
- Auth service → Appwrite authentication: calls
- Login and signup pages → Auth state: updates
- Home and post lists → Post data service: loads posts
- Route setup → Create and edit pages: routes to
- Create and edit pages → Post editor form: renders
- Post editor form → Post data service: creates or updates
- Post editor form → Image storage: uploads images
- Post editor form → Auth state: reads author
- Post editor form → Rich text editor: renders editor
- Rich text editor → TinyMCE: powered by
- Article view → Post data service: loads and deletes
- Article view → Image storage: gets preview; deletes
- Article view → Auth state: checks author
- Article view → DOMPurify: sanitizes content
- Post data service → Posts table: reads and writes
- Post data service → Image storage: manages files