# nlxx14/react-vite-user-directory architecture

> Architecture diagram of the GitHub repository nlxx14/react-vite-user-directory, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nlxx14/react-vite-user-directory
- Repository: https://github.com/nlxx14/react-vite-user-directory

## Overview

This is a student-directory web application with account registration/login, authenticated student records, and image upload/delete. Users enter through the browser, register or log in, then reach the protected student page; the backend exposes separate authentication, student CRUD, and upload APIs. The source excerpts establish backend route wiring and login-token handling, but do not show the student page’s API calls or the upload UI, so those links are omitted. The README is empty; unsampled frontend behavior is not inferred.

Main entry points: [`user-directory/server.js`](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/server.js) (Express API), [`user-directory/src/App.jsx`](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/App.jsx) (Route application), [`user-directory/routes/upload.js`](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/upload.js) (Image endpoints), [`user-directory/routes/students.js`](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/students.js) (Student endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web client"]
  node_app["Route application<br/>[App.jsx]"]
  node_authstate["Authentication state<br/>[AuthContext.jsx]"]
  node_authhook["Auth hook<br/>[useAuth.jsx]"]
  node_protected["Protected route<br/>[ProtectedRoute.jsx]"]
  node_login["Login page<br/>[Login.jsx]"]
  node_register["Registration page<br/>[Register.jsx]"]
  node_studentspage["Students page<br/>[Students.jsx]"]
  node_usercard["Student card<br/>[UserCard.jsx]"]
end

subgraph group_api["API and security"]
  node_server["Express API<br/>[server.js]"]
  node_authroutes["Account endpoints<br/>[auth.js]"]
  node_studentroutes["Student endpoints<br/>[students.js]"]
  node_uploadroutes["Image endpoints<br/>[upload.js]"]
  node_authmiddleware["JWT middleware<br/>[auth.js]"]
  node_uploadmiddleware["Image validation<br/>[upload.js]"]
end

subgraph group_data["Persistence"]
  node_userdb[("User records<br/>[User.js]")]
  node_studentdb[("Student records<br/>[Student.js]")]
end

subgraph group_media["Image storage"]
  node_cloudconfig["Cloudinary config<br/>[cloudinary.js]"]
end

node_user(("Directory user"))
node_mongo[("MongoDB")]
node_cloudinary[("Cloudinary")]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"guards students"| node_protected
node_protected -->|"renders"| node_studentspage
node_app -->|"reads auth"| node_authhook
node_login -->|"uses"| node_authhook
node_register -.->|"accepts registration"| node_user
node_authhook -->|"reads context"| node_authstate
node_authstate -->|"posts login"| node_server
node_user -->|"sends API requests"| node_server
node_server -->|"mounts"| node_authroutes
node_server -->|"mounts"| node_studentroutes
node_server -->|"mounts"| node_uploadroutes
node_authroutes -->|"queries users"| node_userdb
node_studentroutes -->|"checks JWT"| node_authmiddleware
node_studentroutes -->|"reads and writes"| node_studentdb
node_uploadroutes -->|"checks JWT"| node_authmiddleware
node_uploadroutes -->|"validates file"| node_uploadmiddleware
node_uploadroutes -->|"uses client"| node_cloudconfig
node_server -->|"connects"| node_mongo
node_cloudconfig -->|"configures"| node_cloudinary
node_uploadroutes -->|"uploads and deletes"| node_cloudinary

click node_app "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/App.jsx"
click node_authstate "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/context/AuthContext.jsx"
click node_authhook "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/hooks/useAuth.jsx"
click node_protected "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/components/ProtectedRoute.jsx"
click node_login "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Login.jsx"
click node_register "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Register.jsx"
click node_studentspage "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Students.jsx"
click node_usercard "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/UserCard.jsx"
click node_server "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/server.js"
click node_authroutes "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/auth.js"
click node_studentroutes "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/students.js"
click node_uploadroutes "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/upload.js"
click node_authmiddleware "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/middleware/auth.js"
click node_uploadmiddleware "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/middleware/upload.js"
click node_userdb "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/models/User.js"
click node_studentdb "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/models/Student.js"
click node_cloudconfig "https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/config/cloudinary.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_authstate,node_authhook,node_protected,node_login,node_register,node_studentspage,node_usercard,node_user toneBlue
class node_server,node_authroutes,node_studentroutes,node_uploadroutes,node_authmiddleware,node_uploadmiddleware,node_mongo,node_cloudinary toneAmber
class node_userdb,node_studentdb toneMint
class node_cloudconfig toneRose
```

## Components

### Web client

- [Route application](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/App.jsx): `user-directory/src/App.jsx`
- [Authentication state](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/context/AuthContext.jsx): `user-directory/src/context/AuthContext.jsx`
- [Auth hook](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/hooks/useAuth.jsx): `user-directory/src/hooks/useAuth.jsx`
- [Protected route](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/components/ProtectedRoute.jsx): `user-directory/src/components/ProtectedRoute.jsx`
- [Login page](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Login.jsx): `user-directory/src/pages/Login.jsx`
- [Registration page](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Register.jsx): `user-directory/src/pages/Register.jsx`
- [Students page](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/pages/Students.jsx): `user-directory/src/pages/Students.jsx`
- [Student card](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/src/UserCard.jsx): `user-directory/src/UserCard.jsx`

### API and security

- [Express API](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/server.js): `user-directory/server.js`
- [Account endpoints](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/auth.js): `user-directory/routes/auth.js`
- [Student endpoints](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/students.js): `user-directory/routes/students.js`
- [Image endpoints](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/routes/upload.js): `user-directory/routes/upload.js`
- [JWT middleware](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/middleware/auth.js): `user-directory/middleware/auth.js`
- [Image validation](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/middleware/upload.js): `user-directory/middleware/upload.js`

### Persistence

- [User records](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/models/User.js): `user-directory/models/User.js`
- [Student records](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/models/Student.js): `user-directory/models/Student.js`

### Image storage

- [Cloudinary config](https://github.com/nlxx14/react-vite-user-directory/blob/main/user-directory/config/cloudinary.js): `user-directory/config/cloudinary.js`

### Other components

- **Directory user**
- **MongoDB**
- **Cloudinary**

## Connections

- Directory user → Route application: uses
- Route application → Login page: routes to (evidence: `user-directory/src/App.jsx`)
- Route application → Registration page: routes to (evidence: `user-directory/src/App.jsx`)
- Route application → Protected route: guards students (evidence: `user-directory/src/App.jsx`)
- Protected route → Students page: renders (evidence: `user-directory/src/App.jsx`)
- Route application → Auth hook: reads auth (evidence: `user-directory/src/App.jsx`)
- Login page → Auth hook: uses (evidence: `user-directory/src/pages/Login.jsx`)
- Registration page → Directory user: accepts registration
- Auth hook → Authentication state: reads context (evidence: `user-directory/src/hooks/useAuth.jsx`)
- Authentication state → Express API: posts login (evidence: `user-directory/src/context/AuthContext.jsx`)
- Directory user → Express API: sends API requests
- Express API → Account endpoints: mounts (evidence: `user-directory/server.js`)
- Express API → Student endpoints: mounts (evidence: `user-directory/server.js`)
- Express API → Image endpoints: mounts (evidence: `user-directory/server.js`)
- Account endpoints → User records: queries users (evidence: `user-directory/routes/auth.js`)
- Student endpoints → JWT middleware: checks JWT (evidence: `user-directory/routes/students.js`)
- Student endpoints → Student records: reads and writes (evidence: `user-directory/routes/students.js`)
- Image endpoints → JWT middleware: checks JWT (evidence: `user-directory/routes/upload.js`)
- Image endpoints → Image validation: validates file (evidence: `user-directory/routes/upload.js`)
- Image endpoints → Cloudinary config: uses client (evidence: `user-directory/routes/upload.js`)
- Express API → MongoDB: connects (evidence: `user-directory/server.js`)
- Cloudinary config → Cloudinary: configures (evidence: `user-directory/config/cloudinary.js`)
- Image endpoints → Cloudinary: uploads and deletes (evidence: `user-directory/routes/upload.js`)