# rajithsundar/englo architecture

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

- Interactive diagram: https://gitdiagram.com/rajithsundar/englo
- Repository: https://github.com/rajithsundar/englo

## Overview

Englo Studio is an interview-preparation platform for explaining algorithm solutions in plain English and designing distributed-system topologies. Users choose a challenge, work through an algorithm or canvas-based architecture exercise, and inspect evaluation feedback; the platform also documents authentication, Razorpay checkout/payouts, and certificates. The graph reflects sampled wiring and README capabilities; some peripheral integrations are represented at their documented subsystem boundary because their implementation was not sampled.

Main entry points: [`src/App.tsx`](https://github.com/rajithsundar/englo/blob/main/src/App.tsx) (App shell), [`src/store/usePlatformStore.ts`](https://github.com/rajithsundar/englo/blob/main/src/store/usePlatformStore.ts) (Platform state), [`server.ts`](https://github.com/rajithsundar/englo/blob/main/server.ts) (HTTP API), [`src/components/algo/AlgoWorkspace.tsx`](https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoWorkspace.tsx) (Algorithm workspace)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App shell<br/>[App.tsx]"]
  node_landing["Landing experience<br/>[LandingPage.tsx]"]
  node_dashboard["Challenge dashboard<br/>[DashboardView.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_practice["Practice workspaces"]
  node_catalog["Problem catalogue<br/>[problems.ts]"]
  node_algo["Algorithm workspace<br/>[AlgoWorkspace.tsx]"]
  node_editor["Plain-English editor<br/>[AlgoEditor.tsx]"]
  node_algoresults["Algorithm results"]
  node_canvas["Topology canvas"]
  node_nodeparts["Canvas components<br/>[NodePalette.tsx]"]
  node_archresults["Architecture results"]
  node_suite["Automated test suite"]
end

subgraph group_evaluation["Evaluation engines"]
  node_algoeval["Invariant evaluator<br/>[algoEvaluator.ts]"]
  node_archeval["Topology evaluator"]
  node_vertex["Vertex AI evaluation<br/>[vertexService.ts]"]
end

subgraph group_platform["Platform services"]
  node_store["Platform state"]
  node_api["HTTP API<br/>[server.ts]"]
  node_storage[("Profile storage<br/>[storage.ts]")]
end

subgraph group_fintech["Fintech capabilities"]
  node_auth["Authentication<br/>[AuthView.tsx]"]
  node_checkout["Razorpay checkout"]
  node_payout["RazorpayX payouts"]
  node_credential["Certificates"]
end

node_user(("Candidate"))
node_vertexcloud{{"Google Vertex AI"}}

node_user -->|"uses"| node_app
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_algo
node_app -->|"routes to"| node_canvas
node_app -->|"renders"| node_suite
node_app -->|"routes to"| node_auth
node_app -->|"renders"| node_checkout
node_app -->|"renders"| node_payout
node_app -->|"renders"| node_credential
node_dashboard -->|"displays"| node_catalog
node_dashboard -->|"reads state"| node_store
node_algo -->|"renders"| node_editor
node_algo -->|"renders"| node_algoresults
node_algo -->|"reads state"| node_store
node_canvas -->|"renders"| node_nodeparts
node_canvas -->|"renders"| node_archresults
node_canvas -->|"reads state"| node_store
node_store -->|"evaluates"| node_algoeval
node_store -->|"evaluates"| node_archeval
node_suite -->|"runs tests"| node_algoeval
node_suite -->|"runs tests"| node_archeval
node_user -->|"submits requests"| node_api
node_api -->|"serves catalogue"| node_catalog
node_api -->|"requests evaluation"| node_vertex
node_api -->|"falls back to"| node_algoeval
node_api -->|"evaluates topology"| node_archeval
node_api -->|"updates profiles"| node_storage
node_store -->|"fetches profiles"| node_api
node_vertex -->|"generates evaluation"| node_vertexcloud
node_auth -->|"uses state"| node_store
node_checkout -->|"uses state"| node_store
node_payout -->|"uses state"| node_store

click node_app "https://github.com/rajithsundar/englo/blob/main/src/App.tsx"
click node_landing "https://github.com/rajithsundar/englo/blob/main/src/components/landing/LandingPage.tsx"
click node_dashboard "https://github.com/rajithsundar/englo/blob/main/src/components/DashboardView.tsx"
click node_navigation "https://github.com/rajithsundar/englo/blob/main/src/components/Navbar.tsx"
click node_catalog "https://github.com/rajithsundar/englo/blob/main/src/data/problems.ts"
click node_algo "https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoWorkspace.tsx"
click node_editor "https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoEditor.tsx"
click node_algoresults "https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoOutputConsole.tsx"
click node_canvas "https://github.com/rajithsundar/englo/blob/main/src/components/canvas/SystemDesignWorkspace.tsx"
click node_nodeparts "https://github.com/rajithsundar/englo/blob/main/src/components/canvas/NodePalette.tsx"
click node_archresults "https://github.com/rajithsundar/englo/blob/main/src/components/canvas/ArchOutputConsole.tsx"
click node_suite "https://github.com/rajithsundar/englo/blob/main/src/components/testing/AutomatedTestSuiteModal.tsx"
click node_store "https://github.com/rajithsundar/englo/blob/main/src/store/usePlatformStore.ts"
click node_algoeval "https://github.com/rajithsundar/englo/blob/main/src/services/algoEvaluator.ts"
click node_archeval "https://github.com/rajithsundar/englo/blob/main/src/services/systemDesignEvaluator.ts"
click node_vertex "https://github.com/rajithsundar/englo/blob/main/src/server/vertexService.ts"
click node_api "https://github.com/rajithsundar/englo/blob/main/server.ts"
click node_storage "https://github.com/rajithsundar/englo/blob/main/src/server/storage.ts"
click node_auth "https://github.com/rajithsundar/englo/blob/main/src/components/auth/AuthView.tsx"
click node_checkout "https://github.com/rajithsundar/englo/blob/main/src/components/checkout/RazorpayCheckoutModal.tsx"
click node_payout "https://github.com/rajithsundar/englo/blob/main/src/components/payout/RazorpayXBountyModal.tsx"
click node_credential "https://github.com/rajithsundar/englo/blob/main/src/components/credential/VerificationCertificateModal.tsx"

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_app,node_landing,node_dashboard,node_navigation toneBlue
class node_catalog,node_algo,node_editor,node_algoresults,node_canvas,node_nodeparts,node_archresults,node_suite toneAmber
class node_algoeval,node_archeval,node_vertex toneMint
class node_store,node_api,node_storage toneRose
class node_auth,node_checkout,node_payout,node_credential,node_user,node_vertexcloud toneIndigo
```

## Components

### App experience

- [App shell](https://github.com/rajithsundar/englo/blob/main/src/App.tsx): `src/App.tsx`
- [Landing experience](https://github.com/rajithsundar/englo/blob/main/src/components/landing/LandingPage.tsx): `src/components/landing/LandingPage.tsx`
- [Challenge dashboard](https://github.com/rajithsundar/englo/blob/main/src/components/DashboardView.tsx): `src/components/DashboardView.tsx`
- [Navigation](https://github.com/rajithsundar/englo/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`

### Practice workspaces

- [Problem catalogue](https://github.com/rajithsundar/englo/blob/main/src/data/problems.ts): `src/data/problems.ts`
- [Algorithm workspace](https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoWorkspace.tsx): `src/components/algo/AlgoWorkspace.tsx`
- [Plain-English editor](https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoEditor.tsx): `src/components/algo/AlgoEditor.tsx`
- [Algorithm results](https://github.com/rajithsundar/englo/blob/main/src/components/algo/AlgoOutputConsole.tsx): `src/components/algo/AlgoOutputConsole.tsx`
- [Topology canvas](https://github.com/rajithsundar/englo/blob/main/src/components/canvas/SystemDesignWorkspace.tsx): `src/components/canvas/SystemDesignWorkspace.tsx`
- [Canvas components](https://github.com/rajithsundar/englo/blob/main/src/components/canvas/NodePalette.tsx): `src/components/canvas/NodePalette.tsx`
- [Architecture results](https://github.com/rajithsundar/englo/blob/main/src/components/canvas/ArchOutputConsole.tsx): `src/components/canvas/ArchOutputConsole.tsx`
- [Automated test suite](https://github.com/rajithsundar/englo/blob/main/src/components/testing/AutomatedTestSuiteModal.tsx): `src/components/testing/AutomatedTestSuiteModal.tsx`

### Evaluation engines

- [Invariant evaluator](https://github.com/rajithsundar/englo/blob/main/src/services/algoEvaluator.ts): `src/services/algoEvaluator.ts`
- [Topology evaluator](https://github.com/rajithsundar/englo/blob/main/src/services/systemDesignEvaluator.ts): `src/services/systemDesignEvaluator.ts`
- [Vertex AI evaluation](https://github.com/rajithsundar/englo/blob/main/src/server/vertexService.ts): `src/server/vertexService.ts`

### Platform services

- [Platform state](https://github.com/rajithsundar/englo/blob/main/src/store/usePlatformStore.ts): `src/store/usePlatformStore.ts`
- [HTTP API](https://github.com/rajithsundar/englo/blob/main/server.ts): `server.ts`
- [Profile storage](https://github.com/rajithsundar/englo/blob/main/src/server/storage.ts): `src/server/storage.ts`

### Fintech capabilities

- [Authentication](https://github.com/rajithsundar/englo/blob/main/src/components/auth/AuthView.tsx): `src/components/auth/AuthView.tsx`
- [Razorpay checkout](https://github.com/rajithsundar/englo/blob/main/src/components/checkout/RazorpayCheckoutModal.tsx): `src/components/checkout/RazorpayCheckoutModal.tsx`
- [RazorpayX payouts](https://github.com/rajithsundar/englo/blob/main/src/components/payout/RazorpayXBountyModal.tsx): `src/components/payout/RazorpayXBountyModal.tsx`
- [Certificates](https://github.com/rajithsundar/englo/blob/main/src/components/credential/VerificationCertificateModal.tsx): `src/components/credential/VerificationCertificateModal.tsx`

### Other components

- **Candidate**
- **Google Vertex AI**

## Connections

- Candidate → App shell: uses (evidence: `src/App.tsx`)
- App shell → Landing experience: renders (evidence: `src/App.tsx`)
- App shell → Challenge dashboard: renders (evidence: `src/App.tsx`)
- App shell → Navigation: renders (evidence: `src/App.tsx`)
- App shell → Algorithm workspace: renders (evidence: `src/App.tsx`)
- App shell → Topology canvas: routes to (evidence: `src/App.tsx`)
- App shell → Automated test suite: renders (evidence: `src/App.tsx`)
- App shell → Authentication: routes to (evidence: `src/App.tsx`)
- App shell → Razorpay checkout: renders (evidence: `src/App.tsx`)
- App shell → RazorpayX payouts: renders (evidence: `src/App.tsx`)
- App shell → Certificates: renders (evidence: `src/App.tsx`)
- Challenge dashboard → Problem catalogue: displays (evidence: `src/components/DashboardView.tsx`)
- Challenge dashboard → Platform state: reads state (evidence: `src/components/DashboardView.tsx`)
- Algorithm workspace → Plain-English editor: renders (evidence: `src/components/algo/AlgoWorkspace.tsx`)
- Algorithm workspace → Algorithm results: renders (evidence: `src/components/algo/AlgoWorkspace.tsx`)
- Algorithm workspace → Platform state: reads state (evidence: `src/components/algo/AlgoWorkspace.tsx`)
- Topology canvas → Canvas components: renders (evidence: `src/components/canvas/SystemDesignWorkspace.tsx`)
- Topology canvas → Architecture results: renders (evidence: `src/components/canvas/SystemDesignWorkspace.tsx`)
- Topology canvas → Platform state: reads state (evidence: `src/components/canvas/SystemDesignWorkspace.tsx`)
- Platform state → Invariant evaluator: evaluates (evidence: `src/store/usePlatformStore.ts`)
- Platform state → Topology evaluator: evaluates (evidence: `src/store/usePlatformStore.ts`)
- Automated test suite → Invariant evaluator: runs tests (evidence: `src/components/testing/AutomatedTestSuiteModal.tsx`)
- Automated test suite → Topology evaluator: runs tests (evidence: `src/components/testing/AutomatedTestSuiteModal.tsx`)
- Candidate → HTTP API: submits requests (evidence: `server.ts`)
- HTTP API → Problem catalogue: serves catalogue (evidence: `server.ts`)
- HTTP API → Vertex AI evaluation: requests evaluation (evidence: `server.ts`)
- HTTP API → Invariant evaluator: falls back to (evidence: `server.ts`)
- HTTP API → Topology evaluator: evaluates topology (evidence: `server.ts`)
- HTTP API → Profile storage: updates profiles (evidence: `server.ts`)
- Platform state → HTTP API: fetches profiles (evidence: `src/store/usePlatformStore.ts`)
- Vertex AI evaluation → Google Vertex AI: generates evaluation (evidence: `src/server/vertexService.ts`)
- Authentication → Platform state: uses state (evidence: `src/components/auth/AuthView.tsx`)
- Razorpay checkout → Platform state: uses state (evidence: `src/components/checkout/RazorpayCheckoutModal.tsx`)
- RazorpayX payouts → Platform state: uses state (evidence: `src/components/payout/RazorpayXBountyModal.tsx`)