# harsha12a/taskscheduler architecture

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

- Interactive diagram: https://gitdiagram.com/harsha12a/taskscheduler
- Repository: https://github.com/harsha12a/taskscheduler

## Overview

This is a small, client-side task tracker. A user opens the add form, enters a task name and description, and submits it to the task list; each task can then be edited or deleted. App owns the task array and passes it to the form and list components, which call its state setters for changes. The README describes only a generic React/Vite template, so no additional product capabilities or persistence are documented. The graph reflects the sampled runtime source; task data is held in React state, not an external store.

Main entry points: [`src/App.jsx`](https://github.com/harsha12a/taskscheduler/blob/master/src/App.jsx) (App and Task State), [`src/components/Block/Block.jsx`](https://github.com/harsha12a/taskscheduler/blob/master/src/components/Block/Block.jsx) (Task Item), [`src/components/newFile/NewFile.jsx`](https://github.com/harsha12a/taskscheduler/blob/master/src/components/newFile/NewFile.jsx) (Create Task Form), [`src/components/EditFile/EditFile.jsx`](https://github.com/harsha12a/taskscheduler/blob/master/src/components/EditFile/EditFile.jsx) (Edit Task Form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_appstate["App and Task State<br/>[App.jsx]"]
  node_header["Task Header<br/>[Header.jsx]"]
end

subgraph group_tasks["Task List"]
  node_body["Task List Renderer<br/>[Body.jsx]"]
  node_block["Task Item<br/>[Block.jsx]"]
end

subgraph group_forms["Task Forms"]
  node_newform["Create Task Form<br/>[NewFile.jsx]"]
  node_editform["Edit Task Form<br/>[EditFile.jsx]"]
end

node_user(("User"))

node_entry -->|"renders"| node_appstate
node_user -->|"uses"| node_appstate
node_appstate -->|"renders"| node_header
node_appstate -->|"renders when open"| node_newform
node_appstate -->|"renders with tasks"| node_body
node_user -->|"submits task"| node_newform
node_newform -->|"updates task state"| node_appstate
node_body -->|"renders each task"| node_block
node_user -->|"selects task action"| node_block
node_block -->|"renders when editing"| node_editform
node_user -->|"submits changes"| node_editform
node_editform -->|"updates task state"| node_appstate
node_block -->|"deletes task"| node_appstate

click node_entry "https://github.com/harsha12a/taskscheduler/blob/master/src/main.jsx"
click node_appstate "https://github.com/harsha12a/taskscheduler/blob/master/src/App.jsx"
click node_header "https://github.com/harsha12a/taskscheduler/blob/master/src/components/header/Header.jsx"
click node_newform "https://github.com/harsha12a/taskscheduler/blob/master/src/components/newFile/NewFile.jsx"
click node_body "https://github.com/harsha12a/taskscheduler/blob/master/src/components/Body/Body.jsx"
click node_block "https://github.com/harsha12a/taskscheduler/blob/master/src/components/Block/Block.jsx"
click node_editform "https://github.com/harsha12a/taskscheduler/blob/master/src/components/EditFile/EditFile.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_entry,node_appstate,node_header,node_user toneBlue
class node_body,node_block toneAmber
class node_newform,node_editform toneMint
```

## Components

### Application

- [React Entry](https://github.com/harsha12a/taskscheduler/blob/master/src/main.jsx): `src/main.jsx`
- [App and Task State](https://github.com/harsha12a/taskscheduler/blob/master/src/App.jsx): `src/App.jsx`
- [Task Header](https://github.com/harsha12a/taskscheduler/blob/master/src/components/header/Header.jsx): `src/components/header/Header.jsx`

### Task List

- [Task List Renderer](https://github.com/harsha12a/taskscheduler/blob/master/src/components/Body/Body.jsx): `src/components/Body/Body.jsx`
- [Task Item](https://github.com/harsha12a/taskscheduler/blob/master/src/components/Block/Block.jsx): `src/components/Block/Block.jsx`

### Task Forms

- [Create Task Form](https://github.com/harsha12a/taskscheduler/blob/master/src/components/newFile/NewFile.jsx): `src/components/newFile/NewFile.jsx`
- [Edit Task Form](https://github.com/harsha12a/taskscheduler/blob/master/src/components/EditFile/EditFile.jsx): `src/components/EditFile/EditFile.jsx`

### Other components

- **User**

## Connections

- React Entry → App and Task State: renders
- User → App and Task State: uses
- App and Task State → Task Header: renders
- App and Task State → Create Task Form: renders when open
- App and Task State → Task List Renderer: renders with tasks
- User → Create Task Form: submits task
- Create Task Form → App and Task State: updates task state
- Task List Renderer → Task Item: renders each task
- User → Task Item: selects task action
- Task Item → Edit Task Form: renders when editing
- User → Edit Task Form: submits changes
- Edit Task Form → App and Task State: updates task state
- Task Item → App and Task State: deletes task