# codeinee-hash/clone-miro-front architecture

> Architecture diagram of the GitHub repository codeinee-hash/clone-miro-front, 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/codeinee-hash/clone-miro-front
- Repository: https://github.com/codeinee-hash/clone-miro-front

## Overview

This is a Miro-like board application frontend. Users can sign in or register, then browse boards, search and sort them, view favorites and recent boards, manage boards, and open an individual board. The sampled code confirms route dispatch, auth and board API calls, and token persistence/refresh; board-page behavior and several page-to-hook connections are not shown, so those links are omitted.

Main entry points: [`src/app/router.tsx`](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/router.tsx) (Route dispatcher), [`src/shared/api/instance.ts`](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/api/instance.ts) (Main API), [`src/shared/model/session.ts`](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/model/session.ts) (Session state), [`src/features/auth/login.page.tsx`](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/login.page.tsx) (Login and register)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_router["Route dispatcher<br/>[router.tsx]"]
  node_providers["App providers<br/>[providers.tsx]"]
  node_appview["App layout<br/>[app.tsx]"]
end

subgraph group_auth["Authentication"]
  node_authpages["Login and register<br/>[login.page.tsx]"]
  node_authforms["Auth forms<br/>[login-form.tsx]"]
  node_authschemas["Auth validation<br/>[auth.schemas.ts]"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
end

subgraph group_boards["Board discovery"]
  node_boardroutes["Board list pages"]
  node_boardviews["Board filters and views<br/>[board-search.tsx]"]
  node_boardhooks["Board list actions<br/>[use-board-list.ts]"]
  node_boardservice["Board service"]
  node_boardpage["Board workspace<br/>[board.page.tsx]"]
end

subgraph group_shared["Shared services"]
  node_session["Session state<br/>[session.ts]"]
  node_mainapi["Main API<br/>[instance.ts]"]
  node_authapi["Authenticated API<br/>[instance.ts]"]
end

node_user(("User"))
node_browserstorage[("Browser local storage")]
node_backend["Backend API"]

node_user -->|"navigates"| node_router
node_router -->|"wraps routes"| node_providers
node_router -->|"renders"| node_appview
node_router -->|"dispatches auth"| node_authpages
node_router -->|"dispatches lists"| node_boardroutes
node_router -->|"dispatches board"| node_boardpage
node_authpages -->|"renders"| node_authforms
node_authforms -->|"validates with"| node_authschemas
node_authservice -->|"calls"| node_mainapi
node_mainapi -->|"sends requests"| node_backend
node_session -->|"reads and writes"| node_browserstorage
node_session -->|"refreshes token"| node_mainapi
node_boardroutes -->|"renders controls"| node_boardviews
node_boardhooks -->|"calls"| node_boardservice
node_boardservice -->|"calls"| node_authapi
node_authapi -->|"sends requests"| node_backend

click node_router "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/router.tsx"
click node_providers "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/providers.tsx"
click node_appview "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/app.tsx"
click node_authpages "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/login.page.tsx"
click node_authforms "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/view/login-form.tsx"
click node_authschemas "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/lib/auth.schemas.ts"
click node_authservice "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/model/auth.service.ts"
click node_session "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/model/session.ts"
click node_mainapi "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/api/instance.ts"
click node_boardroutes "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/board-list.page.tsx"
click node_boardviews "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/view/board-search.tsx"
click node_boardhooks "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/model/use-board-list.ts"
click node_boardservice "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/model/board-list.service.ts"
click node_boardpage "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board/board.page.tsx"
click node_authapi "https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/api/instance.ts"

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_router,node_providers,node_appview,node_user toneBlue
class node_authpages,node_authforms,node_authschemas,node_authservice,node_browserstorage toneAmber
class node_boardroutes,node_boardviews,node_boardhooks,node_boardservice,node_boardpage,node_backend toneMint
class node_session,node_mainapi,node_authapi toneRose
```

## Components

### Application shell

- [Route dispatcher](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/router.tsx): `src/app/router.tsx`
- [App providers](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/providers.tsx): `src/app/providers.tsx`
- [App layout](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/app/app.tsx): `src/app/app.tsx`

### Authentication

- [Login and register](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/login.page.tsx): `src/features/auth/login.page.tsx`
- [Auth forms](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/view/login-form.tsx): `src/features/auth/view/login-form.tsx`
- [Auth validation](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/lib/auth.schemas.ts): `src/features/auth/lib/auth.schemas.ts`
- [Auth service](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/auth/model/auth.service.ts): `src/features/auth/model/auth.service.ts`

### Board discovery

- [Board list pages](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/board-list.page.tsx): `src/features/board-list/board-list.page.tsx`
- [Board filters and views](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/view/board-search.tsx): `src/features/board-list/view/board-search.tsx`
- [Board list actions](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/model/use-board-list.ts): `src/features/board-list/model/use-board-list.ts`
- [Board service](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board-list/model/board-list.service.ts): `src/features/board-list/model/board-list.service.ts`
- [Board workspace](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/features/board/board.page.tsx): `src/features/board/board.page.tsx`

### Shared services

- [Session state](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/model/session.ts): `src/shared/model/session.ts`
- [Main API](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/api/instance.ts): `src/shared/api/instance.ts`
- [Authenticated API](https://github.com/codeinee-hash/clone-miro-front/blob/main/src/shared/api/instance.ts): `src/shared/api/instance.ts`

### Other components

- **User**
- **Browser local storage**
- **Backend API**

## Connections

- User → Route dispatcher: navigates
- Route dispatcher → App providers: wraps routes
- Route dispatcher → App layout: renders
- Route dispatcher → Login and register: dispatches auth
- Route dispatcher → Board list pages: dispatches lists
- Route dispatcher → Board workspace: dispatches board
- Login and register → Auth forms: renders
- Auth forms → Auth validation: validates with
- Auth service → Main API: calls
- Main API → Backend API: sends requests
- Session state → Browser local storage: reads and writes
- Session state → Main API: refreshes token
- Board list pages → Board filters and views: renders controls
- Board list actions → Board service: calls
- Board service → Authenticated API: calls
- Authenticated API → Backend API: sends requests