# dpr23/snipai architecture

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

- Interactive diagram: https://gitdiagram.com/dpr23/snipai
- Repository: https://github.com/dpr23/snipai

## Overview

SnipAI is a code-snippet knowledge base: developers sign in, browse and manage saved snippets, edit or create code, and request AI explanations. The sampled source confirms the authentication and editor request paths; the README documents AI analysis and MongoDB-backed storage. Dashboard and AI-route internals were not sampled, so those subsystems are represented by their exact tree paths without speculative internal wiring.

Main entry points: [`frontend/src/App.jsx`](https://github.com/dpr23/snipai/blob/main/frontend/src/App.jsx) (Routes and guards), [`backend/routes/snippets.js`](https://github.com/dpr23/snipai/blob/main/backend/routes/snippets.js) (Snippet API), [`frontend/src/context/AuthContext.jsx`](https://github.com/dpr23/snipai/blob/main/frontend/src/context/AuthContext.jsx) (Auth state), [`backend/routes/auth.js`](https://github.com/dpr23/snipai/blob/main/backend/routes/auth.js) (Auth API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_app["Routes and guards<br/>[App.jsx]"]
  node_auth_ui["Auth state<br/>[AuthContext.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
end

subgraph group_identity["Identity"]
  node_auth_routes["Auth API<br/>[auth.js]"]
  node_auth_middleware["JWT middleware<br/>[auth.js]"]
  node_user_model["User model<br/>[User.js]"]
end

subgraph group_snippets["Snippet management"]
  node_dashboard["Snippet dashboard<br/>[Dashboard.jsx]"]
  node_editor["Snippet editor<br/>[Editor.jsx]"]
  node_snippet_routes["Snippet API<br/>[snippets.js]"]
  node_snippet_model["Snippet model<br/>[Snippet.js]"]
end

subgraph group_services["Backend services"]
  node_server["API server<br/>[server.js]"]
  node_ai_routes["AI API<br/>[ai.js]"]
end

node_developer(("Developer"))
node_mongo[("MongoDB Atlas")]
node_gemini["Google Gemini"]

node_developer -->|"uses"| node_app
node_app -->|"provides auth"| node_auth_ui
node_app -->|"routes"| node_login
node_app -->|"routes"| node_register
node_app -->|"guards route"| node_dashboard
node_app -->|"guards route"| node_editor
node_navbar -->|"reads session"| node_auth_ui
node_login -->|"signs in"| node_auth_ui
node_register -->|"registers"| node_auth_ui
node_auth_ui -->|"HTTP requests"| node_auth_routes
node_editor -->|"snippet requests"| node_snippet_routes
node_editor -->|"requests explanation"| node_ai_routes
node_server -->|"mounts routes"| node_auth_routes
node_server -->|"mounts routes"| node_snippet_routes
node_server -->|"mounts routes"| node_ai_routes
node_auth_routes -->|"queries and saves"| node_user_model
node_auth_routes -->|"persists users"| node_mongo
node_snippet_routes -->|"protects endpoints"| node_auth_middleware
node_snippet_routes -->|"queries and saves"| node_snippet_model
node_snippet_routes -->|"persists snippets"| node_mongo
node_ai_routes -.->|"analyzes code"| node_gemini
node_dashboard -.->|"browses snippets"| node_snippet_routes

click node_app "https://github.com/dpr23/snipai/blob/main/frontend/src/App.jsx"
click node_auth_ui "https://github.com/dpr23/snipai/blob/main/frontend/src/context/AuthContext.jsx"
click node_navbar "https://github.com/dpr23/snipai/blob/main/frontend/src/components/Navbar.jsx"
click node_login "https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Login.jsx"
click node_register "https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Register.jsx"
click node_dashboard "https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Dashboard.jsx"
click node_editor "https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Editor.jsx"
click node_server "https://github.com/dpr23/snipai/blob/main/backend/server.js"
click node_auth_routes "https://github.com/dpr23/snipai/blob/main/backend/routes/auth.js"
click node_auth_middleware "https://github.com/dpr23/snipai/blob/main/backend/middleware/auth.js"
click node_user_model "https://github.com/dpr23/snipai/blob/main/backend/models/User.js"
click node_snippet_routes "https://github.com/dpr23/snipai/blob/main/backend/routes/snippets.js"
click node_snippet_model "https://github.com/dpr23/snipai/blob/main/backend/models/Snippet.js"
click node_ai_routes "https://github.com/dpr23/snipai/blob/main/backend/routes/ai.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_auth_ui,node_navbar,node_login,node_register toneBlue
class node_auth_routes,node_auth_middleware,node_user_model,node_mongo toneAmber
class node_dashboard,node_editor,node_snippet_routes,node_snippet_model toneMint
class node_server,node_ai_routes toneRose
class node_developer,node_gemini toneIndigo
```

## Components

### Web application

- [Routes and guards](https://github.com/dpr23/snipai/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth state](https://github.com/dpr23/snipai/blob/main/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [Navigation](https://github.com/dpr23/snipai/blob/main/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`
- [Sign in](https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Login.jsx): `frontend/src/pages/Login.jsx`
- [Registration](https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Register.jsx): `frontend/src/pages/Register.jsx`

### Identity

- [Auth API](https://github.com/dpr23/snipai/blob/main/backend/routes/auth.js): `backend/routes/auth.js`
- [JWT middleware](https://github.com/dpr23/snipai/blob/main/backend/middleware/auth.js): `backend/middleware/auth.js`
- [User model](https://github.com/dpr23/snipai/blob/main/backend/models/User.js): `backend/models/User.js`

### Snippet management

- [Snippet dashboard](https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Dashboard.jsx): `frontend/src/pages/Dashboard.jsx`
- [Snippet editor](https://github.com/dpr23/snipai/blob/main/frontend/src/pages/Editor.jsx): `frontend/src/pages/Editor.jsx`
- [Snippet API](https://github.com/dpr23/snipai/blob/main/backend/routes/snippets.js): `backend/routes/snippets.js`
- [Snippet model](https://github.com/dpr23/snipai/blob/main/backend/models/Snippet.js): `backend/models/Snippet.js`

### Backend services

- [API server](https://github.com/dpr23/snipai/blob/main/backend/server.js): `backend/server.js`
- [AI API](https://github.com/dpr23/snipai/blob/main/backend/routes/ai.js): `backend/routes/ai.js`

### Other components

- **Developer**
- **MongoDB Atlas**
- **Google Gemini**

## Connections

- Developer → Routes and guards: uses
- Routes and guards → Auth state: provides auth
- Routes and guards → Sign in: routes
- Routes and guards → Registration: routes
- Routes and guards → Snippet dashboard: guards route
- Routes and guards → Snippet editor: guards route
- Navigation → Auth state: reads session
- Sign in → Auth state: signs in
- Registration → Auth state: registers
- Auth state → Auth API: HTTP requests
- Snippet editor → Snippet API: snippet requests
- Snippet editor → AI API: requests explanation
- API server → Auth API: mounts routes
- API server → Snippet API: mounts routes
- API server → AI API: mounts routes
- Auth API → User model: queries and saves
- Auth API → MongoDB Atlas: persists users
- Snippet API → JWT middleware: protects endpoints
- Snippet API → Snippet model: queries and saves
- Snippet API → MongoDB Atlas: persists snippets
- AI API → Google Gemini: analyzes code
- Snippet dashboard → Snippet API: browses snippets