# coding-camp-2025/web-notes-app architecture

> Architecture diagram of the GitHub repository coding-camp-2025/web-notes-app, 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/coding-camp-2025/web-notes-app
- Repository: https://github.com/coding-camp-2025/web-notes-app

## Overview

This repository contains two stages of a web notes app. Project 2 is the API-backed workflow: users submit validated notes or act on rendered note cards; the controller performs asynchronous REST requests, refreshes the list, and manages a loading indicator. Project 1 is the earlier local-data version, persisting notes in localStorage. The README documents reusable responsive components and validation; sampled source supports the core flows, but project 2’s HTML and styling were not sampled, so their detailed DOM wiring is not mapped.

Main entry points: [`notes-app project 2/src/js/main.js`](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js) (App controller), [`notes-app project 1/src/js/index.js`](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/index.js) (Local app entry), [`notes-app project 2/src/js/component/note-items.js`](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-items.js) (Note card), [`notes-app project 2/src/js/component/note-list.js`](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-list.js) (Note list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api_app["API-backed app"]
  node_controller["App controller<br/>[main.js]"]
  node_validation["Form validation<br/>[main.js]"]
  node_loader["Loading indicator<br/>[main.js]"]
end

subgraph group_ui["Reusable interface"]
  node_note_list["Note list<br/>[note-list.js]"]
  node_note_item["Note card<br/>[note-items.js]"]
  node_header["App header<br/>[app-header.js]"]
  node_footer["App footer<br/>[app-footer.js]"]
  node_styles["Responsive styling<br/>[style.css]"]
end

subgraph group_local_app["Local app"]
  node_local_entry["Local app entry<br/>[index.js]"]
  node_sample_data["Sample notes<br/>[sample-notes.js]"]
  node_local_storage[("Browser localStorage")]
  node_local_list["Local note list<br/>[note-list.js]"]
  node_local_item["Local note card<br/>[note-items.js]"]
end

subgraph group_services["External services"]
  node_notes_api{{"Notes REST API"}}
  node_api_store[("Notes database")]
end

node_user(("User"))

node_user -->|"submits or toggles"| node_controller
node_controller -->|"validates input"| node_validation
node_controller -->|"shows and hides"| node_loader
node_controller -->|"fetches and mutates"| node_notes_api
node_notes_api -->|"reads and writes"| node_api_store
node_controller -->|"sets notes"| node_note_list
node_note_list -->|"renders cards"| node_note_item
node_note_item -->|"invokes note actions"| node_controller
node_user -->|"acts on card"| node_note_item
node_user -->|"uses local app"| node_local_entry
node_local_entry -->|"loads and adds"| node_sample_data
node_local_entry -->|"reads and writes"| node_local_storage
node_local_entry -->|"supplies notes"| node_local_list
node_local_list -->|"renders cards"| node_local_item
node_user -->|"views interface"| node_header
node_user -->|"views interface"| node_footer
node_user -->|"uses styled layout"| node_styles

click node_controller "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js"
click node_validation "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js"
click node_loader "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js"
click node_note_list "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-list.js"
click node_note_item "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-items.js"
click node_header "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/app-header.js"
click node_footer "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/app-footer.js"
click node_styles "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/css/style.css"
click node_local_entry "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/index.js"
click node_sample_data "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/data/sample-notes.js"
click node_local_list "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/component/note-list.js"
click node_local_item "https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/component/note-items.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_controller,node_validation,node_loader,node_user toneBlue
class node_note_list,node_note_item,node_header,node_footer,node_styles toneAmber
class node_local_entry,node_sample_data,node_local_storage,node_local_list,node_local_item toneMint
class node_notes_api,node_api_store toneRose
```

## Components

### API-backed app

- [App controller](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js): `notes-app project 2/src/js/main.js`
- [Form validation](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js): `notes-app project 2/src/js/main.js`
- [Loading indicator](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/main.js): `notes-app project 2/src/js/main.js`

### Reusable interface

- [Note list](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-list.js): `notes-app project 2/src/js/component/note-list.js`
- [Note card](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/note-items.js): `notes-app project 2/src/js/component/note-items.js`
- [App header](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/app-header.js): `notes-app project 2/src/js/component/app-header.js`
- [App footer](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/js/component/app-footer.js): `notes-app project 2/src/js/component/app-footer.js`
- [Responsive styling](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%202/src/css/style.css): `notes-app project 2/src/css/style.css`

### Local app

- [Local app entry](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/index.js): `notes-app project 1/src/js/index.js`
- [Sample notes](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/data/sample-notes.js): `notes-app project 1/src/js/data/sample-notes.js`
- **Browser localStorage**
- [Local note list](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/component/note-list.js): `notes-app project 1/src/js/component/note-list.js`
- [Local note card](https://github.com/coding-camp-2025/web-notes-app/blob/main/notes-app%20project%201/src/js/component/note-items.js): `notes-app project 1/src/js/component/note-items.js`

### External services

- **Notes REST API**
- **Notes database**

### Other components

- **User**

## Connections

- User → App controller: submits or toggles
- App controller → Form validation: validates input
- App controller → Loading indicator: shows and hides
- App controller → Notes REST API: fetches and mutates
- Notes REST API → Notes database: reads and writes
- App controller → Note list: sets notes
- Note list → Note card: renders cards
- Note card → App controller: invokes note actions
- User → Note card: acts on card
- User → Local app entry: uses local app
- Local app entry → Sample notes: loads and adds
- Local app entry → Browser localStorage: reads and writes
- Local app entry → Local note list: supplies notes
- Local note list → Local note card: renders cards
- User → App header: views interface
- User → App footer: views interface
- User → Responsive styling: uses styled layout