# code-plus-academy/front-end architecture

> Architecture diagram of the GitHub repository code-plus-academy/front-end, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/code-plus-academy/front-end
- Repository: https://github.com/code-plus-academy/front-end

## Overview

CPA is a Next.js frontend for Code Plus Academy, combining academic-resource discovery and sharing with social publishing, messaging, and creator features; it also exposes support, telemetry, and agent-facing endpoints. A typical learner journey is to browse or search notes by college, course, semester, and subject, open a resource, then download it. The graph also shows documented career and Explore content capabilities. Source excerpts establish several API integrations; other product areas are represented by their exact route directories, with uncertain internal wiring omitted.

Main entry points: [`app/api/download/[noteId]/route.js`](https://github.com/code-plus-academy/front-end/blob/main/app/api/download/%5BnoteId%5D/route.js) (Resource download API), [`src/utils/notesApi.js`](https://github.com/code-plus-academy/front-end/blob/main/src/utils/notesApi.js) (Notes API client), [`app/notes/search/page.jsx`](https://github.com/code-plus-academy/front-end/blob/main/app/notes/search/page.jsx) (Notes search page), [`src/services/searchEngine.js`](https://github.com/code-plus-academy/front-end/blob/main/src/services/searchEngine.js) (Search and autosuggest)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Academic resources"]
  node_notes_routes["Notes pages"]
  node_college_pages["College and course hubs"]
  node_search_page["Notes search page<br/>[page.jsx]"]
  node_search_engine["Search and autosuggest<br/>[searchEngine.js]"]
  node_resource_page["Resource detail<br/>[page.jsx]"]
  node_upload_page["Resource upload<br/>[page.jsx]"]
end

subgraph group_social["Social and creator"]
  node_feed["Social feed<br/>[page.jsx]"]
  node_posts["Posts and publishing"]
  node_profiles["Member profiles"]
  node_messaging["Direct messaging"]
  node_creator["Creator dashboard<br/>[page.jsx]"]
  node_explore["Explore content"]
  node_videos["Videos and shorts"]
  node_career["Career listings"]
end

subgraph group_platform["Platform APIs"]
  node_notes_api_client["Notes API client<br/>[notesApi.js]"]
  node_upload_api["Media upload API<br/>[route.js]"]
  node_download_api["Resource download API<br/>[route.js]"]
  node_content_store[("Supabase content<br/>[supabaseContent.js]")]
  node_mcp_api["MCP tool endpoint<br/>[route.js]"]
  node_telemetry_api["Telemetry proxy<br/>[route.js]"]
  node_preview_api["Link preview API<br/>[route.js]"]
end

subgraph group_support["Support and operations"]
  node_support_page["Support pages"]
  node_support_api["Support ticket API<br/>[route.js]"]
  node_grpc_client["Support gRPC client<br/>[client.js]"]
end

node_visitor(("Visitor or member"))
node_backend["CPA backend API"]
node_remote_files["Remote file host"]
node_grpc_service["CPA management service"]
node_external_site["External websites"]

node_visitor -->|"browses"| node_notes_routes
node_visitor -->|"explores"| node_college_pages
node_visitor -->|"searches"| node_search_page
node_visitor -->|"opens"| node_resource_page
node_visitor -->|"uploads"| node_upload_page
node_visitor -->|"reads"| node_feed
node_visitor -->|"publishes"| node_posts
node_visitor -->|"views"| node_profiles
node_visitor -->|"messages"| node_messaging
node_visitor -->|"manages"| node_creator
node_visitor -->|"discovers"| node_explore
node_visitor -->|"watches"| node_videos
node_visitor -->|"browses"| node_career
node_visitor -->|"requests help"| node_support_page
node_search_page -->|"searches via"| node_search_engine
node_search_engine -->|"fetches data"| node_notes_api_client
node_notes_api_client -->|"requests"| node_backend
node_upload_api -->|"forwards upload"| node_backend
node_download_api -->|"looks up note"| node_content_store
node_download_api -->|"fallback lookup"| node_notes_api_client
node_download_api -->|"streams or redirects"| node_remote_files
node_support_api -->|"creates ticket"| node_grpc_client
node_grpc_client -->|"calls"| node_grpc_service
node_mcp_api -.->|"serves tool protocol"| node_visitor
node_telemetry_api -->|"forwards events"| node_backend
node_preview_api -->|"fetches metadata"| node_external_site

click node_notes_routes "https://github.com/code-plus-academy/front-end/tree/main/app/notes"
click node_college_pages "https://github.com/code-plus-academy/front-end/tree/main/app/notes/colleges"
click node_search_page "https://github.com/code-plus-academy/front-end/blob/main/app/notes/search/page.jsx"
click node_search_engine "https://github.com/code-plus-academy/front-end/blob/main/src/services/searchEngine.js"
click node_notes_api_client "https://github.com/code-plus-academy/front-end/blob/main/src/utils/notesApi.js"
click node_resource_page "https://github.com/code-plus-academy/front-end/blob/main/app/notes/resource/%5BresourceSlug%5D/page.jsx"
click node_upload_page "https://github.com/code-plus-academy/front-end/blob/main/app/notes/upload/page.jsx"
click node_upload_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/upload/media/route.js"
click node_download_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/download/%5BnoteId%5D/route.js"
click node_content_store "https://github.com/code-plus-academy/front-end/blob/main/src/lib/supabaseContent.js"
click node_feed "https://github.com/code-plus-academy/front-end/blob/main/app/feed/page.jsx"
click node_posts "https://github.com/code-plus-academy/front-end/tree/main/app/posts"
click node_profiles "https://github.com/code-plus-academy/front-end/tree/main/app/profile"
click node_messaging "https://github.com/code-plus-academy/front-end/tree/main/app/direct"
click node_creator "https://github.com/code-plus-academy/front-end/blob/main/app/creator/dashboard/page.jsx"
click node_explore "https://github.com/code-plus-academy/front-end/tree/main/app/explore"
click node_videos "https://github.com/code-plus-academy/front-end/tree/main/app/videos"
click node_career "https://github.com/code-plus-academy/front-end/tree/main/app/career"
click node_support_page "https://github.com/code-plus-academy/front-end/tree/main/app/support"
click node_support_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/support/route.js"
click node_grpc_client "https://github.com/code-plus-academy/front-end/blob/main/src/grpc/client.js"
click node_mcp_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/mcp/route.js"
click node_telemetry_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/telemetry/batch/route.js"
click node_preview_api "https://github.com/code-plus-academy/front-end/blob/main/app/api/meta/preview/route.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_notes_routes,node_college_pages,node_search_page,node_search_engine,node_resource_page,node_upload_page toneBlue
class node_feed,node_posts,node_profiles,node_messaging,node_creator,node_explore,node_videos,node_career toneAmber
class node_notes_api_client,node_upload_api,node_download_api,node_content_store,node_mcp_api,node_telemetry_api,node_preview_api,node_backend toneMint
class node_support_page,node_support_api,node_grpc_client toneRose
class node_visitor,node_remote_files,node_grpc_service,node_external_site toneIndigo
```

## Components

### Academic resources

- [Notes pages](https://github.com/code-plus-academy/front-end/tree/main/app/notes): `app/notes`
- [College and course hubs](https://github.com/code-plus-academy/front-end/tree/main/app/notes/colleges): `app/notes/colleges`
- [Notes search page](https://github.com/code-plus-academy/front-end/blob/main/app/notes/search/page.jsx): `app/notes/search/page.jsx`
- [Search and autosuggest](https://github.com/code-plus-academy/front-end/blob/main/src/services/searchEngine.js): `src/services/searchEngine.js`
- [Resource detail](https://github.com/code-plus-academy/front-end/blob/main/app/notes/resource/%5BresourceSlug%5D/page.jsx): `app/notes/resource/[resourceSlug]/page.jsx`
- [Resource upload](https://github.com/code-plus-academy/front-end/blob/main/app/notes/upload/page.jsx): `app/notes/upload/page.jsx`

### Social and creator

- [Social feed](https://github.com/code-plus-academy/front-end/blob/main/app/feed/page.jsx): `app/feed/page.jsx`
- [Posts and publishing](https://github.com/code-plus-academy/front-end/tree/main/app/posts): `app/posts`
- [Member profiles](https://github.com/code-plus-academy/front-end/tree/main/app/profile): `app/profile`
- [Direct messaging](https://github.com/code-plus-academy/front-end/tree/main/app/direct): `app/direct`
- [Creator dashboard](https://github.com/code-plus-academy/front-end/blob/main/app/creator/dashboard/page.jsx): `app/creator/dashboard/page.jsx`
- [Explore content](https://github.com/code-plus-academy/front-end/tree/main/app/explore): `app/explore`
- [Videos and shorts](https://github.com/code-plus-academy/front-end/tree/main/app/videos): `app/videos`
- [Career listings](https://github.com/code-plus-academy/front-end/tree/main/app/career): `app/career`

### Platform APIs

- [Notes API client](https://github.com/code-plus-academy/front-end/blob/main/src/utils/notesApi.js): `src/utils/notesApi.js`
- [Media upload API](https://github.com/code-plus-academy/front-end/blob/main/app/api/upload/media/route.js): `app/api/upload/media/route.js`
- [Resource download API](https://github.com/code-plus-academy/front-end/blob/main/app/api/download/%5BnoteId%5D/route.js): `app/api/download/[noteId]/route.js`
- [Supabase content](https://github.com/code-plus-academy/front-end/blob/main/src/lib/supabaseContent.js): `src/lib/supabaseContent.js`
- [MCP tool endpoint](https://github.com/code-plus-academy/front-end/blob/main/app/api/mcp/route.js): `app/api/mcp/route.js`
- [Telemetry proxy](https://github.com/code-plus-academy/front-end/blob/main/app/api/telemetry/batch/route.js): `app/api/telemetry/batch/route.js`
- [Link preview API](https://github.com/code-plus-academy/front-end/blob/main/app/api/meta/preview/route.js): `app/api/meta/preview/route.js`

### Support and operations

- [Support pages](https://github.com/code-plus-academy/front-end/tree/main/app/support): `app/support`
- [Support ticket API](https://github.com/code-plus-academy/front-end/blob/main/app/api/support/route.js): `app/api/support/route.js`
- [Support gRPC client](https://github.com/code-plus-academy/front-end/blob/main/src/grpc/client.js): `src/grpc/client.js`

### Other components

- **Visitor or member**
- **CPA backend API**
- **Remote file host**
- **CPA management service**
- **External websites**

## Connections

- Visitor or member → Notes pages: browses
- Visitor or member → College and course hubs: explores
- Visitor or member → Notes search page: searches
- Visitor or member → Resource detail: opens
- Visitor or member → Resource upload: uploads
- Visitor or member → Social feed: reads
- Visitor or member → Posts and publishing: publishes
- Visitor or member → Member profiles: views
- Visitor or member → Direct messaging: messages
- Visitor or member → Creator dashboard: manages
- Visitor or member → Explore content: discovers
- Visitor or member → Videos and shorts: watches
- Visitor or member → Career listings: browses
- Visitor or member → Support pages: requests help
- Notes search page → Search and autosuggest: searches via
- Search and autosuggest → Notes API client: fetches data
- Notes API client → CPA backend API: requests
- Media upload API → CPA backend API: forwards upload
- Resource download API → Supabase content: looks up note
- Resource download API → Notes API client: fallback lookup
- Resource download API → Remote file host: streams or redirects
- Support ticket API → Support gRPC client: creates ticket
- Support gRPC client → CPA management service: calls
- MCP tool endpoint → Visitor or member: serves tool protocol
- Telemetry proxy → CPA backend API: forwards events
- Link preview API → External websites: fetches metadata