# xygritte/assigment-asah architecture

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

- Interactive diagram: https://gitdiagram.com/xygritte/assigment-asah
- Repository: https://github.com/xygritte/assigment-asah

## Overview

This is a small React personal-notes app. Its main workflow is to load sample notes, let a user enter or search notes, and have App manage note state and derive active and archived lists. The source includes add, delete, archive, and search state logic, but several UI paths remain unfinished: NotesList always reports empty, NoteItem displays placeholders and does not invoke its actions, and so the note-list and delete/archive interactions are not wired through. The README is empty; the graph reflects only the supplied tree and source excerpts.

Main entry points: [`src/components/App.jsx`](https://github.com/xygritte/assigment-asah/blob/main/src/components/App.jsx) (App state), [`src/components/NoteInput.jsx`](https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteInput.jsx) (Note input), [`src/components/NoteSearch.jsx`](https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteSearch.jsx) (Note search), [`src/index.jsx`](https://github.com/xygritte/assigment-asah/blob/main/src/index.jsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_entrypoint["React mount<br/>[index.jsx]"]
end

subgraph group_interface["Notes interface"]
  node_input["Note input<br/>[NoteInput.jsx]"]
  node_search["Note search<br/>[NoteSearch.jsx]"]
  node_list["Notes list<br/>[NotesList.jsx]"]
  node_item["Note item<br/>[NoteItem.jsx]"]
end

subgraph group_logic["App logic"]
  node_app["App state<br/>[App.jsx]"]
end

subgraph group_data["Initial data"]
  node_initial["Sample notes<br/>[index.js]"]
end

node_user(("User"))
node_browser["Browser root"]

node_browser -->|"mounts app"| node_entrypoint
node_entrypoint -->|"renders"| node_app
node_app -->|"loads samples"| node_initial
node_app -->|"renders"| node_input
node_app -->|"renders"| node_search
node_app -->|"renders lists"| node_list
node_input -->|"submits note"| node_app
node_search -->|"sends keyword"| node_app
node_user -->|"enters note"| node_input
node_user -->|"enters query"| node_search

click node_entrypoint "https://github.com/xygritte/assigment-asah/blob/main/src/index.jsx"
click node_app "https://github.com/xygritte/assigment-asah/blob/main/src/components/App.jsx"
click node_initial "https://github.com/xygritte/assigment-asah/blob/main/src/utils/index.js"
click node_input "https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteInput.jsx"
click node_search "https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteSearch.jsx"
click node_list "https://github.com/xygritte/assigment-asah/blob/main/src/components/NotesList.jsx"
click node_item "https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteItem.jsx"

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_entrypoint,node_user,node_browser toneBlue
class node_input,node_search,node_list,node_item toneAmber
class node_app toneMint
class node_initial toneRose
```

## Components

### App entry

- [React mount](https://github.com/xygritte/assigment-asah/blob/main/src/index.jsx): `src/index.jsx`

### Notes interface

- [Note input](https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteInput.jsx): `src/components/NoteInput.jsx`
- [Note search](https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteSearch.jsx): `src/components/NoteSearch.jsx`
- [Notes list](https://github.com/xygritte/assigment-asah/blob/main/src/components/NotesList.jsx): `src/components/NotesList.jsx`
- [Note item](https://github.com/xygritte/assigment-asah/blob/main/src/components/NoteItem.jsx): `src/components/NoteItem.jsx`

### App logic

- [App state](https://github.com/xygritte/assigment-asah/blob/main/src/components/App.jsx): `src/components/App.jsx`

### Initial data

- [Sample notes](https://github.com/xygritte/assigment-asah/blob/main/src/utils/index.js): `src/utils/index.js`

### Other components

- **User**
- **Browser root**

## Connections

- Browser root → React mount: mounts app
- React mount → App state: renders
- App state → Sample notes: loads samples
- App state → Note input: renders
- App state → Note search: renders
- App state → Notes list: renders lists
- Note input → App state: submits note
- Note search → App state: sends keyword
- User → Note input: enters note
- User → Note search: enters query