# xtremilicious/projectlearn-project-based-learning architecture

> Architecture diagram of the GitHub repository xtremilicious/projectlearn-project-based-learning, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xtremilicious/projectlearn-project-based-learning
- Repository: https://github.com/xtremilicious/projectlearn-project-based-learning

## Overview

ProjectLearn is a project-based learning catalog: learners enter through the landing page, choose a development domain, browse and filter its project tutorials, then open a project detail page. The site also publishes tech articles and offers a contributor workflow for submitting projects through GitHub authentication and an API endpoint. The README names web, mobile, game, and machine-learning/AI categories; the tree also shows blog and contribution features. Some subsystem wiring is inferred only from page structure, so uncertain service and storage links are omitted.

Main entry points: [`src/redux/actions/dataActions.ts`](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/actions/dataActions.ts) (Project Data Actions), [`src/components/landing/Categories.tsx`](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/landing/Categories.tsx) (Category Links), [`src/components/dashboard/Layout.tsx`](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Layout.tsx) (Catalog Dashboard), [`pages/contribute/index.tsx`](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/contribute/index.tsx) (Project Submission)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Site Discovery"]
  node_landing["Landing Page<br/>[index.tsx]"]
  node_category_cards["Category Links<br/>[Categories.tsx]"]
  node_blog_list_page["Blog Index<br/>[index.tsx]"]
  node_blog_list["Blog Listing<br/>[BlogList.tsx]"]
  node_blog_detail["Blog Article<br/>[&#91;slug&#93;.tsx]"]
end

subgraph group_catalog["Learning Catalog"]
  node_web_category["Web Category<br/>[index.tsx]"]
  node_mobile_category["Mobile Category<br/>[index.tsx]"]
  node_game_category["Game Category<br/>[index.tsx]"]
  node_ai_category["ML AI Category<br/>[index.tsx]"]
  node_dashboard["Catalog Dashboard<br/>[Layout.tsx]"]
  node_catalog_content["Category Filtering<br/>[index.tsx]"]
  node_project_list["Project Results<br/>[ProjectList.tsx]"]
  node_project_detail["Project Detail Pages<br/>[&#91;id&#93;.tsx]"]
  node_project_info["Project Information<br/>[ProjectInfo.tsx]"]
end

subgraph group_publishing["Community Publishing"]
  node_contribution_form["Project Submission<br/>[index.tsx]"]
  node_github_login["GitHub Login<br/>[GitHubLogin.tsx]"]
  node_submission_api["Add Project API<br/>[add-project.ts]"]
  node_auth_api["Auth Handler<br/>[&#91;...nextauth&#93;.ts]"]
end

subgraph group_state["Catalog State"]
  node_data_actions["Project Data Actions<br/>[dataActions.ts]"]
  node_data_reducer["Project Data Reducer<br/>[dataReducer.ts]"]
  node_redux_store["Redux Store<br/>[store.ts]"]
end

node_learner(("Learner"))
node_contributor(("Contributor"))
node_github(("GitHub"))

node_learner -->|"opens"| node_landing
node_landing -->|"renders"| node_category_cards
node_category_cards -->|"links to"| node_web_category
node_category_cards -->|"links to"| node_mobile_category
node_category_cards -->|"links to"| node_game_category
node_category_cards -->|"links to"| node_ai_category
node_web_category -->|"dispatches"| node_data_actions
node_mobile_category -->|"dispatches"| node_data_actions
node_game_category -->|"dispatches"| node_data_actions
node_ai_category -->|"dispatches"| node_data_actions
node_data_actions -->|"updates"| node_data_reducer
node_data_reducer -->|"reduces state"| node_redux_store
node_web_category -->|"renders"| node_dashboard
node_mobile_category -->|"renders"| node_dashboard
node_game_category -->|"renders"| node_dashboard
node_ai_category -->|"renders"| node_dashboard
node_dashboard -->|"renders"| node_catalog_content
node_catalog_content -->|"reads projects"| node_redux_store
node_catalog_content -->|"passes filtered projects"| node_project_list
node_learner -->|"opens tutorial"| node_project_detail
node_project_detail -->|"renders"| node_project_info
node_learner -->|"opens"| node_blog_list_page
node_blog_list_page -->|"renders"| node_blog_list
node_learner -->|"opens article"| node_blog_detail
node_contributor -->|"submits project"| node_contribution_form
node_contribution_form -->|"renders"| node_github_login
node_github_login -->|"starts sign-in"| node_auth_api
node_auth_api -->|"authenticates with"| node_github
node_contribution_form -->|"dispatches"| node_data_actions
node_contribution_form -->|"posts submission"| node_submission_api

click node_landing "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/index.tsx"
click node_category_cards "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/landing/Categories.tsx"
click node_blog_list_page "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/blog/index.tsx"
click node_blog_list "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/blog/BlogList.tsx"
click node_blog_detail "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/blog/%5Bslug%5D.tsx"
click node_web_category "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/web-development/index.tsx"
click node_mobile_category "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/mobile-development/index.tsx"
click node_game_category "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/game-development/index.tsx"
click node_ai_category "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/machine-learning-and-ai/index.tsx"
click node_dashboard "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Layout.tsx"
click node_catalog_content "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Content/index.tsx"
click node_project_list "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Content/ProjectList.tsx"
click node_project_detail "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/web-development/project/%5Bid%5D.tsx"
click node_project_info "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Info/ProjectInfo.tsx"
click node_contribution_form "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/contribute/index.tsx"
click node_github_login "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/GitHubLogin.tsx"
click node_submission_api "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/api/github/add-project.ts"
click node_auth_api "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/api/auth/%5B...nextauth%5D.ts"
click node_data_actions "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/actions/dataActions.ts"
click node_data_reducer "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/reducers/dataReducer.ts"
click node_redux_store "https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/store.ts"

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_landing,node_category_cards,node_blog_list_page,node_blog_list,node_blog_detail toneBlue
class node_web_category,node_mobile_category,node_game_category,node_ai_category,node_dashboard,node_catalog_content,node_project_list,node_project_detail,node_project_info toneAmber
class node_contribution_form,node_github_login,node_submission_api,node_auth_api toneMint
class node_data_actions,node_data_reducer,node_redux_store toneRose
class node_learner,node_contributor,node_github toneIndigo
```

## Components

### Site Discovery

- [Landing Page](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/index.tsx): `pages/index.tsx`
- [Category Links](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/landing/Categories.tsx): `src/components/landing/Categories.tsx`
- [Blog Index](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/blog/index.tsx): `pages/blog/index.tsx`
- [Blog Listing](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/blog/BlogList.tsx): `src/components/blog/BlogList.tsx`
- [Blog Article](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/blog/%5Bslug%5D.tsx): `pages/blog/[slug].tsx`

### Learning Catalog

- [Web Category](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/web-development/index.tsx): `pages/learn/web-development/index.tsx`
- [Mobile Category](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/mobile-development/index.tsx): `pages/learn/mobile-development/index.tsx`
- [Game Category](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/game-development/index.tsx): `pages/learn/game-development/index.tsx`
- [ML AI Category](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/machine-learning-and-ai/index.tsx): `pages/learn/machine-learning-and-ai/index.tsx`
- [Catalog Dashboard](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Layout.tsx): `src/components/dashboard/Layout.tsx`
- [Category Filtering](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Content/index.tsx): `src/components/dashboard/Content/index.tsx`
- [Project Results](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Content/ProjectList.tsx): `src/components/dashboard/Content/ProjectList.tsx`
- [Project Detail Pages](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/learn/web-development/project/%5Bid%5D.tsx): `pages/learn/web-development/project/[id].tsx`
- [Project Information](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/dashboard/Info/ProjectInfo.tsx): `src/components/dashboard/Info/ProjectInfo.tsx`

### Community Publishing

- [Project Submission](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/contribute/index.tsx): `pages/contribute/index.tsx`
- [GitHub Login](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/components/GitHubLogin.tsx): `src/components/GitHubLogin.tsx`
- [Add Project API](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/api/github/add-project.ts): `pages/api/github/add-project.ts`
- [Auth Handler](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/pages/api/auth/%5B...nextauth%5D.ts): `pages/api/auth/[...nextauth].ts`

### Catalog State

- [Project Data Actions](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/actions/dataActions.ts): `src/redux/actions/dataActions.ts`
- [Project Data Reducer](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/reducers/dataReducer.ts): `src/redux/reducers/dataReducer.ts`
- [Redux Store](https://github.com/xtremilicious/projectlearn-project-based-learning/blob/master/src/redux/store.ts): `src/redux/store.ts`

### Other components

- **Learner**
- **Contributor**
- **GitHub**

## Connections

- Learner → Landing Page: opens
- Landing Page → Category Links: renders
- Category Links → Web Category: links to
- Category Links → Mobile Category: links to
- Category Links → Game Category: links to
- Category Links → ML AI Category: links to
- Web Category → Project Data Actions: dispatches
- Mobile Category → Project Data Actions: dispatches
- Game Category → Project Data Actions: dispatches
- ML AI Category → Project Data Actions: dispatches
- Project Data Actions → Project Data Reducer: updates
- Project Data Reducer → Redux Store: reduces state
- Web Category → Catalog Dashboard: renders
- Mobile Category → Catalog Dashboard: renders
- Game Category → Catalog Dashboard: renders
- ML AI Category → Catalog Dashboard: renders
- Catalog Dashboard → Category Filtering: renders
- Category Filtering → Redux Store: reads projects
- Category Filtering → Project Results: passes filtered projects
- Learner → Project Detail Pages: opens tutorial
- Project Detail Pages → Project Information: renders
- Learner → Blog Index: opens
- Blog Index → Blog Listing: renders
- Learner → Blog Article: opens article
- Contributor → Project Submission: submits project
- Project Submission → GitHub Login: renders
- GitHub Login → Auth Handler: starts sign-in
- Auth Handler → GitHub: authenticates with
- Project Submission → Project Data Actions: dispatches
- Project Submission → Add Project API: posts submission