# ahmadridhoramadhan/browserhome architecture

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

- Interactive diagram: https://gitdiagram.com/ahmadridhoramadhan/browserhome
- Repository: https://github.com/ahmadridhoramadhan/browserhome

## Overview

Chrome Home Dashboard is a browser-new-tab or standalone React dashboard. The user opens the dashboard, arranges widget windows and shortcuts, and uses clock, weather, prayer, task, notes, and custom-widget features; settings and widget state persist locally, with optional Chrome Sync backup. The sampled App code confirms widget rendering and storage use; README documents additional capabilities whose detailed wiring was not sampled, so uncertain links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/App.tsx) (Dashboard app), [`src/utils/storage.ts`](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/storage.ts) (Browser settings storage), [`src/components/widgets/PrayerWidget.tsx`](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/PrayerWidget.tsx) (Prayer schedule), [`src/components/widgets/WeatherWidget.tsx`](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/WeatherWidget.tsx) (Weather widget)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["Dashboard shell"]
  node_app["Dashboard app<br/>[App.tsx]"]
  node_window["Widget windows<br/>[WindowFrame.tsx]"]
  node_shortcuts["App shortcuts<br/>[AppShortcuts.tsx]"]
  node_topbar["Dashboard controls<br/>[TopBar.tsx]"]
end

subgraph group_widgets["Dashboard widgets"]
  node_clock["Clock and date<br/>[ClockWidget.tsx]"]
  node_weather["Weather widget<br/>[WeatherWidget.tsx]"]
  node_weatherapi["Weather and city lookup<br/>[weatherApi.ts]"]
  node_prayer["Prayer schedule<br/>[PrayerWidget.tsx]"]
  node_prayercalc["Prayer calculations<br/>[prayerCalc.ts]"]
  node_todo["To-do list<br/>[TodoWidget.tsx]"]
  node_notes["Quick notes<br/>[NotesWidget.tsx]"]
end

subgraph group_custom["Custom widgets"]
  node_editor["Custom widget editor"]
  node_renderer["Custom widget renderer"]
  node_sandbox["Custom code sandbox<br/>[sandbox.js]"]
  node_sandboxframe["Sandbox frame"]
end

subgraph group_settings["Settings and persistence"]
  node_background["Background settings"]
  node_catalog["Widget catalog"]
  node_syncmodal["Backup and sync"]
  node_storage[("Browser settings storage<br/>[storage.ts]")]
end

node_user(("Dashboard user"))
node_chrome[("Chrome Sync")]
node_weather_service(("Weather data service"))

node_user -->|"opens"| node_app
node_app -->|"renders windows"| node_window
node_app -->|"renders"| node_clock
node_app -->|"renders"| node_weather
node_app -->|"renders"| node_prayer
node_app -->|"renders"| node_todo
node_app -->|"renders"| node_notes
node_app -->|"renders"| node_renderer
node_app -->|"loads and saves"| node_storage
node_weather -->|"fetches data"| node_weatherapi
node_weatherapi -.->|"requests weather"| node_weather_service
node_prayer -->|"fetches times"| node_prayercalc
node_prayer -->|"searches cities"| node_weatherapi
node_shortcuts -->|"reads and saves"| node_storage
node_weather -->|"reads and saves"| node_storage
node_prayer -->|"reads and saves"| node_storage
node_syncmodal -->|"imports and exports"| node_storage
node_storage -.->|"syncs settings"| node_chrome
node_editor -->|"previews code"| node_sandboxframe
node_sandboxframe -->|"sends render data"| node_sandbox
node_app -->|"renders controls"| node_topbar
node_app -->|"opens settings"| node_background
node_app -->|"opens catalog"| node_catalog
node_app -->|"opens backup"| node_syncmodal

click node_app "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/App.tsx"
click node_window "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/WindowFrame.tsx"
click node_shortcuts "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/AppShortcuts.tsx"
click node_clock "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/ClockWidget.tsx"
click node_weather "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/WeatherWidget.tsx"
click node_weatherapi "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/weatherApi.ts"
click node_prayer "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/PrayerWidget.tsx"
click node_prayercalc "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/prayerCalc.ts"
click node_todo "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/TodoWidget.tsx"
click node_notes "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/NotesWidget.tsx"
click node_editor "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/CustomWidgetEditorModal.tsx"
click node_renderer "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/CustomRendererWidget.tsx"
click node_sandbox "https://github.com/ahmadridhoramadhan/browserhome/blob/main/public/sandbox.js"
click node_sandboxframe "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/CustomSandboxFrame.tsx"
click node_topbar "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/TopBar.tsx"
click node_background "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/BackgroundSettingsModal.tsx"
click node_catalog "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/WidgetCatalogModal.tsx"
click node_syncmodal "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/SyncBackupModal.tsx"
click node_storage "https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/storage.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_app,node_window,node_shortcuts,node_topbar,node_user toneBlue
class node_clock,node_weather,node_weatherapi,node_prayer,node_prayercalc,node_todo,node_notes,node_chrome toneAmber
class node_editor,node_renderer,node_sandbox,node_sandboxframe toneMint
class node_background,node_catalog,node_syncmodal,node_storage toneRose
class node_weather_service toneIndigo
```

## Components

### Dashboard shell

- [Dashboard app](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/App.tsx): `src/App.tsx`
- [Widget windows](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/WindowFrame.tsx): `src/components/WindowFrame.tsx`
- [App shortcuts](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/AppShortcuts.tsx): `src/components/AppShortcuts.tsx`
- [Dashboard controls](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/TopBar.tsx): `src/components/TopBar.tsx`

### Dashboard widgets

- [Clock and date](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/ClockWidget.tsx): `src/components/widgets/ClockWidget.tsx`
- [Weather widget](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/WeatherWidget.tsx): `src/components/widgets/WeatherWidget.tsx`
- [Weather and city lookup](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/weatherApi.ts): `src/utils/weatherApi.ts`
- [Prayer schedule](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/PrayerWidget.tsx): `src/components/widgets/PrayerWidget.tsx`
- [Prayer calculations](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/prayerCalc.ts): `src/utils/prayerCalc.ts`
- [To-do list](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/TodoWidget.tsx): `src/components/widgets/TodoWidget.tsx`
- [Quick notes](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/NotesWidget.tsx): `src/components/widgets/NotesWidget.tsx`

### Custom widgets

- [Custom widget editor](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/CustomWidgetEditorModal.tsx): `src/components/CustomWidgetEditorModal.tsx`
- [Custom widget renderer](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/CustomRendererWidget.tsx): `src/components/widgets/CustomRendererWidget.tsx`
- [Custom code sandbox](https://github.com/ahmadridhoramadhan/browserhome/blob/main/public/sandbox.js): `public/sandbox.js`
- [Sandbox frame](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/widgets/CustomSandboxFrame.tsx): `src/components/widgets/CustomSandboxFrame.tsx`

### Settings and persistence

- [Background settings](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/BackgroundSettingsModal.tsx): `src/components/BackgroundSettingsModal.tsx`
- [Widget catalog](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/WidgetCatalogModal.tsx): `src/components/WidgetCatalogModal.tsx`
- [Backup and sync](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/components/SyncBackupModal.tsx): `src/components/SyncBackupModal.tsx`
- [Browser settings storage](https://github.com/ahmadridhoramadhan/browserhome/blob/main/src/utils/storage.ts): `src/utils/storage.ts`

### Other components

- **Dashboard user**
- **Chrome Sync**
- **Weather data service**

## Connections

- Dashboard user → Dashboard app: opens
- Dashboard app → Widget windows: renders windows
- Dashboard app → Clock and date: renders
- Dashboard app → Weather widget: renders
- Dashboard app → Prayer schedule: renders
- Dashboard app → To-do list: renders
- Dashboard app → Quick notes: renders
- Dashboard app → Custom widget renderer: renders
- Dashboard app → Browser settings storage: loads and saves
- Weather widget → Weather and city lookup: fetches data
- Weather and city lookup → Weather data service: requests weather
- Prayer schedule → Prayer calculations: fetches times
- Prayer schedule → Weather and city lookup: searches cities
- App shortcuts → Browser settings storage: reads and saves
- Weather widget → Browser settings storage: reads and saves
- Prayer schedule → Browser settings storage: reads and saves
- Backup and sync → Browser settings storage: imports and exports
- Browser settings storage → Chrome Sync: syncs settings
- Custom widget editor → Sandbox frame: previews code
- Sandbox frame → Custom code sandbox: sends render data
- Dashboard app → Dashboard controls: renders controls
- Dashboard app → Background settings: opens settings
- Dashboard app → Widget catalog: opens catalog
- Dashboard app → Backup and sync: opens backup