# nitin-o/iot-platform-frontend architecture

> Architecture diagram of the GitHub repository nitin-o/iot-platform-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nitin-o/iot-platform-frontend
- Repository: https://github.com/nitin-o/iot-platform-frontend

## Overview

This is an Acme project-workspace frontend: users sign in or register, then enter a protected dashboard to review projects, activity, and settings, or create projects and manage their tasks. The UI also exposes a current-user authentication API check. Projects and activity are currently seeded in client memory, while authentication calls a configured backend and stores session tokens in browser storage. The graph follows the router and sampled calls; unsampled feature internals are represented by their exact directories, and no backend project persistence is evidenced.

Main entry points: [`src/context/AuthContext.jsx`](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/AuthContext.jsx) (Session management), [`src/App.jsx`](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/App.jsx) (Application shell), [`src/layouts/DashboardLayout.jsx`](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/layouts/DashboardLayout.jsx) (Workspace navigation), [`src/context/ProjectsContext.jsx`](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/ProjectsContext.jsx) (Project and activity state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_auth["Authentication"]
  node_auth_pages["Sign-in and signup"]
  node_auth_layout["Authentication layout<br/>[AuthLayout.jsx]"]
  node_auth_context["Session management<br/>[AuthContext.jsx]"]
  node_auth_api["Authentication API<br/>[auth.service.js]"]
  node_route_guards["Route guards<br/>[ProtectedRoute.jsx]"]
  node_public_guard["Public route guard<br/>[PublicRoute.jsx]"]
end

subgraph group_workspace["Workspace UI"]
  node_app["Application shell<br/>[App.jsx]"]
  node_dashboard_layout["Workspace navigation"]
  node_dashboard["Dashboard and API check<br/>[Dashboard.jsx]"]
  node_project_list["Project listing<br/>[Projects.jsx]"]
  node_project_detail["Project detail and tasks<br/>[ProjectDetail.jsx]"]
  node_settings["Account settings<br/>[Settings.jsx]"]
  node_command_palette["Command palette<br/>[CommandPalette.jsx]"]
  node_notifications["Notifications menu"]
  node_new_project["Project creation form"]
  node_modal["Modal presentation<br/>[Modal.jsx]"]
end

subgraph group_state["Client state"]
  node_projects_context["Project and activity state"]
  node_mock_data["Seed project data<br/>[mockData.js]"]
  node_auth_storage[("Browser session storage")]
end

subgraph group_feedback["Interaction feedback"]
  node_toast_context["Toast state<br/>[ToastContext.jsx]"]
  node_toast_view["Toast display<br/>[ToastViewport.jsx]"]
end

node_user(("Workspace user"))
node_backend{{"Configured auth backend"}}

node_user -->|"opens workspace"| node_app
node_app -->|"routes public pages"| node_auth_pages
node_app -->|"protects workspace routes"| node_route_guards
node_app -->|"guards auth pages"| node_public_guard
node_app -->|"mounts workspace routes"| node_dashboard_layout
node_app -->|"mounts notifications"| node_toast_view
node_auth_pages -->|"renders forms"| node_auth_layout
node_auth_pages -->|"submits credentials"| node_auth_context
node_auth_context -->|"calls auth operations"| node_auth_api
node_auth_api -->|"sends auth requests"| node_backend
node_auth_context -->|"reads and writes tokens"| node_auth_storage
node_route_guards -->|"checks session"| node_auth_context
node_public_guard -->|"checks session"| node_auth_context
node_dashboard_layout -->|"uses session and logout"| node_auth_context
node_dashboard_layout -->|"renders routed view"| node_dashboard
node_dashboard_layout -->|"renders routed view"| node_project_list
node_dashboard_layout -->|"renders routed view"| node_project_detail
node_dashboard_layout -->|"renders routed view"| node_settings
node_dashboard -->|"checks current user"| node_auth_context
node_dashboard -->|"requests current user"| node_backend
node_dashboard -->|"reads projects and activity"| node_projects_context
node_project_list -->|"reads project list"| node_projects_context
node_project_list -->|"opens creation form"| node_new_project
node_project_detail -->|"manages project tasks"| node_projects_context
node_settings -->|"reads account session"| node_auth_context
node_command_palette -->|"searches projects"| node_projects_context
node_command_palette -->|"uses account context"| node_auth_context
node_projects_context -->|"seeds initial state"| node_mock_data
node_new_project -->|"creates project"| node_projects_context
node_new_project -->|"reports creation"| node_toast_context
node_new_project -->|"renders form modal"| node_modal
node_toast_view -->|"displays queued toasts"| node_toast_context

click node_app "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/App.jsx"
click node_auth_pages "https://github.com/nitin-o/iot-platform-frontend/tree/main/src/pages/Auth"
click node_auth_layout "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Auth/AuthLayout.jsx"
click node_auth_context "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/AuthContext.jsx"
click node_auth_api "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/services/auth.service.js"
click node_route_guards "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/ProtectedRoute.jsx"
click node_public_guard "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/PublicRoute.jsx"
click node_dashboard_layout "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/layouts/DashboardLayout.jsx"
click node_dashboard "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Dashboard/Dashboard.jsx"
click node_project_list "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Projects/Projects.jsx"
click node_project_detail "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Projects/ProjectDetail.jsx"
click node_settings "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Settings/Settings.jsx"
click node_command_palette "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/CommandPalette.jsx"
click node_notifications "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/NotificationsDropdown.jsx"
click node_projects_context "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/ProjectsContext.jsx"
click node_mock_data "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/lib/mockData.js"
click node_new_project "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/NewProjectModal.jsx"
click node_modal "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/Modal.jsx"
click node_toast_context "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/ToastContext.jsx"
click node_toast_view "https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/ToastViewport.jsx"

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_layout,node_auth_context,node_auth_api,node_route_guards,node_public_guard,node_user toneBlue
class node_app,node_dashboard_layout,node_dashboard,node_project_list,node_project_detail,node_settings,node_command_palette,node_notifications,node_new_project,node_modal toneAmber
class node_projects_context,node_mock_data,node_auth_storage toneMint
class node_toast_context,node_toast_view toneRose
class node_backend toneIndigo
```

## Components

### Authentication

- [Sign-in and signup](https://github.com/nitin-o/iot-platform-frontend/tree/main/src/pages/Auth): `src/pages/Auth`
- [Authentication layout](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Auth/AuthLayout.jsx): `src/pages/Auth/AuthLayout.jsx`
- [Session management](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Authentication API](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/services/auth.service.js): `src/services/auth.service.js`
- [Route guards](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Public route guard](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/PublicRoute.jsx): `src/components/PublicRoute.jsx`

### Workspace UI

- [Application shell](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Workspace navigation](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/layouts/DashboardLayout.jsx): `src/layouts/DashboardLayout.jsx`
- [Dashboard and API check](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Dashboard/Dashboard.jsx): `src/pages/Dashboard/Dashboard.jsx`
- [Project listing](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Projects/Projects.jsx): `src/pages/Projects/Projects.jsx`
- [Project detail and tasks](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Projects/ProjectDetail.jsx): `src/pages/Projects/ProjectDetail.jsx`
- [Account settings](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/pages/Settings/Settings.jsx): `src/pages/Settings/Settings.jsx`
- [Command palette](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/CommandPalette.jsx): `src/components/CommandPalette.jsx`
- [Notifications menu](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/NotificationsDropdown.jsx): `src/components/NotificationsDropdown.jsx`
- [Project creation form](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/NewProjectModal.jsx): `src/components/NewProjectModal.jsx`
- [Modal presentation](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/Modal.jsx): `src/components/Modal.jsx`

### Client state

- [Project and activity state](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/ProjectsContext.jsx): `src/context/ProjectsContext.jsx`
- [Seed project data](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/lib/mockData.js): `src/lib/mockData.js`
- **Browser session storage**

### Interaction feedback

- [Toast state](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/context/ToastContext.jsx): `src/context/ToastContext.jsx`
- [Toast display](https://github.com/nitin-o/iot-platform-frontend/blob/main/src/components/ToastViewport.jsx): `src/components/ToastViewport.jsx`

### Other components

- **Workspace user**
- **Configured auth backend**

## Connections

- Workspace user → Application shell: opens workspace
- Application shell → Sign-in and signup: routes public pages (evidence: `src/main.jsx`)
- Application shell → Route guards: protects workspace routes (evidence: `src/main.jsx`)
- Application shell → Public route guard: guards auth pages (evidence: `src/main.jsx`)
- Application shell → Workspace navigation: mounts workspace routes (evidence: `src/main.jsx`)
- Application shell → Toast display: mounts notifications (evidence: `src/main.jsx`)
- Sign-in and signup → Authentication layout: renders forms (evidence: `src/pages/Auth/Signup.jsx`)
- Sign-in and signup → Session management: submits credentials (evidence: `src/pages/Auth/Signup.jsx`)
- Session management → Authentication API: calls auth operations (evidence: `src/context/AuthContext.jsx`)
- Authentication API → Configured auth backend: sends auth requests (evidence: `src/services/auth.service.js`)
- Session management → Browser session storage: reads and writes tokens (evidence: `src/context/AuthContext.jsx`)
- Route guards → Session management: checks session (evidence: `src/components/ProtectedRoute.jsx`)
- Public route guard → Session management: checks session (evidence: `src/components/PublicRoute.jsx`)
- Workspace navigation → Session management: uses session and logout (evidence: `src/layouts/DashboardLayout.jsx`)
- Workspace navigation → Dashboard and API check: renders routed view
- Workspace navigation → Project listing: renders routed view
- Workspace navigation → Project detail and tasks: renders routed view
- Workspace navigation → Account settings: renders routed view
- Dashboard and API check → Session management: checks current user (evidence: `src/pages/Dashboard/Dashboard.jsx`)
- Dashboard and API check → Configured auth backend: requests current user (evidence: `src/pages/Dashboard/Dashboard.jsx`)
- Dashboard and API check → Project and activity state: reads projects and activity (evidence: `src/pages/Dashboard/Dashboard.jsx`)
- Project listing → Project and activity state: reads project list (evidence: `src/pages/Projects/Projects.jsx`)
- Project listing → Project creation form: opens creation form (evidence: `src/pages/Projects/Projects.jsx`)
- Project detail and tasks → Project and activity state: manages project tasks (evidence: `src/pages/Projects/ProjectDetail.jsx`)
- Account settings → Session management: reads account session (evidence: `src/pages/Settings/Settings.jsx`)
- Command palette → Project and activity state: searches projects (evidence: `src/components/CommandPalette.jsx`)
- Command palette → Session management: uses account context (evidence: `src/components/CommandPalette.jsx`)
- Project and activity state → Seed project data: seeds initial state (evidence: `src/context/ProjectsContext.jsx`)
- Project creation form → Project and activity state: creates project (evidence: `src/components/NewProjectModal.jsx`)
- Project creation form → Toast state: reports creation (evidence: `src/components/NewProjectModal.jsx`)
- Project creation form → Modal presentation: renders form modal (evidence: `src/components/NewProjectModal.jsx`)
- Toast display → Toast state: displays queued toasts (evidence: `src/components/ToastViewport.jsx`)