How vatsalyar/reactutor works
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: App.tsx App · Task.tsx Task page · main.tsx Main · vite.config.ts Vite
Components 15
App shell
Browser entrypoint, top-level composition, and shared styling.
- Main · Mounts the React app into the page.
src/main.tsx - App · Top-level app state and coordination.
src/App.tsx - App styles · Global application styling.
src/App.css - Base styles · Global page and theme styles.
src/index.css - Assets · Static images and media used by the interface.
src/assets
Tutorial flow
Task screen and instructional progression for the learner experience.
- Task page · Primary learner workspace and task screen.
src/Pages/Task.tsx - Tutorial steps · Renders tutorial progression and step state.
src/Components/TutorialSteps.tsx
Editor runtime
In-browser code editing and live execution boundary.
- Editor · Core code editing and preview surface.
src/Components/Editor.tsx
Feedback loop
Result display and learner-facing evaluation feedback.
- Feedback · Shows validation or AI-assisted feedback.
src/Components/FeedbackModal.tsx
Persistence
Firebase configuration and external state storage boundary.
- Firebase config · Central Firebase initialization and configuration.
firebaseConfig.ts
Build & deploy
Vite build pipeline and static serving in production.
- Index page · HTML shell that receives the React app.
index.html - Vite · Development server and production bundler.
vite.config.ts - Docker · Builds the static app image for deployment.
Dockerfile - NGINX · Serves the compiled frontend in production.
nginx.conf - Package manifest · Defines scripts and frontend dependencies.
package.json
Connections 18
- 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.