# vatsalyar/reactutor architecture

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

- Interactive diagram: https://gitdiagram.com/vatsalyar/reactutor
- Repository: https://github.com/vatsalyar/reactutor

## Overview

1. **Overall shape**
   - This is a **client-side React single-page application** for learning React through guided tasks.
   - The repo does **not** contain a custom backend service; the runtime architecture is primarily frontend UI + third-party services.

2. **Application bootstrap**
   - `src/main.tsx` is the entry point that mounts the app into `index.html`.
   - `src/App.tsx` is the top-level composition layer and likely owns the main app state, task progression, and cross-component coordination.

3. **Main user flow**
   - The app centers on a tutorial/task experience rather than a generic multi-page site.
   - `src/Pages/Task.tsx` appears to be the main screen where a learner works through a coding exercise and moves through tutorial steps.

4. **Tutorial orchestration**
   - `src/Components/TutorialSteps.tsx` represents the instructional side of the product.
   - It likely renders the step list, current step state, and progression UI, feeding the learner from one lesson state to the next.

5. **Coding workspace**
   - `src/Components/Editor.tsx` is the core interactive subsystem.
   - The README indicates it integrates **Monaco** and **Sandpack**, so this component is the boundary where user-authored code is edited and executed/previewed in-browser.

6. **Feedback loop**
   - `src/Components/FeedbackModal.tsx` is the learner feedback surface.
   - It likely receives evaluation results from the exercise workflow and presents AI-assisted or validation feedback back to the user.

7. **Persistence / external service boundary**
   - `firebaseConfig.ts` isolates Firebase setup from the rest of the app.
   - This suggests the app persists progress or tutorial state through Firebase rather than a custom API layer in this repository.

8. **Styling and presentation**
   - `src/index.css`, `src/App.css`, and the assets under `src/assets` define the visual layer.
   - The README emphasizes a dark-mode responsive UI, so styling is part of the app shell rather than a separate design system package.

9. **Client runtime and build tooling**
   - The project uses **React + TypeScript** with **Vite** for local development and production bundling.
   - `eslint.config.js` and the TypeScript config files indicate static quality checks are part of the development boundary, not runtime architecture.

10. **Deployment/runtime packaging**
   - `Dockerfile` and `nginx.conf` show the app is built into static assets and served by **NGINX** in a container.
   - That means production deployment is: source code → Vite build → static files → NGINX container.

11. **App boundary to diagram**
   - The key architecture boundary is between the **browser-based React UI** and external services like **Firebase** and any AI/validation logic implied by the feedback modal.
   - Everything else in the repo supports that frontend experience: routing/state orchestration, editor execution, tutorial content, and deployment packaging.

12. **What to draw as major subsystems**
   - **Bootstrap/App shell**
   - **Tutorial/task flow**
   - **Code editor + live execution**
   - **Feedback modal**
   - **Firebase persistence**
   - **Static build/deploy via Vite + Docker + NGINX**

Main entry points: [`src/App.tsx`](https://github.com/vatsalyar/reactutor/blob/main/src/App.tsx) (App), [`src/Pages/Task.tsx`](https://github.com/vatsalyar/reactutor/blob/main/src/Pages/Task.tsx) (Task page), [`src/main.tsx`](https://github.com/vatsalyar/reactutor/blob/main/src/main.tsx) (Main), [`vite.config.ts`](https://github.com/vatsalyar/reactutor/blob/main/vite.config.ts) (Vite)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g_shell["App shell"]
  node_n_main["Main<br/>bootstrap<br/>[main.tsx]"]
  node_n_app["App<br/>composition<br/>[App.tsx]"]
  node_n_app_css["App styles<br/>[App.css]"]
  node_n_index_css["Base styles<br/>[index.css]"]
  node_n_assets["Assets"]
end

subgraph group_g_tutorial["Tutorial flow"]
  node_n_task["Task page<br/>screen<br/>[Task.tsx]"]
  node_n_steps["Tutorial steps<br/>instruction UI<br/>[TutorialSteps.tsx]"]
end

subgraph group_g_editor["Editor runtime"]
  node_n_editor["Editor<br/>code workspace<br/>[Editor.tsx]"]
end

subgraph group_g_feedback["Feedback loop"]
  node_n_feedback["Feedback<br/>results UI<br/>[FeedbackModal.tsx]"]
end

subgraph group_g_persistence["Persistence"]
  node_n_firebase[("Firebase config<br/>external service setup<br/>[firebaseConfig.ts]")]
end

subgraph group_g_deploy["Build & deploy"]
  node_n_index_html["Index page<br/>host page<br/>[index.html]"]
  node_n_vite{{"Vite<br/>build tool<br/>[vite.config.ts]"}}
  node_n_docker["Docker<br/>container build"]
  node_n_nginx[("NGINX<br/>static server<br/>[nginx.conf]")]
  node_n_pkg["Package manifest<br/>project metadata<br/>[package.json]"]
end

node_n_main -->|"bootstraps"| node_n_app
node_n_app -->|"renders"| node_n_task
node_n_task -->|"guides"| node_n_steps
node_n_task -->|"hosts"| node_n_editor
node_n_task -->|"shows"| node_n_feedback
node_n_editor -->|"emits results"| node_n_feedback
node_n_steps -->|"advances work"| node_n_editor
node_n_app -->|"persists"| node_n_firebase
node_n_feedback -->|"syncs state"| node_n_firebase
node_n_app -->|"styles"| node_n_app_css
node_n_app -->|"styles"| node_n_index_css
node_n_app -->|"uses"| node_n_assets
node_n_main -->|"mounts into"| node_n_index_html
node_n_vite -->|"bundles"| node_n_main
node_n_vite -->|"driven by"| node_n_pkg
node_n_docker -->|"builds with"| node_n_vite
node_n_docker -->|"serves via"| node_n_nginx
node_n_nginx -->|"hosts"| node_n_index_html

click node_n_main "https://github.com/vatsalyar/reactutor/blob/main/src/main.tsx"
click node_n_app "https://github.com/vatsalyar/reactutor/blob/main/src/App.tsx"
click node_n_app_css "https://github.com/vatsalyar/reactutor/blob/main/src/App.css"
click node_n_index_css "https://github.com/vatsalyar/reactutor/blob/main/src/index.css"
click node_n_task "https://github.com/vatsalyar/reactutor/blob/main/src/Pages/Task.tsx"
click node_n_steps "https://github.com/vatsalyar/reactutor/blob/main/src/Components/TutorialSteps.tsx"
click node_n_editor "https://github.com/vatsalyar/reactutor/blob/main/src/Components/Editor.tsx"
click node_n_feedback "https://github.com/vatsalyar/reactutor/blob/main/src/Components/FeedbackModal.tsx"
click node_n_firebase "https://github.com/vatsalyar/reactutor/blob/main/firebaseConfig.ts"
click node_n_assets "https://github.com/vatsalyar/reactutor/tree/main/src/assets"
click node_n_index_html "https://github.com/vatsalyar/reactutor/blob/main/index.html"
click node_n_vite "https://github.com/vatsalyar/reactutor/blob/main/vite.config.ts"
click node_n_docker "https://github.com/vatsalyar/reactutor/tree/main/Dockerfile"
click node_n_nginx "https://github.com/vatsalyar/reactutor/blob/main/nginx.conf"
click node_n_pkg "https://github.com/vatsalyar/reactutor/blob/main/package.json"

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_n_main,node_n_app,node_n_app_css,node_n_index_css,node_n_assets toneBlue
class node_n_task,node_n_steps toneAmber
class node_n_editor toneMint
class node_n_feedback toneRose
class node_n_firebase toneIndigo
class node_n_index_html,node_n_vite,node_n_docker,node_n_nginx,node_n_pkg toneTeal
```

## Components

### App shell

Browser entrypoint, top-level composition, and shared styling.

- [Main](https://github.com/vatsalyar/reactutor/blob/main/src/main.tsx): bootstrap · Mounts the React app into the page. · `src/main.tsx`
- [App](https://github.com/vatsalyar/reactutor/blob/main/src/App.tsx): composition · Top-level app state and coordination. · `src/App.tsx`
- [App styles](https://github.com/vatsalyar/reactutor/blob/main/src/App.css): styles · Global application styling. · `src/App.css`
- [Base styles](https://github.com/vatsalyar/reactutor/blob/main/src/index.css): styles · Global page and theme styles. · `src/index.css`
- [Assets](https://github.com/vatsalyar/reactutor/tree/main/src/assets): ui assets · Static images and media used by the interface. · `src/assets`

### Tutorial flow

Task screen and instructional progression for the learner experience.

- [Task page](https://github.com/vatsalyar/reactutor/blob/main/src/Pages/Task.tsx): screen · Primary learner workspace and task screen. · `src/Pages/Task.tsx`
- [Tutorial steps](https://github.com/vatsalyar/reactutor/blob/main/src/Components/TutorialSteps.tsx): instruction UI · Renders tutorial progression and step state. · `src/Components/TutorialSteps.tsx`

### Editor runtime

In-browser code editing and live execution boundary.

- [Editor](https://github.com/vatsalyar/reactutor/blob/main/src/Components/Editor.tsx): code workspace · Core code editing and preview surface. · `src/Components/Editor.tsx`

### Feedback loop

Result display and learner-facing evaluation feedback.

- [Feedback](https://github.com/vatsalyar/reactutor/blob/main/src/Components/FeedbackModal.tsx): results UI · Shows validation or AI-assisted feedback. · `src/Components/FeedbackModal.tsx`

### Persistence

Firebase configuration and external state storage boundary.

- [Firebase config](https://github.com/vatsalyar/reactutor/blob/main/firebaseConfig.ts): external service setup · Central Firebase initialization and configuration. · `firebaseConfig.ts`

### Build & deploy

Vite build pipeline and static serving in production.

- [Index page](https://github.com/vatsalyar/reactutor/blob/main/index.html): host page · HTML shell that receives the React app. · `index.html`
- [Vite](https://github.com/vatsalyar/reactutor/blob/main/vite.config.ts): build tool · Development server and production bundler. · `vite.config.ts`
- [Docker](https://github.com/vatsalyar/reactutor/tree/main/Dockerfile): container build · Builds the static app image for deployment. · `Dockerfile`
- [NGINX](https://github.com/vatsalyar/reactutor/blob/main/nginx.conf): static server · Serves the compiled frontend in production. · `nginx.conf`
- [Package manifest](https://github.com/vatsalyar/reactutor/blob/main/package.json): project metadata · Defines scripts and frontend dependencies. · `package.json`

## Connections

- Main → App: bootstraps · Entry point mounts the top-level app.
- App → Task page: renders · App composes the main task experience.
- Task page → Tutorial steps: guides · Task screen presents tutorial progression.
- Task page → Editor: hosts · Task screen embeds the coding workspace.
- Task page → Feedback: shows · Task screen surfaces evaluation feedback.
- Editor → Feedback: emits results · Editor/execution flow produces feedback for the learner.
- Tutorial steps → Editor: advances work · Instruction flow drives the learner into code changes.
- App → Firebase config: persists · Top-level state connects to Firebase-backed storage.
- Feedback → Firebase config: syncs state · Feedback and progress can be stored or retrieved externally.
- App → App styles: styles · App shell uses component-level styling.
- App → Base styles: styles · App shell relies on global theme styles.
- App → Assets: uses · UI composition can reference bundled assets.
- Main → Index page: mounts into · React app is attached to the host HTML document.
- Vite → Main: bundles · Vite builds the frontend entry and module graph.
- Vite → Package manifest: driven by · Build and dev scripts come from package metadata.
- Docker → Vite: builds with · Container image expects the Vite production output.
- Docker → NGINX: serves via · Production container serves static files with NGINX.
- NGINX → Index page: hosts · Static server delivers the frontend shell and assets.