# karlo-o/fullstackopen_course architecture

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

- Interactive diagram: https://gitdiagram.com/karlo-o/fullstackopen_course
- Repository: https://github.com/karlo-o/fullstackopen_course

## Overview

This repository is a set of Full Stack Open course exercises, not one integrated application. The principal workflows are small React pages: render course data, navigate and vote on anecdotes, or filter and add phonebook entries. Later phonebook work also loads people and notes from local HTTP endpoints. The graph separates these exercise stages; it does not imply they share runtime state. Relationships are limited to entry-point calls, sampled component use, and HTTP requests visible in the excerpts.

Main entry points: [`part2/part2c/src/App.jsx`](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/App.jsx) (HTTP phonebook), [`part1/part1a/src/main.jsx`](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1a/src/main.jsx) (Part 1A entry), [`part1/part1b/src/main.jsx`](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1b/src/main.jsx) (Part 1B entry), [`part2/part2a/src/main.jsx`](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/main.jsx) (Part 2A entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_course["Course exercises"]
  node_part1a_entry["Part 1A entry<br/>[main.jsx]"]
  node_part1a_app["Part 1A course view<br/>[App.jsx]"]
  node_part1b_entry["Part 1B entry<br/>[main.jsx]"]
  node_part1b_app["Part 1B course view<br/>[App.jsx]"]
  node_part2a_entry["Part 2A entry<br/>[main.jsx]"]
  node_part2a_app["Part 2A curriculum<br/>[App.jsx]"]
  node_course_component["Course renderer<br/>[Course.jsx]"]
end

subgraph group_anecdotes["Anecdote exercise"]
  node_part1d_entry["Part 1D entry<br/>[main.jsx]"]
  node_anecdote_app["Anecdote voting<br/>[App.jsx]"]
end

subgraph group_phonebook["Phonebook exercises"]
  node_part2b_entry["Part 2B entry<br/>[main.jsx]"]
  node_part2b_app["Local phonebook<br/>[App.jsx]"]
  node_part2c_entry["Part 2C entry<br/>[main.jsx]"]
  node_part2c_app["HTTP phonebook<br/>[App.jsx]"]
  node_note_component["Note renderer<br/>[Note.jsx]"]
end

node_browser(("Browser user"))
node_notes_api{{"Notes endpoint"}}
node_persons_api{{"Persons endpoint"}}

node_browser -->|"opens"| node_part1a_entry
node_part1a_entry -->|"renders"| node_part1a_app
node_browser -->|"opens"| node_part1b_entry
node_part1b_entry -->|"renders"| node_part1b_app
node_browser -->|"opens"| node_part2a_entry
node_part2a_entry -->|"renders"| node_part2a_app
node_part2a_app -->|"renders"| node_course_component
node_browser -->|"opens"| node_part1d_entry
node_part1d_entry -->|"renders"| node_anecdote_app
node_browser -->|"opens"| node_part2b_entry
node_part2b_entry -->|"renders"| node_part2b_app
node_browser -->|"opens"| node_part2c_entry
node_part2c_entry -->|"renders"| node_part2c_app
node_part2c_app -->|"renders"| node_note_component
node_part2c_app -->|"GET notes"| node_notes_api
node_part2c_app -->|"GET persons"| node_persons_api

click node_part1a_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1a/src/main.jsx"
click node_part1a_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1a/src/App.jsx"
click node_part1b_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1b/src/main.jsx"
click node_part1b_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1b/src/App.jsx"
click node_part2a_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/main.jsx"
click node_part2a_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/App.jsx"
click node_course_component "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/components/Course.jsx"
click node_part1d_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1d/src/main.jsx"
click node_anecdote_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1d/src/App.jsx"
click node_part2b_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2b/src/main.jsx"
click node_part2b_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2b/src/App.jsx"
click node_part2c_entry "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/main.jsx"
click node_part2c_app "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/App.jsx"
click node_note_component "https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/components/Note.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_part1a_entry,node_part1a_app,node_part1b_entry,node_part1b_app,node_part2a_entry,node_part2a_app,node_course_component,node_browser toneBlue
class node_part1d_entry,node_anecdote_app toneAmber
class node_part2b_entry,node_part2b_app,node_part2c_entry,node_part2c_app,node_note_component toneMint
class node_notes_api,node_persons_api toneIndigo
```

## Components

### Course exercises

- [Part 1A entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1a/src/main.jsx): `part1/part1a/src/main.jsx`
- [Part 1A course view](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1a/src/App.jsx): `part1/part1a/src/App.jsx`
- [Part 1B entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1b/src/main.jsx): `part1/part1b/src/main.jsx`
- [Part 1B course view](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1b/src/App.jsx): `part1/part1b/src/App.jsx`
- [Part 2A entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/main.jsx): `part2/part2a/src/main.jsx`
- [Part 2A curriculum](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/App.jsx): `part2/part2a/src/App.jsx`
- [Course renderer](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2a/src/components/Course.jsx): `part2/part2a/src/components/Course.jsx`

### Anecdote exercise

- [Part 1D entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1d/src/main.jsx): `part1/part1d/src/main.jsx`
- [Anecdote voting](https://github.com/karlo-o/fullstackopen_course/blob/main/part1/part1d/src/App.jsx): `part1/part1d/src/App.jsx`

### Phonebook exercises

- [Part 2B entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2b/src/main.jsx): `part2/part2b/src/main.jsx`
- [Local phonebook](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2b/src/App.jsx): `part2/part2b/src/App.jsx`
- [Part 2C entry](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/main.jsx): `part2/part2c/src/main.jsx`
- [HTTP phonebook](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/App.jsx): `part2/part2c/src/App.jsx`
- [Note renderer](https://github.com/karlo-o/fullstackopen_course/blob/main/part2/part2c/src/components/Note.jsx): `part2/part2c/src/components/Note.jsx`

### Other components

- **Browser user**
- **Notes endpoint**
- **Persons endpoint**

## Connections

- Browser user → Part 1A entry: opens (evidence: `part1/part1a/src/main.jsx`)
- Part 1A entry → Part 1A course view: renders (evidence: `part1/part1a/src/main.jsx`)
- Browser user → Part 1B entry: opens (evidence: `part1/part1b/src/main.jsx`)
- Part 1B entry → Part 1B course view: renders (evidence: `part1/part1b/src/main.jsx`)
- Browser user → Part 2A entry: opens (evidence: `part2/part2a/src/main.jsx`)
- Part 2A entry → Part 2A curriculum: renders (evidence: `part2/part2a/src/main.jsx`)
- Part 2A curriculum → Course renderer: renders (evidence: `part2/part2a/src/App.jsx`)
- Browser user → Part 1D entry: opens (evidence: `part1/part1d/src/main.jsx`)
- Part 1D entry → Anecdote voting: renders (evidence: `part1/part1d/src/main.jsx`)
- Browser user → Part 2B entry: opens (evidence: `part2/part2b/src/main.jsx`)
- Part 2B entry → Local phonebook: renders (evidence: `part2/part2b/src/main.jsx`)
- Browser user → Part 2C entry: opens (evidence: `part2/part2c/src/main.jsx`)
- Part 2C entry → HTTP phonebook: renders (evidence: `part2/part2c/src/main.jsx`)
- HTTP phonebook → Note renderer: renders (evidence: `part2/part2c/src/App.jsx`)
- HTTP phonebook → Notes endpoint: GET notes (evidence: `part2/part2c/src/App.jsx`)
- HTTP phonebook → Persons endpoint: GET persons (evidence: `part2/part2c/src/App.jsx`)