# prince-chhirolya/dsa_platform architecture

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

- Interactive diagram: https://gitdiagram.com/prince-chhirolya/dsa_platform
- Repository: https://github.com/prince-chhirolya/dsa_platform

## Overview

1. This repository is a static, client-rendered study guide site built with Vite + React. It does not appear to have a backend or database; the whole product is assembled from Markdown content plus client-side navigation and search.

2. The core domain boundary is the DSA content library. Topic-level Markdown files live under `content/` and mirror the major interview-prep areas in the README: arrays, binary search, DP, graphs, greedy, heaps, range queries, stacks/queues, tries, and two-pointers/sliding-window. These files are the primary source of truth for the learning material.

3. There is a second content copy under `public/content/` and a generated output under `dist/content/`. That suggests a publish/build flow where authored Markdown is prepared for static serving, then emitted into the production bundle. The app is therefore content-driven rather than code-driven.

4. The app shell lives in `src/App.jsx`, with global styling in `src/App.css` and `src/index.css`, and the entrypoint in `src/main.jsx`. The UI is organized around a home page, a markdown-reading page, sidebar navigation, a topbar search trigger, and a search palette. This implies a single-page app with route-like view switching handled on the client.

5. Markdown rendering is a distinct subsystem. `src/lib/markdownParse.js` likely converts the topic files into renderable page structure, while `src/components/MarkdownPage.jsx` is the presentation layer for article pages. The architecture separates content parsing from the UI components that display it.

6. Search is a major feature and has its own boundary. `scripts/buildSearchIndex.mjs` likely precomputes a search corpus from the Markdown content, while `src/search/useSearchIndex.js`, `parseQuery.js`, `highlight.jsx`, and `useRecentSearches.js` implement the client-side search experience. That means search is built mostly at compile time, then consumed interactively in the browser.

7. There is a content-metadata/indexing layer at build time. `vite-plugins/content-index.js` and `scripts/addFrontmatter.mjs` indicate the repository generates or enriches frontmatter/index data from the Markdown files, so the app can list topics, subtopics, and searchable metadata without manual duplication.

8. The `src/conceptMaps.js` file and `src/concepts_maps/` directory form another data subsystem. These files likely encode structured relationships between patterns, such as topic maps or cross-topic concept graphs, which support the “pattern-first” organization described in the README.

9. `src/topics.js` is the topic registry layer. It likely defines the canonical ordering and display names for the ten main sections, acting as the bridge between the content files and the navigation/sidebar UI.

10. The repository has a clear authoring-to-runtime pipeline:
   - source Markdown in `content/`
   - build-time augmentation/indexing via scripts and the Vite plugin
   - generated static assets in `dist/`
   - client app in `src/` rendering pages and search from prebuilt content/index data.

11. The `README.md` is not just documentation; it is effectively the product manifest. It defines the repository’s information architecture: topic taxonomy, study phases, cross-topic reuse, and the intended learning flow. That structure is reflected in the content organization and likely in the sidebar and search UI.

12. For an architecture diagram, the key boundaries are: content authoring, build-time content processing, client-side rendering, and client-side search. The only external dependency that materially matters is the static build toolchain itself; everything else is local file-based data flow.

Main entry points: [`src/App.jsx`](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/App.jsx) (App shell), [`content/arrays.md`](https://github.com/prince-chhirolya/dsa_platform/blob/main/content/arrays.md) (Topic markdown), [`src/search/useSearchIndex.js`](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/search/useSearchIndex.js) (Search index), [`src/components/MarkdownPage.jsx`](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/MarkdownPage.jsx) (Article page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Content authoring"]
  node_readme["README<br/>product manifest<br/>[README.md]"]
  node_topic_content["Topic markdown<br/>content library<br/>[arrays.md]"]
  node_snippet_content["Snippet notes<br/>supplemental content<br/>[arrays_snippets.md]"]
end

subgraph group_build["Build pipeline"]
  node_published_content["Published content<br/>static content<br/>[README.md]"]
  node_dist_content["Build output<br/>generated assets<br/>[arrays.md]"]
  node_frontmatter["Frontmatter pass<br/>content transform<br/>[addFrontmatter.mjs]"]
  node_content_index["Content index<br/>vite plugin<br/>[content-index.js]"]
  node_search_build["Search build<br/>index builder"]
end

subgraph group_client["Client app"]
  node_app_shell["App shell<br/>spa shell<br/>[App.jsx]"]
  node_entrypoint["Bootstrap<br/>react entry<br/>[main.jsx]"]
  node_home_page["Home page<br/>landing view<br/>[HomePage.jsx]"]
  node_markdown_page["Article page<br/>reader view<br/>[MarkdownPage.jsx]"]
  node_sidebar["Sidebar<br/>navigation<br/>[Sidebar.jsx]"]
  node_search_trigger(("Search trigger<br/>ui control"))
  node_topics["Topic registry<br/>navigation data<br/>[topics.js]"]
end

subgraph group_search["Search"]
  node_search_palette["Search palette<br/>search UI<br/>[SearchPalette.jsx]"]
  node_search_hook["Search index<br/>client search<br/>[useSearchIndex.js]"]
  node_query_tools["Query tools<br/>search helpers<br/>[parseQuery.js]"]
end

subgraph group_maps["Concept maps"]
  node_concept_maps["Concept maps<br/>relationship data<br/>[conceptMaps.js]"]
  node_graph_dp["DP map<br/>concept map"]
end

node_readme -->|"defines"| node_topic_content
node_topic_content -->|"augmented by"| node_snippet_content
node_topic_content -->|"processed by"| node_frontmatter
node_frontmatter -->|"feeds"| node_content_index
node_content_index -->|"publishes"| node_published_content
node_published_content -->|"bundled into"| node_dist_content
node_topic_content -->|"indexed by"| node_search_build
node_search_build -->|"consumed by"| node_search_hook
node_app_shell -->|"mounted by"| node_entrypoint
node_app_shell -->|"shows"| node_home_page
node_app_shell -->|"shows"| node_markdown_page
node_app_shell -->|"navigates"| node_sidebar
node_app_shell -->|"opens"| node_search_trigger
node_search_trigger -->|"launches"| node_search_palette
node_search_palette -->|"queries"| node_search_hook
node_search_hook -->|"uses"| node_query_tools
node_sidebar -->|"driven by"| node_topics
node_markdown_page -->|"renders"| node_topic_content
node_markdown_page -.->|"cross-links"| node_search_hook
node_concept_maps -->|"specializes"| node_graph_dp
node_sidebar -.->|"references"| node_concept_maps
node_home_page -.->|"summarizes"| node_topics

click node_readme "https://github.com/prince-chhirolya/dsa_platform/blob/main/README.md"
click node_topic_content "https://github.com/prince-chhirolya/dsa_platform/blob/main/content/arrays.md"
click node_snippet_content "https://github.com/prince-chhirolya/dsa_platform/blob/main/content/arrays_snippets.md"
click node_published_content "https://github.com/prince-chhirolya/dsa_platform/blob/main/public/content/README.md"
click node_dist_content "https://github.com/prince-chhirolya/dsa_platform/blob/main/dist/content/arrays.md"
click node_frontmatter "https://github.com/prince-chhirolya/dsa_platform/blob/main/scripts/addFrontmatter.mjs"
click node_content_index "https://github.com/prince-chhirolya/dsa_platform/blob/main/vite-plugins/content-index.js"
click node_search_build "https://github.com/prince-chhirolya/dsa_platform/blob/main/scripts/buildSearchIndex.mjs"
click node_app_shell "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/App.jsx"
click node_entrypoint "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/main.jsx"
click node_home_page "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/HomePage.jsx"
click node_markdown_page "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/MarkdownPage.jsx"
click node_sidebar "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/Sidebar.jsx"
click node_search_trigger "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/TopbarSearchTrigger.jsx"
click node_search_palette "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/SearchPalette.jsx"
click node_search_hook "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/search/useSearchIndex.js"
click node_query_tools "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/search/parseQuery.js"
click node_topics "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/topics.js"
click node_concept_maps "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/conceptMaps.js"
click node_graph_dp "https://github.com/prince-chhirolya/dsa_platform/blob/main/src/concepts_maps/dynamicProgramming.js"

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_readme,node_topic_content,node_snippet_content toneBlue
class node_published_content,node_dist_content,node_frontmatter,node_content_index,node_search_build toneAmber
class node_app_shell,node_entrypoint,node_home_page,node_markdown_page,node_sidebar,node_search_trigger,node_topics toneMint
class node_search_palette,node_search_hook,node_query_tools toneRose
class node_concept_maps,node_graph_dp toneIndigo
```

## Components

### Content authoring

Source Markdown and reusable study material.

- [README](https://github.com/prince-chhirolya/dsa_platform/blob/main/README.md): product manifest · Defines the study guide taxonomy, learning flow, and content organization. · `README.md`
- [Topic markdown](https://github.com/prince-chhirolya/dsa_platform/blob/main/content/arrays.md): content library · Primary DSA lessons authored as Markdown topic files. · `content/arrays.md`
- [Snippet notes](https://github.com/prince-chhirolya/dsa_platform/blob/main/content/arrays_snippets.md): supplemental content · Topic-specific supporting notes and code snippets. · `content/arrays_snippets.md`

### Build pipeline

Static generation and indexing steps that prepare content for the browser.

- [Published content](https://github.com/prince-chhirolya/dsa_platform/blob/main/public/content/README.md): static content · Publicly served Markdown copy used by the built site. · `public/content/README.md`
- [Build output](https://github.com/prince-chhirolya/dsa_platform/blob/main/dist/content/arrays.md): generated assets · Production Markdown assets emitted into the static bundle. · `dist/content/arrays.md`
- [Frontmatter pass](https://github.com/prince-chhirolya/dsa_platform/blob/main/scripts/addFrontmatter.mjs): content transform · Enriches Markdown with metadata for listing and navigation. · `scripts/addFrontmatter.mjs`
- [Content index](https://github.com/prince-chhirolya/dsa_platform/blob/main/vite-plugins/content-index.js): vite plugin · Build-time indexing layer that exposes content metadata to the app. · `vite-plugins/content-index.js`
- [Search build](https://github.com/prince-chhirolya/dsa_platform/blob/main/scripts/buildSearchIndex.mjs): index builder · Precomputes the searchable corpus from Markdown content. · `scripts/buildSearchIndex.mjs`

### Client app

React SPA shell and reading/navigation UI.

- [App shell](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/App.jsx): spa shell · Top-level React application that coordinates views and layout. · `src/App.jsx`
- [Bootstrap](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/main.jsx): react entry · Client entry module that mounts the React app. · `src/main.jsx`
- [Home page](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/HomePage.jsx): landing view · Landing view for browsing the study guide. · `src/components/HomePage.jsx`
- [Article page](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/MarkdownPage.jsx): reader view · Renders topic Markdown as the main reading experience. · `src/components/MarkdownPage.jsx`
- [Sidebar](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/Sidebar.jsx): navigation · Primary topic navigation across the content library. · `src/components/Sidebar.jsx`
- [Search trigger](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/TopbarSearchTrigger.jsx): ui control · Topbar affordance that opens the search palette. · `src/components/TopbarSearchTrigger.jsx`
- [Topic registry](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/topics.js): navigation data · Canonical topic order and display names for the study guide. · `src/topics.js`

### Search

Client-side search experience backed by a prebuilt index.

- [Search palette](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/components/SearchPalette.jsx): search UI · Overlay for interactive topic search and quick navigation. · `src/components/SearchPalette.jsx`
- [Search index](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/search/useSearchIndex.js): client search · Loads and queries the prebuilt search index in the browser. · `src/search/useSearchIndex.js`
- [Query tools](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/search/parseQuery.js): search helpers · Query parsing, highlighting, and recent-search utilities. · `src/search/parseQuery.js`

### Concept maps

Structured cross-topic knowledge maps.

- [Concept maps](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/conceptMaps.js): relationship data · Cross-topic pattern maps and conceptual links. · `src/conceptMaps.js`
- [DP map](https://github.com/prince-chhirolya/dsa_platform/blob/main/src/concepts_maps/dynamicProgramming.js): concept map · Dynamic programming relationship map and pattern organization. · `src/concepts_maps/dynamicProgramming.js`

## Connections

- README → Topic markdown: defines · The README establishes the topic taxonomy reflected by the authored Markdown files.
- Topic markdown → Snippet notes: augmented by · Main lessons are paired with supporting snippet pages.
- Topic markdown → Frontmatter pass: processed by · Source Markdown is enriched with metadata during build preparation.
- Frontmatter pass → Content index: feeds · Generated metadata is exposed through the content index plugin.
- Content index → Published content: publishes · Indexed content is prepared for static serving under public assets.
- Published content → Build output: bundled into · Public content is emitted into the final static build output.
- Topic markdown → Search build: indexed by · The search build scans authored Markdown to create the corpus.
- Search build → Search index: consumed by · The browser search hook queries the prebuilt search index.
- App shell → Bootstrap: mounted by · The app shell is started from the React entry module.
- App shell → Home page: shows · The shell can render the landing view.
- App shell → Article page: shows · The shell can render the reader view.
- App shell → Sidebar: navigates · The shell coordinates topic navigation through the sidebar.
- App shell → Search trigger: opens · The shell exposes search from the top bar.
- Search trigger → Search palette: launches · The trigger opens the search overlay.
- Search palette → Search index: queries · The palette uses the client search index for results.
- Search index → Query tools: uses · Search execution relies on query parsing, highlighting, and recents.
- Sidebar → Topic registry: driven by · Navigation order and labels come from the topic registry.
- Article page → Topic markdown: renders · Reader views are generated from the authored Markdown content.
- Article page → Search index: cross-links · Reading experience can surface search-driven discovery.
- Concept maps → DP map: specializes · Topic-specific concept maps define structured relationships within the library.
- Sidebar → Concept maps: references · Navigation can surface cross-topic conceptual organization.
- Home page → Topic registry: summarizes · The landing page presents the main topic structure.