# abdulazeem-10/ai-coding-agent architecture

> Architecture diagram of the GitHub repository abdulazeem-10/ai-coding-agent, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abdulazeem-10/ai-coding-agent
- Repository: https://github.com/abdulazeem-10/ai-coding-agent

## Overview

This is a browser-based AI coding environment. Users register or log in, create and retrieve projects, then use a project workspace for AI-generated files, real-time collaboration, and in-browser Node.js execution. The backend separates HTTP routing, authentication, controllers, services, and MongoDB-backed models, with Redis token blacklisting and a Gemini integration. Real-time and execution links are documented or referenced by the workspace, but their implementation details were not sampled; those edges are cited to the README.

Main entry points: [`frontend/src/routes/AppRoutes.jsx`](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/routes/AppRoutes.jsx) (App routes), [`frontend/src/config/axios.js`](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/axios.js) (Axios client), [`frontend/src/screens/Project.jsx`](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Project.jsx) (Project workspace), [`backend/controllers/user.controller.js`](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/user.controller.js) (User controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser workspace"]
  node_routes_ui["App routes<br/>[AppRoutes.jsx]"]
  node_home["Home screen<br/>[Home.jsx]"]
  node_login["Login screen<br/>[Login.jsx]"]
  node_register["Register screen<br/>[Register.jsx]"]
  node_project_ui["Project workspace<br/>[Project.jsx]"]
  node_http_client["Axios client<br/>[axios.js]"]
  node_user_context["User context<br/>[user.context.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_auth_guard["Auth guard<br/>[UserAuth.jsx]"]
  node_user_routes["User routes<br/>[user.routes.js]"]
  node_user_controller["User controller<br/>[user.controller.js]"]
  node_auth_middleware["JWT middleware<br/>[auth.middleware.js]"]
  node_user_service["User service<br/>[user.service.js]"]
  node_user_model[("User model<br/>[user.model.js]")]
  node_redis[("Token blacklist<br/>[redis.service.js]")]
end

subgraph group_projects["Project management"]
  node_app["Express app<br/>[app.js]"]
  node_project_routes["Project routes<br/>[project.routes.js]"]
  node_project_controller["Project controller"]
  node_project_service["Project service<br/>[project.service.js]"]
  node_project_model[("Project model<br/>[project.model.js]")]
end

subgraph group_ai["AI generation"]
  node_ai_routes["AI routes<br/>[ai.routes.js]"]
  node_ai_controller["AI controller<br/>[ai.controller.js]"]
  node_ai_service["AI service<br/>[ai.service.js]"]
end

subgraph group_runtime["Collaboration and execution"]
  node_socket["Socket.IO rooms<br/>[server.js]"]
  node_socket_client["Socket client<br/>[socket.js]"]
  node_webcontainer["WebContainers<br/>[webContainer.js]"]
end

node_developer(("Developer"))
node_gemini{{"Google Gemini"}}

node_developer -->|"uses"| node_routes_ui
node_routes_ui -->|"routes to"| node_home
node_routes_ui -->|"routes to"| node_login
node_routes_ui -->|"routes to"| node_register
node_routes_ui -->|"routes to"| node_project_ui
node_routes_ui -->|"guards"| node_auth_guard
node_auth_guard -->|"requests via"| node_http_client
node_auth_guard -->|"updates"| node_user_context
node_login -->|"requests via"| node_http_client
node_login -->|"updates"| node_user_context
node_register -->|"requests via"| node_http_client
node_register -->|"updates"| node_user_context
node_home -->|"requests via"| node_http_client
node_project_ui -->|"requests via"| node_http_client
node_http_client -->|"HTTP API"| node_app
node_app -->|"mounts"| node_user_routes
node_app -->|"mounts"| node_project_routes
node_app -->|"mounts"| node_ai_routes
node_user_routes -->|"dispatches"| node_user_controller
node_user_routes -->|"protects"| node_auth_middleware
node_user_controller -->|"delegates to"| node_user_service
node_user_controller -->|"queries"| node_user_model
node_user_controller -->|"blacklists token"| node_redis
node_auth_middleware -->|"checks blacklist"| node_redis
node_auth_middleware -->|"verifies JWT"| node_user_model
node_user_service -->|"uses"| node_user_model
node_project_routes -->|"dispatches"| node_project_controller
node_project_routes -->|"protects"| node_auth_middleware
node_project_controller -->|"delegates to"| node_project_service
node_project_controller -->|"looks up user"| node_user_model
node_project_service -->|"queries"| node_project_model
node_project_controller -->|"reads project"| node_project_model
node_ai_routes -->|"dispatches"| node_ai_controller
node_ai_controller -->|"calls"| node_ai_service
node_ai_service -->|"generates content"| node_gemini
node_project_ui -->|"sends prompts"| node_ai_routes
node_project_ui -->|"collaborates via"| node_socket_client
node_socket_client -->|"joins rooms"| node_socket
node_socket -->|"validates project"| node_project_model
node_project_ui -->|"runs projects"| node_webcontainer

click node_routes_ui "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/routes/AppRoutes.jsx"
click node_home "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Home.jsx"
click node_login "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Login.jsx"
click node_register "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Register.jsx"
click node_project_ui "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Project.jsx"
click node_http_client "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/axios.js"
click node_user_context "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/context/user.context.jsx"
click node_auth_guard "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/auth/UserAuth.jsx"
click node_user_routes "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/user.routes.js"
click node_user_controller "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/user.controller.js"
click node_auth_middleware "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/middleware/auth.middleware.js"
click node_user_service "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/user.service.js"
click node_user_model "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/models/user.model.js"
click node_redis "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/redis.service.js"
click node_app "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/app.js"
click node_project_routes "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/project.routes.js"
click node_project_controller "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/project.controller.js"
click node_project_service "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/project.service.js"
click node_project_model "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/models/project.model.js"
click node_ai_routes "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/ai.routes.js"
click node_ai_controller "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/ai.controller.js"
click node_ai_service "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/ai.service.js"
click node_socket "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/server.js"
click node_socket_client "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/socket.js"
click node_webcontainer "https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/webContainer.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_routes_ui,node_home,node_login,node_register,node_project_ui,node_http_client,node_user_context toneBlue
class node_auth_guard,node_user_routes,node_user_controller,node_auth_middleware,node_user_service,node_user_model,node_redis toneAmber
class node_app,node_project_routes,node_project_controller,node_project_service,node_project_model toneMint
class node_ai_routes,node_ai_controller,node_ai_service toneRose
class node_socket,node_socket_client,node_webcontainer,node_developer,node_gemini toneIndigo
```

## Components

### Browser workspace

- [App routes](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/routes/AppRoutes.jsx): `frontend/src/routes/AppRoutes.jsx`
- [Home screen](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Home.jsx): `frontend/src/screens/Home.jsx`
- [Login screen](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Login.jsx): `frontend/src/screens/Login.jsx`
- [Register screen](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Register.jsx): `frontend/src/screens/Register.jsx`
- [Project workspace](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/screens/Project.jsx): `frontend/src/screens/Project.jsx`
- [Axios client](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/axios.js): `frontend/src/config/axios.js`
- [User context](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/context/user.context.jsx): `frontend/src/context/user.context.jsx`

### Identity and access

- [Auth guard](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/auth/UserAuth.jsx): `frontend/src/auth/UserAuth.jsx`
- [User routes](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/user.routes.js): `backend/routes/user.routes.js`
- [User controller](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/user.controller.js): `backend/controllers/user.controller.js`
- [JWT middleware](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/middleware/auth.middleware.js): `backend/middleware/auth.middleware.js`
- [User service](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/user.service.js): `backend/services/user.service.js`
- [User model](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/models/user.model.js): `backend/models/user.model.js`
- [Token blacklist](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/redis.service.js): `backend/services/redis.service.js`

### Project management

- [Express app](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/app.js): `backend/app.js`
- [Project routes](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/project.routes.js): `backend/routes/project.routes.js`
- [Project controller](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/project.controller.js): `backend/controllers/project.controller.js`
- [Project service](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/project.service.js): `backend/services/project.service.js`
- [Project model](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/models/project.model.js): `backend/models/project.model.js`

### AI generation

- [AI routes](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/routes/ai.routes.js): `backend/routes/ai.routes.js`
- [AI controller](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/controllers/ai.controller.js): `backend/controllers/ai.controller.js`
- [AI service](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/services/ai.service.js): `backend/services/ai.service.js`

### Collaboration and execution

- [Socket.IO rooms](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/backend/server.js): `backend/server.js`
- [Socket client](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/socket.js): `frontend/src/config/socket.js`
- [WebContainers](https://github.com/abdulazeem-10/ai-coding-agent/blob/main/frontend/src/config/webContainer.js): `frontend/src/config/webContainer.js`

### Other components

- **Developer**
- **Google Gemini**

## Connections

- Developer → App routes: uses (evidence: `README.md`)
- App routes → Home screen: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- App routes → Login screen: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- App routes → Register screen: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- App routes → Project workspace: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- App routes → Auth guard: guards (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Auth guard → Axios client: requests via (evidence: `frontend/src/auth/UserAuth.jsx`)
- Auth guard → User context: updates (evidence: `frontend/src/auth/UserAuth.jsx`)
- Login screen → Axios client: requests via (evidence: `frontend/src/screens/Login.jsx`)
- Login screen → User context: updates (evidence: `frontend/src/screens/Login.jsx`)
- Register screen → Axios client: requests via (evidence: `frontend/src/screens/Register.jsx`)
- Register screen → User context: updates (evidence: `frontend/src/screens/Register.jsx`)
- Home screen → Axios client: requests via (evidence: `frontend/src/screens/Home.jsx`)
- Project workspace → Axios client: requests via (evidence: `frontend/src/screens/Project.jsx`)
- Axios client → Express app: HTTP API (evidence: `README.md`)
- Express app → User routes: mounts (evidence: `backend/app.js`)
- Express app → Project routes: mounts (evidence: `backend/app.js`)
- Express app → AI routes: mounts (evidence: `backend/app.js`)
- User routes → User controller: dispatches (evidence: `backend/routes/user.routes.js`)
- User routes → JWT middleware: protects (evidence: `backend/routes/user.routes.js`)
- User controller → User service: delegates to (evidence: `backend/controllers/user.controller.js`)
- User controller → User model: queries (evidence: `backend/controllers/user.controller.js`)
- User controller → Token blacklist: blacklists token (evidence: `backend/controllers/user.controller.js`)
- JWT middleware → Token blacklist: checks blacklist (evidence: `backend/middleware/auth.middleware.js`)
- JWT middleware → User model: verifies JWT (evidence: `README.md`)
- User service → User model: uses (evidence: `backend/services/user.service.js`)
- Project routes → Project controller: dispatches (evidence: `backend/routes/project.routes.js`)
- Project routes → JWT middleware: protects (evidence: `backend/routes/project.routes.js`)
- Project controller → Project service: delegates to (evidence: `backend/controllers/project.controller.js`)
- Project controller → User model: looks up user (evidence: `backend/controllers/project.controller.js`)
- Project service → Project model: queries (evidence: `backend/services/project.service.js`)
- Project controller → Project model: reads project (evidence: `backend/controllers/project.controller.js`)
- AI routes → AI controller: dispatches (evidence: `backend/routes/ai.routes.js`)
- AI controller → AI service: calls (evidence: `backend/controllers/ai.controller.js`)
- AI service → Google Gemini: generates content (evidence: `README.md`)
- Project workspace → AI routes: sends prompts (evidence: `README.md`)
- Project workspace → Socket client: collaborates via (evidence: `README.md`)
- Socket client → Socket.IO rooms: joins rooms (evidence: `README.md`)
- Socket.IO rooms → Project model: validates project (evidence: `README.md`)
- Project workspace → WebContainers: runs projects (evidence: `README.md`)