Calimero | Admin Dashboard

Component Tree

Source Structure

src/App.tsx

Root component. Sets up React Router with all page routes. Wraps pages with layout and auth guard.

src/pages/

One file per page: Dashboard, Contexts, ContextDetails, Applications, ApplicationDetails, Identity, LoginPage, Logs, Blobs, AddRelease, AddRootKey, InstallApplication, JoinContext.

src/hooks/

Custom hooks that call the node API and manage local state. Each hook corresponds to a node API resource.

src/components/

Shared UI components reused across pages: tables, modals, buttons, status badges.

src/types/

TypeScript types for node API responses, request bodies, and UI state.

src/utils/

Utility functions: API client setup, auth token management, formatting helpers.

Authentication Flow

The dashboard authenticates with the node using JWT tokens.

1

Login Page

User navigates to ConnectPage, enters the node URL and credentials. The dashboard calls the node's auth endpoint.

2

Token Storage

JWT access token and refresh token are stored in localStorage. The node URL is also stored for subsequent requests.

3

Authenticated Requests

All API hooks attach the Authorization: Bearer header to every request. Expired tokens trigger a refresh before retrying.

4

Logout

Clears stored tokens and node URL, redirects to the login page.

Tech Stack

React 19

Latest React with concurrent features. Uses functional components and hooks throughout — no class components.

TypeScript

Strict mode enabled. All API response types are defined; no implicit any.

Vite

Fast HMR in development, optimized production bundles. Config in vite.config.ts.

React Router

Client-side routing for all pages. Route definitions in App.tsx.

Styled Components / Emotion

CSS-in-JS for component styling. Shared theme tokens for colors, spacing, and typography.

pnpm

Fast, disk-efficient package manager. Lockfile committed for reproducible installs.

Architecture