# razwanalb/dpi-cst architecture

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

- Interactive diagram: https://gitdiagram.com/razwanalb/dpi-cst
- Repository: https://github.com/razwanalb/dpi-cst

## Overview

1. **Overall shape**
   - This is a **single-page React application** built with **TypeScript** and **Vite**.
   - The repo is entirely client-side from the file tree shown: there is no custom backend server code here, so the app’s state, routing, and data access are handled from the browser.

2. **App bootstrap layer**
   - `index.html`, `index.tsx`, and `App.tsx` form the entry path.
   - `index.tsx` mounts the React tree, `App.tsx` likely defines the top-level route/layout composition, and Vite handles development/build tooling.

3. **Public site shell**
   - `components/Header.tsx` and `components/Footer.tsx` define the persistent frame around most public pages.
   - This suggests a shared site chrome with page content swapped in the center via client-side routing.

4. **Public-facing content area**
   - The `pages/` folder contains the main public site sections: `HomePage`, `AboutPage`, `AcademicPage`, `FacultyPage`, `EventsPage`, `EventDetailPage`, `NoticePage`, `ResultsPage`, `ContactPage`, and `GuestTeacherPage`.
   - These pages represent the informational and browsing layer of the app, likely intended for students, staff, and visitors.

5. **Event and detail flow**
   - `EventsPage.tsx` and `EventDetailPage.tsx` imply a master/detail pattern: a list or feed of events with a separate detail view for a selected event.
   - This is a common data flow in the app: browse on a collection page, then drill into a single record page.

6. **Authentication and access control**
   - `components/AuthContext.tsx` centralizes auth state and exposes it to the rest of the app.
   - `components/ProtectedRoute.tsx` enforces route-level access control, which indicates some routes are restricted to authenticated users.

7. **Admin boundary**
   - The `pages/admin/` directory is a distinct subsystem for content management and configuration.
   - `AdminLayout.tsx` provides the admin shell, while the feature pages cover `Dashboard`, `ManageAcademic`, `ManageEvents`, `ManageFaculty`, `ManageNotices`, `ManageResults`, `ManageStudents`, `AcademicResources`, and `SiteSettings`.

8. **Admin data management responsibilities**
   - The admin pages suggest the system is a CMS-like school/college site where admins can create, update, and delete academic content, notices, results, events, faculty entries, and student records.
   - `AdminPanelPage.tsx` and `pages/admin/AdminDashboardPage.tsx` appear to be the top-level admin entry points.

9. **Shared interaction components**
   - `components/ConfirmModal.tsx` is likely used for delete/critical-action confirmation in the admin workflows.
   - `components/TeacherCard.tsx` is a reusable display component, probably used in faculty/teacher listing views.

10. **External data/backend boundary**
   - `supabase.ts` is the clearest integration point to an external backend service.
   - Architecturally, this is the app’s data boundary: pages and context consume a Supabase client/module for auth and CRUD operations instead of talking directly to an in-repo server.

11. **Configuration and runtime**
   - `Env.env` and the README’s `.env.local` note indicate runtime configuration is environment-driven.
   - The README also mentions a `GEMINI_API_KEY`, so the project was scaffolded in an AI Studio context and may have AI-related runtime configuration, though the visible structure is still primarily a school portal/admin app.

12. **Repository artifacts**
   - `metadata.json` and `migrated_prompt_history/` are not part of the runtime architecture; they look like project metadata or migration history from the AI Studio workflow.
   - `package.json`, `vite.config.ts`, and `tsconfig.json` define the build/runtime toolchain rather than application behavior.

13. **High-level data flow**
   - Users enter through the public pages, authenticated users are routed through `AuthContext` and `ProtectedRoute`, and admins use the admin subsystem to manage site data.
   - Content/state changes likely persist through Supabase and then reappear in the public pages that render the same underlying records.

14. **Diagram-friendly summary**
   - The key boundaries to draw are: **browser app shell**, **public content pages**, **authentication/access control**, **admin CMS area**, and **Supabase/external backend**.
   - The app is best understood as a **role-based, content-managed school website** rather than a general-purpose app framework.

Main entry points: [`App.tsx`](https://github.com/razwanalb/dpi-cst/blob/main/App.tsx) (App shell), [`supabase.ts`](https://github.com/razwanalb/dpi-cst/blob/main/supabase.ts) (Supabase), [`pages/EventsPage.tsx`](https://github.com/razwanalb/dpi-cst/blob/main/pages/EventsPage.tsx) (Events), [`components/ProtectedRoute.tsx`](https://github.com/razwanalb/dpi-cst/blob/main/components/ProtectedRoute.tsx) (Protected route)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["Bootstrap"]
  node_index_html["index.html<br/>entry html<br/>[index.html]"]
  node_index_tsx["index.tsx<br/>react entry<br/>[index.tsx]"]
  node_app_tsx["App shell<br/>root component<br/>[App.tsx]"]
end

subgraph group_public["Public Site"]
  node_header["Header<br/>site chrome<br/>[Header.tsx]"]
  node_footer["Footer<br/>site chrome<br/>[Footer.tsx]"]
  node_home_page["Home<br/>landing page<br/>[HomePage.tsx]"]
  node_content_pages["Content pages<br/>public pages"]
  node_events_page["Events<br/>listing page<br/>[EventsPage.tsx]"]
  node_event_detail["Event detail<br/>detail page"]
  node_teacher_card["Teacher card<br/>ui card<br/>[TeacherCard.tsx]"]
end

subgraph group_auth["Access Control"]
  node_auth_context(("Auth context<br/>auth state<br/>[AuthContext.tsx]"))
  node_protected_route(("Protected route<br/>route guard<br/>[ProtectedRoute.tsx]"))
  node_login_page["Login<br/>auth page<br/>[LoginPage.tsx]"]
end

subgraph group_admin["Admin CMS"]
  node_admin_panel["Admin panel<br/>admin entry<br/>[AdminPanelPage.tsx]"]
  node_admin_layout["Admin layout<br/>admin shell<br/>[AdminLayout.tsx]"]
  node_admin_dashboard["Dashboard<br/>admin page"]
  node_admin_content["Content tools<br/>admin pages"]
  node_confirm_modal{{"Confirm modal<br/>ui dialog<br/>[ConfirmModal.tsx]"}}
end

subgraph group_data["Backend Boundary"]
  node_supabase[("Supabase<br/>data client<br/>[supabase.ts]")]
  node_env["Env config<br/>runtime config<br/>[Env.env]"]
end

node_index_html -->|"loads"| node_index_tsx
node_index_tsx -->|"renders"| node_app_tsx
node_app_tsx -->|"uses"| node_header
node_app_tsx -->|"uses"| node_footer
node_app_tsx -->|"routes to"| node_home_page
node_app_tsx -->|"routes to"| node_content_pages
node_app_tsx -->|"routes to"| node_events_page
node_events_page -->|"drills into"| node_event_detail
node_app_tsx -->|"routes to"| node_login_page
node_auth_context -->|"auth via"| node_supabase
node_protected_route -->|"reads"| node_auth_context
node_app_tsx -->|"guards"| node_protected_route
node_protected_route -->|"permits"| node_admin_panel
node_admin_panel -->|"wraps"| node_admin_layout
node_admin_layout -->|"navigates to"| node_admin_dashboard
node_admin_layout -->|"navigates to"| node_admin_content
node_admin_content -->|"uses"| node_confirm_modal
node_content_pages -->|"uses"| node_teacher_card
node_admin_content -->|"crud via"| node_supabase
node_content_pages -->|"reads via"| node_supabase
node_events_page -->|"reads via"| node_supabase
node_event_detail -->|"reads via"| node_supabase
node_app_tsx -->|"config via"| node_env
node_supabase -->|"configured by"| node_env

click node_index_html "https://github.com/razwanalb/dpi-cst/blob/main/index.html"
click node_index_tsx "https://github.com/razwanalb/dpi-cst/blob/main/index.tsx"
click node_app_tsx "https://github.com/razwanalb/dpi-cst/blob/main/App.tsx"
click node_header "https://github.com/razwanalb/dpi-cst/blob/main/components/Header.tsx"
click node_footer "https://github.com/razwanalb/dpi-cst/blob/main/components/Footer.tsx"
click node_home_page "https://github.com/razwanalb/dpi-cst/blob/main/pages/HomePage.tsx"
click node_events_page "https://github.com/razwanalb/dpi-cst/blob/main/pages/EventsPage.tsx"
click node_event_detail "https://github.com/razwanalb/dpi-cst/blob/main/pages/EventDetailPage.tsx"
click node_auth_context "https://github.com/razwanalb/dpi-cst/blob/main/components/AuthContext.tsx"
click node_protected_route "https://github.com/razwanalb/dpi-cst/blob/main/components/ProtectedRoute.tsx"
click node_login_page "https://github.com/razwanalb/dpi-cst/blob/main/pages/LoginPage.tsx"
click node_admin_panel "https://github.com/razwanalb/dpi-cst/blob/main/pages/AdminPanelPage.tsx"
click node_admin_layout "https://github.com/razwanalb/dpi-cst/blob/main/pages/admin/AdminLayout.tsx"
click node_admin_dashboard "https://github.com/razwanalb/dpi-cst/blob/main/pages/admin/AdminDashboardPage.tsx"
click node_confirm_modal "https://github.com/razwanalb/dpi-cst/blob/main/components/ConfirmModal.tsx"
click node_teacher_card "https://github.com/razwanalb/dpi-cst/blob/main/components/TeacherCard.tsx"
click node_supabase "https://github.com/razwanalb/dpi-cst/blob/main/supabase.ts"
click node_env "https://github.com/razwanalb/dpi-cst/blob/main/Env.env"

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_index_html,node_index_tsx,node_app_tsx toneBlue
class node_header,node_footer,node_home_page,node_content_pages,node_events_page,node_event_detail,node_teacher_card toneAmber
class node_auth_context,node_protected_route,node_login_page toneMint
class node_admin_panel,node_admin_layout,node_admin_dashboard,node_admin_content,node_confirm_modal toneRose
class node_supabase,node_env toneIndigo
```

## Components

### Bootstrap

Client entry and app composition

- [index.html](https://github.com/razwanalb/dpi-cst/blob/main/index.html): entry html · Vite HTML entry point · `index.html`
- [index.tsx](https://github.com/razwanalb/dpi-cst/blob/main/index.tsx): react entry · Mounts the React tree into the page · `index.tsx`
- [App shell](https://github.com/razwanalb/dpi-cst/blob/main/App.tsx): root component · Top-level app composition and routing · `App.tsx`

### Public Site

Public-facing pages and shared chrome

- [Header](https://github.com/razwanalb/dpi-cst/blob/main/components/Header.tsx): site chrome · Shared public navigation shell · `components/Header.tsx`
- [Footer](https://github.com/razwanalb/dpi-cst/blob/main/components/Footer.tsx): site chrome · Shared page footer · `components/Footer.tsx`
- [Home](https://github.com/razwanalb/dpi-cst/blob/main/pages/HomePage.tsx): landing page · Public landing view · `pages/HomePage.tsx`
- **Content pages**: public pages · About, academic, faculty, contact, notices, results, and guest teacher views
- [Events](https://github.com/razwanalb/dpi-cst/blob/main/pages/EventsPage.tsx): listing page · Browse events collection · `pages/EventsPage.tsx`
- [Event detail](https://github.com/razwanalb/dpi-cst/blob/main/pages/EventDetailPage.tsx): detail page · Single event drill-down view · `pages/EventDetailPage.tsx`
- [Teacher card](https://github.com/razwanalb/dpi-cst/blob/main/components/TeacherCard.tsx): ui card · Reusable faculty presentation component · `components/TeacherCard.tsx`

### Access Control

Authentication and route gating

- [Auth context](https://github.com/razwanalb/dpi-cst/blob/main/components/AuthContext.tsx): auth state · Central authentication state provider · `components/AuthContext.tsx`
- [Protected route](https://github.com/razwanalb/dpi-cst/blob/main/components/ProtectedRoute.tsx): route guard · Restricts access to authenticated users · `components/ProtectedRoute.tsx`
- [Login](https://github.com/razwanalb/dpi-cst/blob/main/pages/LoginPage.tsx): auth page · User sign-in entry point · `pages/LoginPage.tsx`

### Admin CMS

Restricted content-management area

- [Admin panel](https://github.com/razwanalb/dpi-cst/blob/main/pages/AdminPanelPage.tsx): admin entry · Top-level admin landing entry · `pages/AdminPanelPage.tsx`
- [Admin layout](https://github.com/razwanalb/dpi-cst/blob/main/pages/admin/AdminLayout.tsx): admin shell · Shared admin navigation and framing · `pages/admin/AdminLayout.tsx`
- [Dashboard](https://github.com/razwanalb/dpi-cst/blob/main/pages/admin/AdminDashboardPage.tsx): admin page · Admin overview and activity hub · `pages/admin/AdminDashboardPage.tsx`
- **Content tools**: admin pages · Academic, events, faculty, notices, results, students, resources, and settings management
- [Confirm modal](https://github.com/razwanalb/dpi-cst/blob/main/components/ConfirmModal.tsx): ui dialog · Shared destructive-action confirmation · `components/ConfirmModal.tsx`

### Backend Boundary

External data and runtime configuration

- [Supabase](https://github.com/razwanalb/dpi-cst/blob/main/supabase.ts): data client · External auth and CRUD boundary · `supabase.ts`
- [Env config](https://github.com/razwanalb/dpi-cst/blob/main/Env.env): runtime config · Environment-driven secrets and settings · `Env.env`

## Connections

- index.html → index.tsx: loads · HTML bootstraps the React entry
- index.tsx → App shell: renders · Entry mounts the app root
- App shell → Header: uses · Public shell includes shared header
- App shell → Footer: uses · Public shell includes shared footer
- App shell → Home: routes to · Landing route composition
- App shell → Content pages: routes to · Public informational sections
- App shell → Events: routes to · Events listing route
- Events → Event detail: drills into · Collection to single-record flow
- App shell → Login: routes to · Authentication entry route
- Auth context → Supabase: auth via · Auth state depends on external client
- Protected route → Auth context: reads · Route guard checks current auth state
- App shell → Protected route: guards · Restricted admin routing
- Protected route → Admin panel: permits · Authorized access to admin entry
- Admin panel → Admin layout: wraps · Admin area uses a shared shell
- Admin layout → Dashboard: navigates to · Admin shell hosts the dashboard
- Admin layout → Content tools: navigates to · Admin shell hosts management sections
- Content tools → Confirm modal: uses · Critical actions use confirmation
- Content pages → Teacher card: uses · Faculty views reuse teacher presentation
- Content tools → Supabase: crud via · Admin writes and reads managed content
- Content pages → Supabase: reads via · Public pages render persisted content
- Events → Supabase: reads via · Event list comes from backend data
- Event detail → Supabase: reads via · Single event data comes from backend data
- App shell → Env config: config via · Runtime settings and secrets come from environment
- Supabase → Env config: configured by · Client setup depends on environment variables