# kennethkpn/devconnect architecture

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

- Interactive diagram: https://gitdiagram.com/kennethkpn/devconnect
- Repository: https://github.com/kennethkpn/devconnect

## Overview

Devconnect est une communauté publique de développeurs : les visiteurs découvrent et filtrent les discussions, puis les membres peuvent s’authentifier, publier, répondre, signaler et gérer leur profil. Les outils de modération forment une branche distincte, adossée aux rôles et fonctions décrits dans la migration. L’interface et plusieurs étapes métier sont réunies dans App.tsx. Le graphe s’appuie sur les extraits et les capacités documentées ; les détails des appels métier non montrés ne sont pas décomposés davantage.

Main entry points: [`src/App.tsx`](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx) (Routes et écrans), [`src/features/auth/AuthProvider.tsx`](https://github.com/kennethkpn/devconnect/blob/main/src/features/auth/AuthProvider.tsx) (Session et rôles), [`src/lib/supabase/client.ts`](https://github.com/kennethkpn/devconnect/blob/main/src/lib/supabase/client.ts) (Client Supabase), [`src/main.tsx`](https://github.com/kennethkpn/devconnect/blob/main/src/main.tsx) (Montage de l’application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entrée et interface"]
  node_bootstrap["Montage de l’application<br/>[main.tsx]"]
  node_app["Routes et écrans<br/>[App.tsx]"]
  node_frame["Cadre et navigation<br/>[PageFrame.tsx]"]
end

subgraph group_community["Échanges communautaires"]
  node_browse["Découverte et recherche<br/>[App.tsx]"]
  node_posts["Publications et discussions<br/>[App.tsx]"]
  node_responses["Réponses et signalements<br/>[App.tsx]"]
  node_profiles["Profils membres<br/>[App.tsx]"]
  node_admin["Administration et modération<br/>[App.tsx]"]
end

subgraph group_identity["Identité et accès"]
  node_authui["Écrans d’authentification<br/>[App.tsx]"]
  node_authstate["Session et rôles<br/>[AuthProvider.tsx]"]
end

subgraph group_data["Données et modération"]
  node_client["Client Supabase<br/>[client.ts]"]
  node_types["Types du domaine<br/>[database.ts]"]
  node_schema[("Schéma, règles et modération")]
end

node_visitor(("Visiteur ou membre"))
node_supabase[("Supabase Auth et PostgreSQL")]

node_visitor -->|"ouvre l’application"| node_bootstrap
node_bootstrap -->|"monte"| node_app
node_bootstrap -->|"fournit le contexte"| node_authstate
node_app -->|"affiche dans"| node_frame
node_app -->|"présente"| node_browse
node_app -->|"gère"| node_posts
node_app -->|"gère"| node_responses
node_app -->|"gère"| node_profiles
node_app -->|"présente"| node_authui
node_app -->|"présente"| node_admin
node_frame -->|"lit la session"| node_authstate
node_frame -->|"déclenche la déconnexion"| node_client
node_authstate -->|"lit session et rôles"| node_client
node_client -->|"utilise les types"| node_types
node_client -->|"se connecte à"| node_supabase
node_schema -->|"définit tables et règles"| node_supabase
node_authstate -->|"lit les rôles"| node_schema
node_admin -->|"s’appuie sur la modération"| node_schema

click node_bootstrap "https://github.com/kennethkpn/devconnect/blob/main/src/main.tsx"
click node_app "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_frame "https://github.com/kennethkpn/devconnect/blob/main/src/components/layout/PageFrame.tsx"
click node_browse "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_posts "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_responses "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_profiles "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_authui "https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx"
click node_authstate "https://github.com/kennethkpn/devconnect/blob/main/src/features/auth/AuthProvider.tsx"
click node_client "https://github.com/kennethkpn/devconnect/blob/main/src/lib/supabase/client.ts"
click node_types "https://github.com/kennethkpn/devconnect/blob/main/src/types/database.ts"
click node_schema "https://github.com/kennethkpn/devconnect/blob/main/supabase/migrations/20261114000100_initial_mvp.sql"
click node_admin "https://github.com/kennethkpn/devconnect/blob/main/src/App.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_bootstrap,node_app,node_frame toneBlue
class node_browse,node_posts,node_responses,node_profiles,node_admin,node_supabase toneAmber
class node_authui,node_authstate toneMint
class node_client,node_types,node_schema toneRose
class node_visitor toneIndigo
```

## Components

### Entrée et interface

- [Montage de l’application](https://github.com/kennethkpn/devconnect/blob/main/src/main.tsx): `src/main.tsx`
- [Routes et écrans](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Cadre et navigation](https://github.com/kennethkpn/devconnect/blob/main/src/components/layout/PageFrame.tsx): `src/components/layout/PageFrame.tsx`

### Échanges communautaires

- [Découverte et recherche](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Publications et discussions](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Réponses et signalements](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Profils membres](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Administration et modération](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`

### Identité et accès

- [Écrans d’authentification](https://github.com/kennethkpn/devconnect/blob/main/src/App.tsx): `src/App.tsx`
- [Session et rôles](https://github.com/kennethkpn/devconnect/blob/main/src/features/auth/AuthProvider.tsx): `src/features/auth/AuthProvider.tsx`

### Données et modération

- [Client Supabase](https://github.com/kennethkpn/devconnect/blob/main/src/lib/supabase/client.ts): `src/lib/supabase/client.ts`
- [Types du domaine](https://github.com/kennethkpn/devconnect/blob/main/src/types/database.ts): `src/types/database.ts`
- [Schéma, règles et modération](https://github.com/kennethkpn/devconnect/blob/main/supabase/migrations/20261114000100_initial_mvp.sql): `supabase/migrations/20261114000100_initial_mvp.sql`

### Other components

- **Visiteur ou membre**
- **Supabase Auth et PostgreSQL**

## Connections

- Visiteur ou membre → Montage de l’application: ouvre l’application (evidence: `README.md`)
- Montage de l’application → Routes et écrans: monte (evidence: `src/main.tsx`)
- Montage de l’application → Session et rôles: fournit le contexte (evidence: `src/main.tsx`)
- Routes et écrans → Cadre et navigation: affiche dans (evidence: `src/App.tsx`)
- Routes et écrans → Découverte et recherche: présente (evidence: `README.md`)
- Routes et écrans → Publications et discussions: gère (evidence: `README.md`)
- Routes et écrans → Réponses et signalements: gère (evidence: `README.md`)
- Routes et écrans → Profils membres: gère (evidence: `README.md`)
- Routes et écrans → Écrans d’authentification: présente (evidence: `README.md`)
- Routes et écrans → Administration et modération: présente (evidence: `README.md`)
- Cadre et navigation → Session et rôles: lit la session (evidence: `src/components/layout/PageFrame.tsx`)
- Cadre et navigation → Client Supabase: déclenche la déconnexion (evidence: `src/components/layout/PageFrame.tsx`)
- Session et rôles → Client Supabase: lit session et rôles (evidence: `src/features/auth/AuthProvider.tsx`)
- Client Supabase → Types du domaine: utilise les types (evidence: `src/lib/supabase/client.ts`)
- Client Supabase → Supabase Auth et PostgreSQL: se connecte à (evidence: `README.md`)
- Schéma, règles et modération → Supabase Auth et PostgreSQL: définit tables et règles (evidence: `README.md`)
- Session et rôles → Schéma, règles et modération: lit les rôles (evidence: `src/features/auth/AuthProvider.tsx`)
- Administration et modération → Schéma, règles et modération: s’appuie sur la modération (evidence: `README.md`)