# saad299/devcollab-frontend architecture

> Architecture diagram of the GitHub repository saad299/devcollab-frontend, 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/saad299/devcollab-frontend
- Repository: https://github.com/saad299/devcollab-frontend

## Overview

DevCollab is a developer-collaboration frontend: users discover projects, publish projects seeking skills, request to join, manage incoming requests, and maintain profiles. The graph follows those stages through the Next.js pages and service layer to the external backend. The README documents the broader feature set and token-refresh behavior; sampled source confirms project discovery, dashboard/request handling, profile editing, and auth state, but not every page-to-service connection.

Main entry points: [`src/services/requests.js`](https://github.com/saad299/devcollab-frontend/blob/main/src/services/requests.js) (Request service), [`src/services/api.js`](https://github.com/saad299/devcollab-frontend/blob/main/src/services/api.js) (HTTP client), [`src/app/dashboard/page.js`](https://github.com/saad299/devcollab-frontend/blob/main/src/app/dashboard/page.js) (Dashboard), [`src/services/projects.js`](https://github.com/saad299/devcollab-frontend/blob/main/src/services/projects.js) (Project service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_identity["Identity and profiles"]
  node_auth_pages["Login and register<br/>[page.js]"]
  node_auth_state["Auth state<br/>[AuthContext.js]"]
  node_auth_service["Auth service<br/>[auth.js]"]
  node_profile_pages["Profile pages"]
  node_user_service["User service<br/>[users.js]"]
end

subgraph group_projects["Project discovery"]
  node_project_browse["Browse projects<br/>[page.js]"]
  node_project_detail["Project details<br/>[page.js]"]
  node_project_create["Create project<br/>[page.js]"]
  node_project_edit["Edit project<br/>[page.js]"]
  node_project_service["Project service<br/>[projects.js]"]
  node_landing["Landing page<br/>[page.js]"]
end

subgraph group_collaboration["Collaboration requests"]
  node_dashboard["Dashboard<br/>[page.js]"]
  node_requests_page["My requests<br/>[page.js]"]
  node_apply_page["Join project<br/>[page.js]"]
  node_request_card["Request actions<br/>[RequestCard.js]"]
  node_request_service["Request service<br/>[requests.js]"]
end

subgraph group_runtime["Shared runtime"]
  node_auth_hook["Auth hook<br/>[useAuth.js]"]
  node_api_client["HTTP client<br/>[api.js]"]
  node_browser_storage["Browser token storage"]
end

node_developer(("Developer"))
node_backend{{"Backend API"}}

node_developer -->|"signs in"| node_auth_pages
node_auth_pages -->|"requests auth"| node_auth_state
node_auth_state -->|"calls"| node_auth_service
node_auth_service -->|"sends auth calls"| node_api_client
node_api_client -->|"HTTP requests"| node_backend
node_auth_service -->|"stores tokens"| node_browser_storage
node_auth_state -->|"provides state"| node_auth_hook
node_developer -->|"visits"| node_landing
node_landing -->|"loads recent projects"| node_project_service
node_developer -->|"searches"| node_project_browse
node_project_browse -->|"fetches filtered projects"| node_project_service
node_developer -->|"views project"| node_project_detail
node_developer -->|"posts project"| node_project_create
node_developer -->|"edits project"| node_project_edit
node_project_service -->|"sends project calls"| node_api_client
node_developer -->|"requests to join"| node_apply_page
node_developer -->|"manages projects"| node_dashboard
node_dashboard -->|"loads and deletes"| node_project_service
node_dashboard -->|"loads project requests"| node_request_service
node_dashboard -->|"renders requests"| node_request_card
node_request_card -->|"updates status"| node_request_service
node_developer -->|"views sent requests"| node_requests_page
node_requests_page -->|"loads requests"| node_request_service
node_apply_page -->|"submits application"| node_request_service
node_request_service -->|"sends request calls"| node_api_client
node_developer -->|"views or edits profile"| node_profile_pages
node_profile_pages -->|"reads and updates"| node_user_service
node_user_service -->|"sends profile calls"| node_api_client

click node_auth_pages "https://github.com/saad299/devcollab-frontend/blob/main/src/app/login/page.js"
click node_auth_state "https://github.com/saad299/devcollab-frontend/blob/main/src/context/AuthContext.js"
click node_auth_service "https://github.com/saad299/devcollab-frontend/blob/main/src/services/auth.js"
click node_profile_pages "https://github.com/saad299/devcollab-frontend/tree/main/src/app/profile"
click node_user_service "https://github.com/saad299/devcollab-frontend/blob/main/src/services/users.js"
click node_project_browse "https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/page.js"
click node_project_detail "https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/page.js"
click node_project_create "https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/new/page.js"
click node_project_edit "https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/edit/page.js"
click node_project_service "https://github.com/saad299/devcollab-frontend/blob/main/src/services/projects.js"
click node_landing "https://github.com/saad299/devcollab-frontend/blob/main/src/app/page.js"
click node_dashboard "https://github.com/saad299/devcollab-frontend/blob/main/src/app/dashboard/page.js"
click node_requests_page "https://github.com/saad299/devcollab-frontend/blob/main/src/app/requests/page.js"
click node_apply_page "https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/apply/page.js"
click node_request_card "https://github.com/saad299/devcollab-frontend/blob/main/src/components/requests/RequestCard.js"
click node_request_service "https://github.com/saad299/devcollab-frontend/blob/main/src/services/requests.js"
click node_auth_hook "https://github.com/saad299/devcollab-frontend/blob/main/src/hooks/useAuth.js"
click node_api_client "https://github.com/saad299/devcollab-frontend/blob/main/src/services/api.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_auth_pages,node_auth_state,node_auth_service,node_profile_pages,node_user_service toneBlue
class node_project_browse,node_project_detail,node_project_create,node_project_edit,node_project_service,node_landing toneAmber
class node_dashboard,node_requests_page,node_apply_page,node_request_card,node_request_service,node_backend toneMint
class node_auth_hook,node_api_client,node_browser_storage toneRose
class node_developer toneIndigo
```

## Components

### Identity and profiles

- [Login and register](https://github.com/saad299/devcollab-frontend/blob/main/src/app/login/page.js): `src/app/login/page.js`
- [Auth state](https://github.com/saad299/devcollab-frontend/blob/main/src/context/AuthContext.js): `src/context/AuthContext.js`
- [Auth service](https://github.com/saad299/devcollab-frontend/blob/main/src/services/auth.js): `src/services/auth.js`
- [Profile pages](https://github.com/saad299/devcollab-frontend/tree/main/src/app/profile): `src/app/profile`
- [User service](https://github.com/saad299/devcollab-frontend/blob/main/src/services/users.js): `src/services/users.js`

### Project discovery

- [Browse projects](https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/page.js): `src/app/projects/page.js`
- [Project details](https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/page.js): `src/app/projects/[id]/page.js`
- [Create project](https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/new/page.js): `src/app/projects/new/page.js`
- [Edit project](https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/edit/page.js): `src/app/projects/[id]/edit/page.js`
- [Project service](https://github.com/saad299/devcollab-frontend/blob/main/src/services/projects.js): `src/services/projects.js`
- [Landing page](https://github.com/saad299/devcollab-frontend/blob/main/src/app/page.js): `src/app/page.js`

### Collaboration requests

- [Dashboard](https://github.com/saad299/devcollab-frontend/blob/main/src/app/dashboard/page.js): `src/app/dashboard/page.js`
- [My requests](https://github.com/saad299/devcollab-frontend/blob/main/src/app/requests/page.js): `src/app/requests/page.js`
- [Join project](https://github.com/saad299/devcollab-frontend/blob/main/src/app/projects/%5Bid%5D/apply/page.js): `src/app/projects/[id]/apply/page.js`
- [Request actions](https://github.com/saad299/devcollab-frontend/blob/main/src/components/requests/RequestCard.js): `src/components/requests/RequestCard.js`
- [Request service](https://github.com/saad299/devcollab-frontend/blob/main/src/services/requests.js): `src/services/requests.js`

### Shared runtime

- [Auth hook](https://github.com/saad299/devcollab-frontend/blob/main/src/hooks/useAuth.js): `src/hooks/useAuth.js`
- [HTTP client](https://github.com/saad299/devcollab-frontend/blob/main/src/services/api.js): `src/services/api.js`
- **Browser token storage**

### Other components

- **Developer**
- **Backend API**

## Connections

- Developer → Login and register: signs in
- Login and register → Auth state: requests auth
- Auth state → Auth service: calls
- Auth service → HTTP client: sends auth calls
- HTTP client → Backend API: HTTP requests
- Auth service → Browser token storage: stores tokens
- Auth state → Auth hook: provides state
- Developer → Landing page: visits
- Landing page → Project service: loads recent projects
- Developer → Browse projects: searches
- Browse projects → Project service: fetches filtered projects
- Developer → Project details: views project
- Developer → Create project: posts project
- Developer → Edit project: edits project
- Project service → HTTP client: sends project calls
- Developer → Join project: requests to join
- Developer → Dashboard: manages projects
- Dashboard → Project service: loads and deletes
- Dashboard → Request service: loads project requests
- Dashboard → Request actions: renders requests
- Request actions → Request service: updates status
- Developer → My requests: views sent requests
- My requests → Request service: loads requests
- Join project → Request service: submits application
- Request service → HTTP client: sends request calls
- Developer → Profile pages: views or edits profile
- Profile pages → User service: reads and updates
- User service → HTTP client: sends profile calls