# kichipoe/okadot architecture

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

- Interactive diagram: https://gitdiagram.com/kichipoe/okadot
- Repository: https://github.com/kichipoe/okadot

## Overview

#### Purpose and Entry Points
OkaDot is a React Native mobile organizer for todos and notes, with editable notes and user-selectable themes. JavaScript starts at `index.js`, renders the root component in `App.jsx`, and targets native Android/iOS shells.

#### Application Composition
`App.jsx` is the composition boundary for app-wide providers and navigation. `src/navigation/RootNavigator.jsx` defines the screen-level navigation graph, separating home, note editing, and preferences flows. Screen exports are centralized in `src/screens/index.js`.

#### Home Workspace
`src/screens/Home/HomeScreen.jsx` is the primary workspace and coordinates segmented content. `src/screens/Home/TodoContent.jsx` presents and updates task data; `src/screens/Home/NotesContent.jsx` presents note data. Reusable segmentation UI is provided by `src/components/molecules/BottomSegmentBar.jsx`.

#### Note and Todo Interaction Layer
Notes are edited in `src/screens/Notes/NoteEditorScreen.jsx`, using note-oriented controls such as `src/components/atoms/notes/NoteItem.jsx` and `src/components/atoms/notes/TagsEditor.jsx`. Todo creation and item interaction are encapsulated in `src/components/atoms/todo/TodoInput.jsx` and `src/components/atoms/todo/TodoItem.jsx`. This keeps screen orchestration separate from presentational/editing widgets.

#### Persistence Boundary
Local persistence is isolated by domain: `src/storage/todoStorage.js`, `src/storage/notesStorage.js`, and `src/storage/themeStorage.js`. UI screens consume these modules rather than coupling storage concerns into components. No backend, API client, authentication layer, or cloud service is evident in the repository tree.

#### Theme and Preferences Flow
Theme state is owned at the application boundary by `src/theme/ThemeProvider.jsx`, with theme definitions in `src/theme/themes.js` and palette data in `src/theme/palette.json`. `src/hooks/useTheme.js` is the consumer-facing access boundary. Preferences are organized through `src/screens/PreferenceScreen.jsx`, with dedicated theme and about screens at `src/screens/Preference/ThemeScreen.jsx` and `src/screens/Preference/AboutScreen.jsx`.

#### Runtime and Native Infrastructure
The app runs in the React Native JavaScript runtime, bundled by Metro (`metro.config.js`) and built with npm dependencies (`package.json`). Android integration is configured through `android/app/build.gradle`, launched from Kotlin bootstrap code in `android/app/src/main/java/com/kishanpujari/okadot/MainActivity.kt`, and uses `android/app/src/main/AndroidManifest.xml`. iOS integration uses the Xcode project `ios/OkaDot.xcodeproj/project.pbxproj`, native delegate `ios/OkaDot/AppDelegate.swift`, and CocoaPods via `ios/Podfile`.

Main entry points: [`src/navigation/RootNavigator.jsx`](https://github.com/kichipoe/okadot/blob/main/src/navigation/RootNavigator.jsx) (Root navigator), [`src/theme/ThemeProvider.jsx`](https://github.com/kichipoe/okadot/blob/main/src/theme/ThemeProvider.jsx) (Theme provider), [`App.jsx`](https://github.com/kichipoe/okadot/blob/main/App.jsx) (App composition), [`src/screens/Home/TodoContent.jsx`](https://github.com/kichipoe/okadot/blob/main/src/screens/Home/TodoContent.jsx) (Todo content)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["React Native app"]
  node_index(("JavaScript entry<br/>entry point<br/>[index.js]"))
  node_app_root["App composition<br/>root component<br/>[App.jsx]"]
  node_theme_provider["Theme provider<br/>state provider<br/>[ThemeProvider.jsx]"]
  node_theme_definitions["Theme definitions<br/>theme data<br/>[themes.js]"]
  node_use_theme["Theme hook<br/>consumer API<br/>[useTheme.js]"]
  node_navigator["Root navigator<br/>navigation<br/>[RootNavigator.jsx]"]
  node_screen_exports["Screen exports<br/>screen registry<br/>[index.js]"]
  node_home["Home workspace<br/>screen"]
  node_todo_content["Todo content<br/>screen content<br/>[TodoContent.jsx]"]
  node_notes_content["Notes content<br/>screen content<br/>[NotesContent.jsx]"]
  node_segment_bar["Bottom segment bar<br/>shared UI"]
  node_note_editor["Note editor<br/>screen"]
  node_note_controls["Note controls<br/>editing UI<br/>[NoteItem.jsx]"]
  node_todo_controls["Todo controls<br/>editing UI<br/>[TodoInput.jsx]"]
  node_preferences["Preferences<br/>screen"]
  node_theme_screen["Theme preferences<br/>screen<br/>[ThemeScreen.jsx]"]
end

subgraph group_storage["Local persistence"]
  node_todo_storage[("Todo storage<br/>local storage<br/>[todoStorage.js]")]
  node_notes_storage[("Notes storage<br/>local storage<br/>[notesStorage.js]")]
  node_theme_storage[("Theme storage<br/>local storage<br/>[themeStorage.js]")]
end

subgraph group_android["Android shell"]
  node_android_bootstrap{{"Android bootstrap<br/>Kotlin activity<br/>[MainActivity.kt]"}}
end

subgraph group_ios["iOS shell"]
  node_ios_bootstrap{{"iOS bootstrap<br/>Swift delegate<br/>[AppDelegate.swift]"}}
end

node_index -->|"renders"| node_app_root
node_app_root -->|"wraps with"| node_theme_provider
node_app_root -->|"hosts"| node_navigator
node_theme_provider -->|"uses"| node_theme_definitions
node_theme_provider -->|"persists"| node_theme_storage
node_use_theme -->|"consumes"| node_theme_provider
node_navigator -->|"resolves screens"| node_screen_exports
node_navigator -->|"routes to"| node_home
node_navigator -->|"routes to"| node_note_editor
node_navigator -->|"routes to"| node_preferences
node_home -->|"coordinates"| node_todo_content
node_home -->|"coordinates"| node_notes_content
node_home -->|"uses"| node_segment_bar
node_todo_content -->|"uses"| node_todo_controls
node_todo_content -->|"reads and updates"| node_todo_storage
node_notes_content -->|"reads"| node_notes_storage
node_note_editor -->|"uses"| node_note_controls
node_note_editor -->|"edits and saves"| node_notes_storage
node_preferences -->|"opens"| node_theme_screen
node_theme_screen -->|"changes theme via"| node_use_theme
node_android_bootstrap -.->|"launches JS app"| node_index
node_ios_bootstrap -.->|"launches JS app"| node_index

click node_index "https://github.com/kichipoe/okadot/blob/main/index.js"
click node_app_root "https://github.com/kichipoe/okadot/blob/main/App.jsx"
click node_theme_provider "https://github.com/kichipoe/okadot/blob/main/src/theme/ThemeProvider.jsx"
click node_theme_definitions "https://github.com/kichipoe/okadot/blob/main/src/theme/themes.js"
click node_use_theme "https://github.com/kichipoe/okadot/blob/main/src/hooks/useTheme.js"
click node_navigator "https://github.com/kichipoe/okadot/blob/main/src/navigation/RootNavigator.jsx"
click node_screen_exports "https://github.com/kichipoe/okadot/blob/main/src/screens/index.js"
click node_todo_content "https://github.com/kichipoe/okadot/blob/main/src/screens/Home/TodoContent.jsx"
click node_notes_content "https://github.com/kichipoe/okadot/blob/main/src/screens/Home/NotesContent.jsx"
click node_segment_bar "https://github.com/kichipoe/okadot/blob/main/src/components/molecules/BottomSegmentBar.jsx"
click node_note_editor "https://github.com/kichipoe/okadot/blob/main/src/screens/Notes/NoteEditorScreen.jsx"
click node_note_controls "https://github.com/kichipoe/okadot/blob/main/src/components/atoms/notes/NoteItem.jsx"
click node_todo_controls "https://github.com/kichipoe/okadot/blob/main/src/components/atoms/todo/TodoInput.jsx"
click node_preferences "https://github.com/kichipoe/okadot/blob/main/src/screens/PreferenceScreen.jsx"
click node_theme_screen "https://github.com/kichipoe/okadot/blob/main/src/screens/Preference/ThemeScreen.jsx"
click node_todo_storage "https://github.com/kichipoe/okadot/blob/main/src/storage/todoStorage.js"
click node_notes_storage "https://github.com/kichipoe/okadot/blob/main/src/storage/notesStorage.js"
click node_theme_storage "https://github.com/kichipoe/okadot/blob/main/src/storage/themeStorage.js"
click node_android_bootstrap "https://github.com/kichipoe/okadot/blob/main/android/app/src/main/java/com/kishanpujari/okadot/MainActivity.kt"
click node_ios_bootstrap "https://github.com/kichipoe/okadot/blob/main/ios/OkaDot/AppDelegate.swift"

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_index,node_app_root,node_theme_provider,node_theme_definitions,node_use_theme,node_navigator,node_screen_exports,node_home,node_todo_content,node_notes_content,node_segment_bar,node_note_editor,node_note_controls,node_todo_controls,node_preferences,node_theme_screen toneBlue
class node_todo_storage,node_notes_storage,node_theme_storage toneAmber
class node_android_bootstrap toneMint
class node_ios_bootstrap toneRose
```

## Components

### React Native app

- [JavaScript entry](https://github.com/kichipoe/okadot/blob/main/index.js): entry point · `index.js`
- [App composition](https://github.com/kichipoe/okadot/blob/main/App.jsx): root component · Composes app-wide providers and navigation. · `App.jsx`
- [Theme provider](https://github.com/kichipoe/okadot/blob/main/src/theme/ThemeProvider.jsx): state provider · Owns application theme state. · `src/theme/ThemeProvider.jsx`
- [Theme definitions](https://github.com/kichipoe/okadot/blob/main/src/theme/themes.js): theme data · `src/theme/themes.js`
- [Theme hook](https://github.com/kichipoe/okadot/blob/main/src/hooks/useTheme.js): consumer API · `src/hooks/useTheme.js`
- [Root navigator](https://github.com/kichipoe/okadot/blob/main/src/navigation/RootNavigator.jsx): navigation · Routes home, editor, and preferences flows. · `src/navigation/RootNavigator.jsx`
- [Screen exports](https://github.com/kichipoe/okadot/blob/main/src/screens/index.js): screen registry · `src/screens/index.js`
- **Home workspace**: screen · Primary segmented todo and notes workspace.
- [Todo content](https://github.com/kichipoe/okadot/blob/main/src/screens/Home/TodoContent.jsx): screen content · `src/screens/Home/TodoContent.jsx`
- [Notes content](https://github.com/kichipoe/okadot/blob/main/src/screens/Home/NotesContent.jsx): screen content · `src/screens/Home/NotesContent.jsx`
- [Bottom segment bar](https://github.com/kichipoe/okadot/blob/main/src/components/molecules/BottomSegmentBar.jsx): shared UI · `src/components/molecules/BottomSegmentBar.jsx`
- [Note editor](https://github.com/kichipoe/okadot/blob/main/src/screens/Notes/NoteEditorScreen.jsx): screen · `src/screens/Notes/NoteEditorScreen.jsx`
- [Note controls](https://github.com/kichipoe/okadot/blob/main/src/components/atoms/notes/NoteItem.jsx): editing UI · Note item and tag editing controls. · `src/components/atoms/notes/NoteItem.jsx`
- [Todo controls](https://github.com/kichipoe/okadot/blob/main/src/components/atoms/todo/TodoInput.jsx): editing UI · Todo input and item interaction controls. · `src/components/atoms/todo/TodoInput.jsx`
- [Preferences](https://github.com/kichipoe/okadot/blob/main/src/screens/PreferenceScreen.jsx): screen · Hosts theme and about preferences. · `src/screens/PreferenceScreen.jsx`
- [Theme preferences](https://github.com/kichipoe/okadot/blob/main/src/screens/Preference/ThemeScreen.jsx): screen · `src/screens/Preference/ThemeScreen.jsx`

### Local persistence

- [Todo storage](https://github.com/kichipoe/okadot/blob/main/src/storage/todoStorage.js): local storage · `src/storage/todoStorage.js`
- [Notes storage](https://github.com/kichipoe/okadot/blob/main/src/storage/notesStorage.js): local storage · `src/storage/notesStorage.js`
- [Theme storage](https://github.com/kichipoe/okadot/blob/main/src/storage/themeStorage.js): local storage · `src/storage/themeStorage.js`

### Android shell

- [Android bootstrap](https://github.com/kichipoe/okadot/blob/main/android/app/src/main/java/com/kishanpujari/okadot/MainActivity.kt): Kotlin activity · `android/app/src/main/java/com/kishanpujari/okadot/MainActivity.kt`

### iOS shell

- [iOS bootstrap](https://github.com/kichipoe/okadot/blob/main/ios/OkaDot/AppDelegate.swift): Swift delegate · `ios/OkaDot/AppDelegate.swift`

## Connections

- JavaScript entry → App composition: renders
- App composition → Theme provider: wraps with
- App composition → Root navigator: hosts
- Theme provider → Theme definitions: uses
- Theme provider → Theme storage: persists
- Theme hook → Theme provider: consumes
- Root navigator → Screen exports: resolves screens
- Root navigator → Home workspace: routes to
- Root navigator → Note editor: routes to
- Root navigator → Preferences: routes to
- Home workspace → Todo content: coordinates
- Home workspace → Notes content: coordinates
- Home workspace → Bottom segment bar: uses
- Todo content → Todo controls: uses
- Todo content → Todo storage: reads and updates
- Notes content → Notes storage: reads
- Note editor → Note controls: uses
- Note editor → Notes storage: edits and saves
- Preferences → Theme preferences: opens
- Theme preferences → Theme hook: changes theme via
- Android bootstrap → JavaScript entry: launches JS app
- iOS bootstrap → JavaScript entry: launches JS app