# ajay127955/trello-clone architecture

> Architecture diagram of the GitHub repository ajay127955/trello-clone, 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/ajay127955/trello-clone
- Repository: https://github.com/ajay127955/trello-clone

## Overview

Trello-Clone is a Django/React kanban task-management app. Users register or sign in, open a dashboard and board, then organize work into cards with details such as labels, due dates, assignments, and checklists. The tree also identifies invitations, activity, owner dashboard, and social simulation features. Sampled source confirms authentication requests, card-detail operations, and board WebSocket messaging; backend endpoint wiring and unsampled feature internals are not shown, so those relationships are kept broad.

Main entry points: [`frontend/src/services/api.js`](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/services/api.js) (HTTP API client), [`backend/kanban/views.py`](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/views.py) (Request handlers), [`frontend/src/context/AuthContext.jsx`](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/context/AuthContext.jsx) (Authentication), [`backend/kanban/models.py`](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/models.py) (Kanban domain models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_authpages["Sign in / onboarding<br/>[Login.jsx]"]
  node_authcontext["Authentication<br/>[AuthContext.jsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_board["Board view<br/>[BoardView.jsx]"]
  node_carddetail["Card details<br/>[CardModal.jsx]"]
  node_activity["Activity stream<br/>[ActivityStream.jsx]"]
  node_invite["Invitations<br/>[InviteModal.jsx]"]
  node_owner["Owner dashboard<br/>[OwnerDashboard.jsx]"]
  node_simulation["Social simulation"]
  node_api_client["HTTP API client<br/>[api.js]"]
end

subgraph group_api["Backend API"]
  node_views["Request handlers<br/>[views.py]"]
  node_serializers["API serializers<br/>[serializers.py]"]
  node_permissions["Access permissions<br/>[permissions.py]"]
end

subgraph group_realtime["Live collaboration"]
  node_socket_hook["Board socket hook<br/>[useBoardSocket.js]"]
  node_ws_server["WebSocket consumer<br/>[consumers.py]"]
  node_ws_routes["Socket routing<br/>[routing.py]"]
end

subgraph group_state["Persistence"]
  node_models["Kanban domain models<br/>[models.py]"]
  node_database[("Application database<br/>[settings.py]")]
end

node_user(("Team member"))
node_google(("Google OAuth"))

node_user -->|"starts session"| node_authpages
node_authpages -->|"submits credentials"| node_authcontext
node_authcontext -->|"sends auth requests"| node_api_client
node_google -.->|"provides login token"| node_authcontext
node_user -->|"opens workspace"| node_dashboard
node_dashboard -->|"opens board"| node_board
node_user -->|"edits card"| node_carddetail
node_carddetail -->|"loads and updates"| node_api_client
node_invite -->|"sends requests"| node_api_client
node_activity -->|"loads activity"| node_api_client
node_owner -->|"requests data"| node_api_client
node_simulation -->|"requests actions"| node_api_client
node_api_client -->|"HTTP requests"| node_views
node_views -->|"checks access"| node_permissions
node_views -->|"processes API data"| node_serializers
node_views -->|"reads and writes"| node_models
node_models -->|"persists records"| node_database
node_board -->|"uses board updates"| node_socket_hook
node_socket_hook -->|"connects by board"| node_ws_routes
node_ws_routes -->|"routes socket"| node_ws_server
node_ws_server -->|"accesses board data"| node_models

click node_authpages "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/Login.jsx"
click node_authcontext "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/context/AuthContext.jsx"
click node_dashboard "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/Dashboard.jsx"
click node_board "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/BoardView.jsx"
click node_carddetail "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/CardModal.jsx"
click node_activity "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/ActivityStream.jsx"
click node_invite "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/InviteModal.jsx"
click node_owner "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/OwnerDashboard.jsx"
click node_simulation "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/SocialSimulationModal.jsx"
click node_api_client "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/services/api.js"
click node_socket_hook "https://github.com/ajay127955/trello-clone/blob/main/frontend/src/hooks/useBoardSocket.js"
click node_ws_server "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/consumers.py"
click node_ws_routes "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/routing.py"
click node_views "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/views.py"
click node_serializers "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/serializers.py"
click node_permissions "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/permissions.py"
click node_models "https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/models.py"
click node_database "https://github.com/ajay127955/trello-clone/blob/main/backend/config/settings.py"

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_authpages,node_authcontext,node_dashboard,node_board,node_carddetail,node_activity,node_invite,node_owner,node_simulation,node_api_client toneBlue
class node_views,node_serializers,node_permissions toneAmber
class node_socket_hook,node_ws_server,node_ws_routes toneMint
class node_models,node_database toneRose
class node_user,node_google toneIndigo
```

## Components

### Web application

- [Sign in / onboarding](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/Login.jsx): `frontend/src/pages/Login.jsx`
- [Authentication](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [Dashboard](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/Dashboard.jsx): `frontend/src/pages/Dashboard.jsx`
- [Board view](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/pages/BoardView.jsx): `frontend/src/pages/BoardView.jsx`
- [Card details](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/CardModal.jsx): `frontend/src/components/CardModal.jsx`
- [Activity stream](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/ActivityStream.jsx): `frontend/src/components/ActivityStream.jsx`
- [Invitations](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/InviteModal.jsx): `frontend/src/components/InviteModal.jsx`
- [Owner dashboard](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/OwnerDashboard.jsx): `frontend/src/components/OwnerDashboard.jsx`
- [Social simulation](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/components/SocialSimulationModal.jsx): `frontend/src/components/SocialSimulationModal.jsx`
- [HTTP API client](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`

### Backend API

- [Request handlers](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/views.py): `backend/kanban/views.py`
- [API serializers](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/serializers.py): `backend/kanban/serializers.py`
- [Access permissions](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/permissions.py): `backend/kanban/permissions.py`

### Live collaboration

- [Board socket hook](https://github.com/ajay127955/trello-clone/blob/main/frontend/src/hooks/useBoardSocket.js): `frontend/src/hooks/useBoardSocket.js`
- [WebSocket consumer](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/consumers.py): `backend/kanban/consumers.py`
- [Socket routing](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/routing.py): `backend/kanban/routing.py`

### Persistence

- [Kanban domain models](https://github.com/ajay127955/trello-clone/blob/main/backend/kanban/models.py): `backend/kanban/models.py`
- [Application database](https://github.com/ajay127955/trello-clone/blob/main/backend/config/settings.py): `backend/config/settings.py`

### Other components

- **Team member**
- **Google OAuth**

## Connections

- Team member → Sign in / onboarding: starts session
- Sign in / onboarding → Authentication: submits credentials
- Authentication → HTTP API client: sends auth requests
- Google OAuth → Authentication: provides login token
- Team member → Dashboard: opens workspace
- Dashboard → Board view: opens board
- Team member → Card details: edits card
- Card details → HTTP API client: loads and updates
- Invitations → HTTP API client: sends requests
- Activity stream → HTTP API client: loads activity
- Owner dashboard → HTTP API client: requests data
- Social simulation → HTTP API client: requests actions
- HTTP API client → Request handlers: HTTP requests
- Request handlers → Access permissions: checks access
- Request handlers → API serializers: processes API data
- Request handlers → Kanban domain models: reads and writes
- Kanban domain models → Application database: persists records
- Board view → Board socket hook: uses board updates
- Board socket hook → Socket routing: connects by board
- Socket routing → WebSocket consumer: routes socket
- WebSocket consumer → Kanban domain models: accesses board data