# djemy488/litangi_tfc architecture

> Architecture diagram of the GitHub repository djemy488/litangi_tfc, 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/djemy488/litangi_tfc
- Repository: https://github.com/djemy488/litangi_tfc

## Overview

Litangi is a web platform for learning Lingala, Swahili, Tshiluba and Kikongo. Its main learner journey runs from language and level selection through course browsing, lessons and evaluation, with gamification and certificates as related outcomes. The React app routes these experiences and also exposes AI assistance, account, profile, subscription and payment pages. README capabilities such as cultural immersion and teacher progress tracking are documented, but their implementation and wiring are not shown in sampled source; those links are therefore not inferred.

Main entry points: [`src/App.jsx`](https://github.com/djemy488/litangi_tfc/blob/main/src/App.jsx) (App router), [`src/pages/LessonView.jsx`](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/LessonView.jsx) (Lesson experience), [`src/pages/AIAssistant.jsx`](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/AIAssistant.jsx) (AI assistant), [`src/pages/Payment.jsx`](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Payment.jsx) (Payment)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Web application"]
  node_app["App router<br/>[App.jsx]"]
  node_layout["Shared layout<br/>[Layout.jsx]"]
  node_home["Home<br/>[Home.jsx]"]
  node_auth["Account access<br/>[Auth.jsx]"]
end

subgraph group_learning["Language learning"]
  node_language["Language selection"]
  node_levels["Learning levels<br/>[Levels.jsx]"]
  node_catalog["Course catalog<br/>[CourseCatalog.jsx]"]
  node_lesson["Lesson experience<br/>[LessonView.jsx]"]
  node_evaluation["Evaluations<br/>[Evaluation.jsx]"]
  node_course_materials["Course materials"]
end

subgraph group_engagement["Learner services"]
  node_gamification["Gamification<br/>[Gamification.jsx]"]
  node_certifications["Certifications<br/>[Certifications.jsx]"]
  node_assistant["AI assistant<br/>[AIAssistant.jsx]"]
  node_profile["Learner profile<br/>[Profile.jsx]"]
  node_subscription["Subscription<br/>[Subscription.jsx]"]
  node_payment["Payment<br/>[Payment.jsx]"]
  node_settings["Settings<br/>[Settings.jsx]"]
  node_teacher_tracking["Teacher progress tracking"]
end

subgraph group_platform["Data platform"]
  node_frontend_supabase["Supabase client<br/>[supabase.js]"]
  node_backend_api["Backend API<br/>[main.py]"]
end

node_learner(("Learner"))
node_supabase[("Supabase")]
node_ai_service["AI service"]
node_mobile_money["Mobile Money providers"]

node_learner -->|"uses"| node_app
node_app -->|"wraps routes"| node_layout
node_app -->|"routes"| node_home
node_app -->|"routes"| node_auth
node_app -->|"routes"| node_language
node_app -->|"routes"| node_levels
node_app -->|"routes"| node_catalog
node_app -->|"routes"| node_lesson
node_app -->|"routes"| node_evaluation
node_app -->|"routes"| node_gamification
node_app -->|"routes"| node_certifications
node_app -->|"routes"| node_assistant
node_app -->|"routes"| node_subscription
node_app -->|"routes"| node_payment
node_app -->|"routes"| node_profile
node_app -->|"routes"| node_settings
node_lesson -.->|"uses content"| node_course_materials
node_assistant -.->|"assistance"| node_ai_service
node_payment -.->|"payment options"| node_mobile_money
node_frontend_supabase -->|"creates client"| node_supabase
node_backend_api -->|"creates client"| node_supabase

click node_app "https://github.com/djemy488/litangi_tfc/blob/main/src/App.jsx"
click node_layout "https://github.com/djemy488/litangi_tfc/blob/main/src/components/Layout.jsx"
click node_home "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Home.jsx"
click node_auth "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Auth.jsx"
click node_language "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/LanguageSelection.jsx"
click node_levels "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Levels.jsx"
click node_catalog "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/CourseCatalog.jsx"
click node_lesson "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/LessonView.jsx"
click node_evaluation "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Evaluation.jsx"
click node_course_materials "https://github.com/djemy488/litangi_tfc/tree/main/Cours%20PDF"
click node_gamification "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Gamification.jsx"
click node_certifications "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Certifications.jsx"
click node_assistant "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/AIAssistant.jsx"
click node_profile "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Profile.jsx"
click node_subscription "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Subscription.jsx"
click node_payment "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Payment.jsx"
click node_settings "https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Settings.jsx"
click node_teacher_tracking "https://github.com/djemy488/litangi_tfc/tree/main/src/pages"
click node_frontend_supabase "https://github.com/djemy488/litangi_tfc/blob/main/src/lib/supabase.js"
click node_backend_api "https://github.com/djemy488/litangi_tfc/blob/main/backend/app/main.py"

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_layout,node_home,node_auth toneBlue
class node_language,node_levels,node_catalog,node_lesson,node_evaluation,node_course_materials,node_supabase toneAmber
class node_gamification,node_certifications,node_assistant,node_profile,node_subscription,node_payment,node_settings,node_teacher_tracking toneMint
class node_frontend_supabase,node_backend_api toneRose
class node_learner,node_ai_service,node_mobile_money toneIndigo
```

## Components

### Web application

- [App router](https://github.com/djemy488/litangi_tfc/blob/main/src/App.jsx): `src/App.jsx`
- [Shared layout](https://github.com/djemy488/litangi_tfc/blob/main/src/components/Layout.jsx): `src/components/Layout.jsx`
- [Home](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Account access](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Auth.jsx): `src/pages/Auth.jsx`

### Language learning

- [Language selection](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/LanguageSelection.jsx): `src/pages/LanguageSelection.jsx`
- [Learning levels](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Levels.jsx): `src/pages/Levels.jsx`
- [Course catalog](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/CourseCatalog.jsx): `src/pages/CourseCatalog.jsx`
- [Lesson experience](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/LessonView.jsx): `src/pages/LessonView.jsx`
- [Evaluations](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Evaluation.jsx): `src/pages/Evaluation.jsx`
- [Course materials](https://github.com/djemy488/litangi_tfc/tree/main/Cours%20PDF): `Cours PDF`

### Learner services

- [Gamification](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Gamification.jsx): `src/pages/Gamification.jsx`
- [Certifications](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Certifications.jsx): `src/pages/Certifications.jsx`
- [AI assistant](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/AIAssistant.jsx): `src/pages/AIAssistant.jsx`
- [Learner profile](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`
- [Subscription](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Subscription.jsx): `src/pages/Subscription.jsx`
- [Payment](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Payment.jsx): `src/pages/Payment.jsx`
- [Settings](https://github.com/djemy488/litangi_tfc/blob/main/src/pages/Settings.jsx): `src/pages/Settings.jsx`
- [Teacher progress tracking](https://github.com/djemy488/litangi_tfc/tree/main/src/pages): `src/pages`

### Data platform

- [Supabase client](https://github.com/djemy488/litangi_tfc/blob/main/src/lib/supabase.js): `src/lib/supabase.js`
- [Backend API](https://github.com/djemy488/litangi_tfc/blob/main/backend/app/main.py): `backend/app/main.py`

### Other components

- **Learner**
- **Supabase**
- **AI service**
- **Mobile Money providers**

## Connections

- Learner → App router: uses
- App router → Shared layout: wraps routes
- App router → Home: routes
- App router → Account access: routes
- App router → Language selection: routes
- App router → Learning levels: routes
- App router → Course catalog: routes
- App router → Lesson experience: routes
- App router → Evaluations: routes
- App router → Gamification: routes
- App router → Certifications: routes
- App router → AI assistant: routes
- App router → Subscription: routes
- App router → Payment: routes
- App router → Learner profile: routes
- App router → Settings: routes
- Lesson experience → Course materials: uses content
- AI assistant → AI service: assistance
- Payment → Mobile Money providers: payment options
- Supabase client → Supabase: creates client
- Backend API → Supabase: creates client