# mjunhaochen/did-i-feed-my-fish architecture

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

- Interactive diagram: https://gitdiagram.com/mjunhaochen/did-i-feed-my-fish
- Repository: https://github.com/mjunhaochen/did-i-feed-my-fish

## Overview

This is a small browser app for answering whether the user fed their fish today. The main workflow is to record, undo, or clear feedings; the app persists history locally and presents today’s status and locale-formatted times. It also supports a preferred feeding time, keyboard shortcuts, and theme selection. The sampled page excerpt confirms these behaviors, but does not establish a separate reminder delivery mechanism. Wiring for unsampled routes and UI details is represented only where documented or visible in the app shell.

Main entry points: [`src/App.tsx`](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/App.tsx) (App routing), [`src/pages/FishFeeder.tsx`](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/FishFeeder.tsx) (Fish feeder), [`src/components/Header.tsx`](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/Header.tsx) (Navigation header), [`src/components/ThemeProvider.tsx`](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ThemeProvider.tsx) (Theme provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_router["App routing<br/>[App.tsx]"]
  node_header["Navigation header<br/>[Header.tsx]"]
  node_about["About page<br/>[About.tsx]"]
  node_notfound["Not found page<br/>[NotFound.tsx]"]
end

subgraph group_feeding["Feeding workflow"]
  node_feeder["Fish feeder<br/>[FishFeeder.tsx]"]
  node_feedhistory[("Feed history")]
  node_browser["Browser APIs"]
end

subgraph group_presentation["Shared presentation"]
  node_toastutil["Toast helper<br/>[toast.ts]"]
  node_sonner["Toast renderer<br/>[sonner.tsx]"]
  node_controls["UI primitives"]
end

subgraph group_appearance["Appearance"]
  node_themeprovider["Theme provider<br/>[ThemeProvider.tsx]"]
  node_modetoggle["Theme selector<br/>[ModeToggle.tsx]"]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_themeprovider
node_themeprovider -->|"wraps"| node_router
node_router -->|"renders"| node_header
node_router -->|"routes home"| node_feeder
node_router -->|"routes about"| node_about
node_router -->|"routes fallback"| node_notfound
node_user -->|"feeds or manages"| node_feeder
node_feeder -->|"reads and writes"| node_feedhistory
node_feeder -->|"uses time and locale"| node_browser
node_feeder -->|"reports actions"| node_toastutil
node_router -->|"renders"| node_sonner
node_toastutil -->|"dispatches toast"| node_sonner
node_feeder -->|"uses controls"| node_controls
node_header -->|"uses controls"| node_controls
node_header -->|"renders"| node_modetoggle
node_modetoggle -->|"sets theme"| node_themeprovider

click node_entry "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/main.tsx"
click node_router "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/App.tsx"
click node_header "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/Header.tsx"
click node_about "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/About.tsx"
click node_notfound "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/NotFound.tsx"
click node_feeder "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/FishFeeder.tsx"
click node_toastutil "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/utils/toast.ts"
click node_sonner "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ui/sonner.tsx"
click node_controls "https://github.com/mjunhaochen/did-i-feed-my-fish/tree/main/src/components/ui"
click node_themeprovider "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ThemeProvider.tsx"
click node_modetoggle "https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ModeToggle.tsx"

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_entry,node_router,node_header,node_about,node_notfound,node_user toneBlue
class node_feeder,node_feedhistory,node_browser toneAmber
class node_toastutil,node_sonner,node_controls toneMint
class node_themeprovider,node_modetoggle toneRose
```

## Components

### App shell

- [React entry](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/main.tsx): `src/main.tsx`
- [App routing](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation header](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [About page](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/About.tsx): `src/pages/About.tsx`
- [Not found page](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`

### Feeding workflow

- [Fish feeder](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/pages/FishFeeder.tsx): `src/pages/FishFeeder.tsx`
- **Feed history**
- **Browser APIs**

### Shared presentation

- [Toast helper](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/utils/toast.ts): `src/utils/toast.ts`
- [Toast renderer](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ui/sonner.tsx): `src/components/ui/sonner.tsx`
- [UI primitives](https://github.com/mjunhaochen/did-i-feed-my-fish/tree/main/src/components/ui): `src/components/ui`

### Appearance

- [Theme provider](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ThemeProvider.tsx): `src/components/ThemeProvider.tsx`
- [Theme selector](https://github.com/mjunhaochen/did-i-feed-my-fish/blob/main/src/components/ModeToggle.tsx): `src/components/ModeToggle.tsx`

### Other components

- **User**

## Connections

- User → React entry: opens app
- React entry → Theme provider: renders
- Theme provider → App routing: wraps
- App routing → Navigation header: renders
- App routing → Fish feeder: routes home
- App routing → About page: routes about
- App routing → Not found page: routes fallback
- User → Fish feeder: feeds or manages
- Fish feeder → Feed history: reads and writes
- Fish feeder → Browser APIs: uses time and locale
- Fish feeder → Toast helper: reports actions
- App routing → Toast renderer: renders
- Toast helper → Toast renderer: dispatches toast
- Fish feeder → UI primitives: uses controls
- Navigation header → UI primitives: uses controls
- Navigation header → Theme selector: renders
- Theme selector → Theme provider: sets theme