# abineshkumarr/synora architecture

> Architecture diagram of the GitHub repository abineshkumarr/synora, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abineshkumarr/synora
- Repository: https://github.com/abineshkumarr/synora

## Overview

#### Purpose and Runtime
Synora is a desktop-first productivity workspace organized around boards, notes, calendar, habits, and dashboard views. It is a browser SPA built with React-style JSX and Vite entry infrastructure: `src/main.jsx`, `src/App.jsx`, and `vite.config.js`. Current persistence is local browser storage; no backend, authentication, cloud sync, or external API integration is represented in the repository.

#### Application Composition and Navigation
`App` is the top-level application assembly point, while the shared shell separates persistent navigation from feature workspaces. Layout components provide the sidebar, top bar, breadcrumbs, and content workspace: `src/components/layout/Layout.jsx`, `src/components/layout/Sidebar.jsx`, and `src/components/layout/Workspace.jsx`. Navigation destinations are centrally defined in `src/constants/navigation.js`, creating a boundary between global navigation structure and page implementations.

#### Global State and UI Interaction
Application-wide state is exposed through a React context/provider layer: `src/context/AppContext.jsx`, `src/context/AppProvider.jsx`, and `src/hooks/useApp.js`. Feature and layout consumers should use this abstraction rather than directly coupling to storage or top-level state. Reusable interaction hooks support workspace selection, modal behavior, debouncing, and local storage access, notably `src/hooks/useWorkspace.js`, `src/hooks/useModal.js`, and `src/hooks/useLocalStorage.js`.

#### Persistence, Validation, and Domain Services
Storage is a distinct client-side data boundary. `src/storage/storageService.js` owns persistence access, `src/storage/validationService.js` validates stored data, and `src/storage/migrationService.js` supports schema evolution for existing local data. Domain-facing operations are separated into `src/services/boardService.js` and `src/services/noteService.js`; pages and components should route board/note mutations through these services instead of directly managing persisted records.

#### Feature Workspaces
Boards are the core established product area, represented by the board landing view and a board-specific workspace: `src/pages/Boards/Boards.jsx` and `src/pages/Boards/BoardWorkspace.jsx`. Other top-level productivity domains are isolated as pages—`src/pages/Notes/Notes.jsx`, `src/pages/Calendar/Calendar.jsx`, and `src/pages/Habits/Habits.jsx`—allowing their future implementation to share the application shell and state/storage boundaries without tightly coupling their UI.

#### Dashboard Aggregation
The dashboard is an aggregation surface rather than an independent data domain. `src/pages/Dashboard/Dashboard.jsx` composes a grid and header from `src/pages/Dashboard/components/DashboardGrid/DashboardGrid.jsx` and `src/pages/Dashboard/components/DashboardHeader/DashboardHeader.jsx`, then renders focused widgets such as tasks, recent boards/notes, calendar preview, habits, and deadlines. These widgets should consume existing domain data through services/context, not establish parallel persistence.

#### Styling and Cross-Cutting Utilities
Global visual foundations and shell styling are kept separate from feature-local styles in `src/styles/globals.css`, `src/styles/layout.css`, and `src/styles/variables.css`. Shared non-UI logic for identifiers, dates, constants, and validation resides in `src/utils/ids.js`, `src/utils/dates.js`, and `src/utils/validation.js`. The principal control flow is: browser entry → app/provider → shared layout/navigation → selected workspace/page → domain service → validated/migrated local storage.

Main entry points: [`src/components/layout/Workspace.jsx`](https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Workspace.jsx) (Workspace), [`src/storage/storageService.js`](https://github.com/abineshkumarr/synora/blob/main/src/storage/storageService.js) (Local Storage Service), [`src/services/boardService.js`](https://github.com/abineshkumarr/synora/blob/main/src/services/boardService.js) (Board Service), [`src/App.jsx`](https://github.com/abineshkumarr/synora/blob/main/src/App.jsx) (App Assembly)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_main(("Browser Entry<br/>Vite entry<br/>[main.jsx]"))
  node_app["App Assembly<br/>root component<br/>[App.jsx]"]
end

subgraph group_shell["Application Shell"]
  node_layout["Shared Layout<br/>shell component<br/>[Layout.jsx]"]
  node_sidebar["Sidebar<br/>navigation component<br/>[Sidebar.jsx]"]
  node_workspace["Workspace<br/>content component<br/>[Workspace.jsx]"]
  node_navigation["Navigation Definitions<br/>route constants<br/>[navigation.js]"]
end

subgraph group_state["State and Data"]
  node_provider["App Provider<br/>React provider<br/>[AppProvider.jsx]"]
  node_context["App Context<br/>React context<br/>[AppContext.jsx]"]
  node_useapp["State Consumer Hook<br/>React hook<br/>[useApp.js]"]
  node_boardservice{{"Board Service<br/>domain service<br/>[boardService.js]"}}
  node_noteservice{{"Note Service<br/>domain service<br/>[noteService.js]"}}
  node_storage[("Local Storage Service<br/>persistence boundary<br/>[storageService.js]")]
  node_validation["Storage Validation<br/>validation service"]
  node_migration["Storage Migration<br/>migration service"]
end

subgraph group_features["Feature Workspaces"]
  node_boards["Boards<br/>page<br/>[Boards.jsx]"]
  node_boardworkspace["Board Workspace<br/>feature workspace<br/>[BoardWorkspace.jsx]"]
  node_notes["Notes<br/>page<br/>[Notes.jsx]"]
  node_calendar["Calendar<br/>page<br/>[Calendar.jsx]"]
  node_habits["Habits<br/>page<br/>[Habits.jsx]"]
  node_dashboard["Dashboard<br/>aggregation page<br/>[Dashboard.jsx]"]
  node_dashboardgrid["Dashboard Grid<br/>dashboard component<br/>[DashboardGrid.jsx]"]
end

node_main -->|"mounts"| node_app
node_app -->|"wraps with"| node_provider
node_provider -->|"publishes"| node_context
node_useapp -->|"consumes"| node_context
node_app -->|"assembles"| node_layout
node_layout -->|"includes"| node_sidebar
node_layout -->|"hosts"| node_workspace
node_sidebar -->|"uses"| node_navigation
node_workspace -->|"selects"| node_boards
node_workspace -->|"selects"| node_notes
node_workspace -->|"selects"| node_calendar
node_workspace -->|"selects"| node_habits
node_workspace -->|"selects"| node_dashboard
node_boards -->|"opens"| node_boardworkspace
node_dashboard -->|"composes"| node_dashboardgrid
node_boards -->|"board mutations"| node_boardservice
node_boardworkspace -->|"board mutations"| node_boardservice
node_notes -->|"note mutations"| node_noteservice
node_dashboardgrid -->|"reads board data"| node_boardservice
node_dashboardgrid -->|"reads note data"| node_noteservice
node_boardservice -->|"persists through"| node_storage
node_noteservice -->|"persists through"| node_storage
node_storage -->|"validates data"| node_validation
node_storage -->|"migrates schemas"| node_migration

click node_main "https://github.com/abineshkumarr/synora/blob/main/src/main.jsx"
click node_app "https://github.com/abineshkumarr/synora/blob/main/src/App.jsx"
click node_provider "https://github.com/abineshkumarr/synora/blob/main/src/context/AppProvider.jsx"
click node_context "https://github.com/abineshkumarr/synora/blob/main/src/context/AppContext.jsx"
click node_useapp "https://github.com/abineshkumarr/synora/blob/main/src/hooks/useApp.js"
click node_layout "https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Layout.jsx"
click node_sidebar "https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Sidebar.jsx"
click node_workspace "https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Workspace.jsx"
click node_navigation "https://github.com/abineshkumarr/synora/blob/main/src/constants/navigation.js"
click node_boards "https://github.com/abineshkumarr/synora/blob/main/src/pages/Boards/Boards.jsx"
click node_boardworkspace "https://github.com/abineshkumarr/synora/blob/main/src/pages/Boards/BoardWorkspace.jsx"
click node_notes "https://github.com/abineshkumarr/synora/blob/main/src/pages/Notes/Notes.jsx"
click node_calendar "https://github.com/abineshkumarr/synora/blob/main/src/pages/Calendar/Calendar.jsx"
click node_habits "https://github.com/abineshkumarr/synora/blob/main/src/pages/Habits/Habits.jsx"
click node_dashboard "https://github.com/abineshkumarr/synora/blob/main/src/pages/Dashboard/Dashboard.jsx"
click node_dashboardgrid "https://github.com/abineshkumarr/synora/blob/main/src/pages/Dashboard/components/DashboardGrid/DashboardGrid.jsx"
click node_boardservice "https://github.com/abineshkumarr/synora/blob/main/src/services/boardService.js"
click node_noteservice "https://github.com/abineshkumarr/synora/blob/main/src/services/noteService.js"
click node_storage "https://github.com/abineshkumarr/synora/blob/main/src/storage/storageService.js"
click node_validation "https://github.com/abineshkumarr/synora/blob/main/src/storage/validationService.js"
click node_migration "https://github.com/abineshkumarr/synora/blob/main/src/storage/migrationService.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_main,node_app toneBlue
class node_layout,node_sidebar,node_workspace,node_navigation toneAmber
class node_provider,node_context,node_useapp,node_boardservice,node_noteservice,node_storage,node_validation,node_migration toneMint
class node_boards,node_boardworkspace,node_notes,node_calendar,node_habits,node_dashboard,node_dashboardgrid toneRose
```

## Components

### Runtime

- [Browser Entry](https://github.com/abineshkumarr/synora/blob/main/src/main.jsx): Vite entry · `src/main.jsx`
- [App Assembly](https://github.com/abineshkumarr/synora/blob/main/src/App.jsx): root component · `src/App.jsx`

### Application Shell

- [Shared Layout](https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Layout.jsx): shell component · `src/components/layout/Layout.jsx`
- [Sidebar](https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Sidebar.jsx): navigation component · `src/components/layout/Sidebar.jsx`
- [Workspace](https://github.com/abineshkumarr/synora/blob/main/src/components/layout/Workspace.jsx): content component · `src/components/layout/Workspace.jsx`
- [Navigation Definitions](https://github.com/abineshkumarr/synora/blob/main/src/constants/navigation.js): route constants · `src/constants/navigation.js`

### State and Data

- [App Provider](https://github.com/abineshkumarr/synora/blob/main/src/context/AppProvider.jsx): React provider · Owns application-wide state exposure. · `src/context/AppProvider.jsx`
- [App Context](https://github.com/abineshkumarr/synora/blob/main/src/context/AppContext.jsx): React context · `src/context/AppContext.jsx`
- [State Consumer Hook](https://github.com/abineshkumarr/synora/blob/main/src/hooks/useApp.js): React hook · `src/hooks/useApp.js`
- [Board Service](https://github.com/abineshkumarr/synora/blob/main/src/services/boardService.js): domain service · Routes board operations to persistence. · `src/services/boardService.js`
- [Note Service](https://github.com/abineshkumarr/synora/blob/main/src/services/noteService.js): domain service · Routes note operations to persistence. · `src/services/noteService.js`
- [Local Storage Service](https://github.com/abineshkumarr/synora/blob/main/src/storage/storageService.js): persistence boundary · Browser-local persistence access. · `src/storage/storageService.js`
- [Storage Validation](https://github.com/abineshkumarr/synora/blob/main/src/storage/validationService.js): validation service · `src/storage/validationService.js`
- [Storage Migration](https://github.com/abineshkumarr/synora/blob/main/src/storage/migrationService.js): migration service · Evolves existing local data schemas. · `src/storage/migrationService.js`

### Feature Workspaces

- [Boards](https://github.com/abineshkumarr/synora/blob/main/src/pages/Boards/Boards.jsx): page · Core board landing view. · `src/pages/Boards/Boards.jsx`
- [Board Workspace](https://github.com/abineshkumarr/synora/blob/main/src/pages/Boards/BoardWorkspace.jsx): feature workspace · `src/pages/Boards/BoardWorkspace.jsx`
- [Notes](https://github.com/abineshkumarr/synora/blob/main/src/pages/Notes/Notes.jsx): page · `src/pages/Notes/Notes.jsx`
- [Calendar](https://github.com/abineshkumarr/synora/blob/main/src/pages/Calendar/Calendar.jsx): page · `src/pages/Calendar/Calendar.jsx`
- [Habits](https://github.com/abineshkumarr/synora/blob/main/src/pages/Habits/Habits.jsx): page · `src/pages/Habits/Habits.jsx`
- [Dashboard](https://github.com/abineshkumarr/synora/blob/main/src/pages/Dashboard/Dashboard.jsx): aggregation page · `src/pages/Dashboard/Dashboard.jsx`
- [Dashboard Grid](https://github.com/abineshkumarr/synora/blob/main/src/pages/Dashboard/components/DashboardGrid/DashboardGrid.jsx): dashboard component · Hosts focused domain-data widgets. · `src/pages/Dashboard/components/DashboardGrid/DashboardGrid.jsx`

## Connections

- Browser Entry → App Assembly: mounts
- App Assembly → App Provider: wraps with
- App Provider → App Context: publishes
- State Consumer Hook → App Context: consumes
- App Assembly → Shared Layout: assembles
- Shared Layout → Sidebar: includes
- Shared Layout → Workspace: hosts
- Sidebar → Navigation Definitions: uses
- Workspace → Boards: selects
- Workspace → Notes: selects
- Workspace → Calendar: selects
- Workspace → Habits: selects
- Workspace → Dashboard: selects
- Boards → Board Workspace: opens
- Dashboard → Dashboard Grid: composes
- Boards → Board Service: board mutations
- Board Workspace → Board Service: board mutations
- Notes → Note Service: note mutations
- Dashboard Grid → Board Service: reads board data
- Dashboard Grid → Note Service: reads note data
- Board Service → Local Storage Service: persists through
- Note Service → Local Storage Service: persists through
- Local Storage Service → Storage Validation: validates data
- Local Storage Service → Storage Migration: migrates schemas