# charusathwik06/react-mini-projects architecture

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

- Interactive diagram: https://gitdiagram.com/charusathwik06/react-mini-projects
- Repository: https://github.com/charusathwik06/react-mini-projects

## Overview

This is a small React component-demo app, with a to-do list as the only feature mounted by the runtime entry point. Users can add, clear, delete, and reorder tasks; the list and input are held in component state. Other source files contain standalone examples, but the sampled App does not render them. The README describes a generic React/Vite template, not additional product features.

Main entry points: [`src/Todo.jsx`](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Todo.jsx) (To-do list), [`src/App.jsx`](https://github.com/charusathwik06/react-mini-projects/blob/main/src/App.jsx) (App selector), [`src/main.jsx`](https://github.com/charusathwik06/react-mini-projects/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Active app"]
  node_main["React entry<br/>[main.jsx]"]
  node_app["App selector<br/>[App.jsx]"]
  node_todo["To-do list<br/>[Todo.jsx]"]
end

subgraph group_examples["Standalone examples"]
  node_calculator["Calculator demo<br/>[Calculator.jsx]"]
  node_counter["Counter demo<br/>[Counter.jsx]"]
  node_card["Profile card<br/>[Card.jsx]"]
  node_header["Header demo<br/>[Header.jsx]"]
  node_student["Student display<br/>[Student.jsx]"]
  node_update["Update demo<br/>[Update.jsx]"]
end

node_user(("User"))

node_main -->|"renders"| node_app
node_app -->|"renders"| node_todo
node_user -->|"edits tasks"| node_todo
node_todo -->|"shows list"| node_user

click node_main "https://github.com/charusathwik06/react-mini-projects/blob/main/src/main.jsx"
click node_app "https://github.com/charusathwik06/react-mini-projects/blob/main/src/App.jsx"
click node_todo "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Todo.jsx"
click node_calculator "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Calculator.jsx"
click node_counter "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Counter.jsx"
click node_card "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Card.jsx"
click node_header "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Header.jsx"
click node_student "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Student.jsx"
click node_update "https://github.com/charusathwik06/react-mini-projects/blob/main/src/Update.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_main,node_app,node_todo,node_user toneBlue
class node_calculator,node_counter,node_card,node_header,node_student,node_update toneAmber
```

## Components

### Active app

- [React entry](https://github.com/charusathwik06/react-mini-projects/blob/main/src/main.jsx): `src/main.jsx`
- [App selector](https://github.com/charusathwik06/react-mini-projects/blob/main/src/App.jsx): `src/App.jsx`
- [To-do list](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Todo.jsx): `src/Todo.jsx`

### Standalone examples

- [Calculator demo](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Calculator.jsx): `src/Calculator.jsx`
- [Counter demo](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Counter.jsx): `src/Counter.jsx`
- [Profile card](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Card.jsx): `src/Card.jsx`
- [Header demo](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Header.jsx): `src/Header.jsx`
- [Student display](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Student.jsx): `src/Student.jsx`
- [Update demo](https://github.com/charusathwik06/react-mini-projects/blob/main/src/Update.jsx): `src/Update.jsx`

### Other components

- **User**

## Connections

- React entry → App selector: renders
- App selector → To-do list: renders
- User → To-do list: edits tasks
- To-do list → User: shows list