# danielcastilla/xprompts architecture

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

- Interactive diagram: https://gitdiagram.com/danielcastilla/xprompts
- Repository: https://github.com/danielcastilla/xprompts

## Overview

Prompt Manager lets visitors browse, search, filter, copy, and open shared prompts; signed-in users can also manage their own prompts and favorites, while administrators manage prompts and users. The main flow runs from the React router through home or admin screens to the Express API and MongoDB. The README documents browsing capabilities, and sampled screens show prompt cards, detail modal, user submission, login, and admin management. Some API and UI wiring is supported only by the SOURCE INDEX; unshown relationships are omitted rather than inferred.

Main entry points: [`backend/server.js`](https://github.com/danielcastilla/xprompts/blob/main/backend/server.js) (Express API and auth), [`frontend/src/pages/Home.js`](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Home.js) (Prompt browsing), [`frontend/src/App.js`](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/App.js) (Route and session state), [`backend/database.js`](https://github.com/danielcastilla/xprompts/blob/main/backend/database.js) (Prompt and user models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React application"]
  node_app["Route and session state<br/>[App.js]"]
  node_home["Prompt browsing<br/>[Home.js]"]
  node_header["Brand header<br/>[Header.js]"]
  node_categoryfilter["Category filtering<br/>[CategoryFilter.js]"]
  node_promptcard["Prompt cards<br/>[PromptCard.js]"]
  node_detailmodal["Prompt details<br/>[Modal.js]"]
  node_userform["User prompt submission<br/>[UserPromptForm.js]"]
  node_login["Admin login<br/>[Login.js]"]
  node_dashboard["Admin management<br/>[AdminDashboard.js]"]
  node_adminform["Admin prompt editor<br/>[AdminPromptForm.js]"]
end

subgraph group_api["Backend API"]
  node_api["Express API and auth<br/>[server.js]"]
  node_tursoapi["Turso API variant<br/>[server-turso.js]"]
end

subgraph group_data["Persistence"]
  node_dbinit["Database initialization<br/>[init-db.js]"]
  node_models["Prompt and user models<br/>[database.js]"]
end

node_visitor(("Visitor"))
node_signedin(("Signed-in user"))
node_admin(("Administrator"))
node_mongodb[("MongoDB")]
node_google["Google OAuth"]

node_visitor -->|"opens"| node_app
node_signedin -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_home -->|"renders"| node_header
node_home -->|"renders"| node_promptcard
node_home -->|"renders"| node_detailmodal
node_home -->|"renders"| node_userform
node_home -->|"fetches prompts"| node_api
node_userform -->|"submits prompt"| node_api
node_login -->|"authenticates"| node_api
node_login -->|"starts OAuth"| node_google
node_google -->|"returns callback"| node_api
node_dashboard -->|"manages users"| node_api
node_dashboard -->|"opens editor"| node_adminform
node_adminform -->|"saves prompt"| node_api
node_categoryfilter -.->|"requests categories"| node_api
node_api -->|"queries and updates"| node_models
node_dbinit -->|"initializes"| node_models
node_models -->|"persists data"| node_mongodb
node_tursoapi -->|"uses shared models"| node_models

click node_app "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/App.js"
click node_home "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Home.js"
click node_header "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/Header.js"
click node_categoryfilter "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/CategoryFilter.js"
click node_promptcard "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/PromptCard.js"
click node_detailmodal "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/Modal.js"
click node_userform "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/UserPromptForm.js"
click node_login "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/Login.js"
click node_dashboard "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/AdminDashboard.js"
click node_adminform "https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/AdminPromptForm.js"
click node_api "https://github.com/danielcastilla/xprompts/blob/main/backend/server.js"
click node_tursoapi "https://github.com/danielcastilla/xprompts/blob/main/backend/server-turso.js"
click node_dbinit "https://github.com/danielcastilla/xprompts/blob/main/backend/init-db.js"
click node_models "https://github.com/danielcastilla/xprompts/blob/main/backend/database.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_home,node_header,node_categoryfilter,node_promptcard,node_detailmodal,node_userform,node_login,node_dashboard,node_adminform,node_signedin toneBlue
class node_api,node_tursoapi,node_mongodb toneAmber
class node_dbinit,node_models toneMint
class node_visitor,node_admin,node_google toneIndigo
```

## Components

### React application

- [Route and session state](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Prompt browsing](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Home.js): `frontend/src/pages/Home.js`
- [Brand header](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/Header.js): `frontend/src/components/Header.js`
- [Category filtering](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/CategoryFilter.js): `frontend/src/components/CategoryFilter.js`
- [Prompt cards](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/PromptCard.js): `frontend/src/components/PromptCard.js`
- [Prompt details](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/Modal.js): `frontend/src/components/Modal.js`
- [User prompt submission](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/components/UserPromptForm.js): `frontend/src/components/UserPromptForm.js`
- [Admin login](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/Login.js): `frontend/src/pages/Admin/Login.js`
- [Admin management](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/AdminDashboard.js): `frontend/src/pages/Admin/AdminDashboard.js`
- [Admin prompt editor](https://github.com/danielcastilla/xprompts/blob/main/frontend/src/pages/Admin/AdminPromptForm.js): `frontend/src/pages/Admin/AdminPromptForm.js`

### Backend API

- [Express API and auth](https://github.com/danielcastilla/xprompts/blob/main/backend/server.js): `backend/server.js`
- [Turso API variant](https://github.com/danielcastilla/xprompts/blob/main/backend/server-turso.js): `backend/server-turso.js`

### Persistence

- [Database initialization](https://github.com/danielcastilla/xprompts/blob/main/backend/init-db.js): `backend/init-db.js`
- [Prompt and user models](https://github.com/danielcastilla/xprompts/blob/main/backend/database.js): `backend/database.js`

### Other components

- **Visitor**
- **Signed-in user**
- **Administrator**
- **MongoDB**
- **Google OAuth**

## Connections

- Visitor → Route and session state: opens (evidence: `README.md`)
- Signed-in user → Route and session state: uses (evidence: `frontend/src/App.js`)
- Administrator → Route and session state: uses (evidence: `frontend/src/App.js`)
- Route and session state → Prompt browsing: routes to (evidence: `frontend/src/App.js`)
- Route and session state → Admin login: routes to (evidence: `frontend/src/App.js`)
- Route and session state → Admin management: routes to (evidence: `frontend/src/App.js`)
- Prompt browsing → Brand header: renders (evidence: `frontend/src/pages/Home.js`)
- Prompt browsing → Prompt cards: renders (evidence: `frontend/src/pages/Home.js`)
- Prompt browsing → Prompt details: renders (evidence: `frontend/src/pages/Home.js`)
- Prompt browsing → User prompt submission: renders (evidence: `frontend/src/pages/Home.js`)
- Prompt browsing → Express API and auth: fetches prompts (evidence: `frontend/src/pages/Home.js`)
- User prompt submission → Express API and auth: submits prompt (evidence: `frontend/src/components/UserPromptForm.js`)
- Admin login → Express API and auth: authenticates (evidence: `frontend/src/pages/Admin/Login.js`)
- Admin login → Google OAuth: starts OAuth (evidence: `frontend/src/pages/Admin/Login.js`)
- Google OAuth → Express API and auth: returns callback (evidence: `backend/server.js`)
- Admin management → Express API and auth: manages users (evidence: `frontend/src/pages/Admin/AdminDashboard.js`)
- Admin management → Admin prompt editor: opens editor (evidence: `frontend/src/pages/Admin/AdminDashboard.js`)
- Admin prompt editor → Express API and auth: saves prompt (evidence: `frontend/src/pages/Admin/AdminPromptForm.js`)
- Category filtering → Express API and auth: requests categories
- Express API and auth → Prompt and user models: queries and updates (evidence: `backend/server.js`)
- Database initialization → Prompt and user models: initializes (evidence: `backend/init-db.js`)
- Prompt and user models → MongoDB: persists data (evidence: `backend/database.js`)
- Turso API variant → Prompt and user models: uses shared models (evidence: `backend/server-turso.js`)