# 29nls/macengweb architecture

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

- Interactive diagram: https://gitdiagram.com/29nls/macengweb
- Repository: https://github.com/29nls/macengweb

## Overview

Portfolio V5 is a public portfolio site with a protected admin dashboard. Visitors browse profile and portfolio content, open project details, and can submit comments; admins authenticate before managing projects, certificates, and comments. The README documents these capabilities, while sampled source confirms routing, project filtering, public portfolio data loading, and admin project/comment operations. Other page-to-component wiring is not shown, so those links are omitted. Supabase is the documented backend for authentication, data, and image storage.

Main entry points: [`src/App.jsx`](https://github.com/29nls/macengweb/blob/main/src/App.jsx) (App Router), [`src/supabase.js`](https://github.com/29nls/macengweb/blob/main/src/supabase.js) (Supabase Client), [`src/Pages/Dashboard.jsx`](https://github.com/29nls/macengweb/blob/main/src/Pages/Dashboard.jsx) (Dashboard), [`src/Pages/Portofolio.jsx`](https://github.com/29nls/macengweb/blob/main/src/Pages/Portofolio.jsx) (Projects, Certificates, Stack)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Portfolio"]
  node_home["Home<br/>[Home.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_portfolio["Projects, Certificates, Stack<br/>[Portofolio.jsx]"]
  node_project_detail["Project Details<br/>[ProjectDetail.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
  node_public_comments["Comment System<br/>[Commentar.jsx]"]
end

subgraph group_admin["Admin Dashboard"]
  node_login["Login<br/>[Login.jsx]"]
  node_guard["Protected Route<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_project_admin["Project Management<br/>[Projects.jsx]"]
  node_certificate_admin["Certificate Management<br/>[Certificates.jsx]"]
  node_comment_admin["Comment Moderation<br/>[Comments.jsx]"]
end

subgraph group_backend["Supabase Backend"]
  node_supabase_client["Supabase Client<br/>[supabase.js]"]
  node_supabase[("Supabase Auth, DB, Storage")]
end

subgraph group_shared["Shared Runtime"]
  node_app["App Router<br/>[App.jsx]"]
  node_project_rules["Project Filtering and Order<br/>[projects.js]"]
end

node_visitor(("Visitor"))
node_admin_actor(("Admin"))

node_visitor -->|"opens site"| node_app
node_admin_actor -->|"opens dashboard"| node_app
node_app -->|"renders route"| node_home
node_app -->|"renders route"| node_about
node_app -->|"renders route"| node_portfolio
node_app -->|"routes by slug"| node_project_detail
node_app -->|"renders section"| node_contact
node_app -->|"renders route"| node_login
node_app -->|"protects dashboard"| node_guard
node_guard -->|"allows access"| node_dashboard
node_portfolio -->|"fetches portfolio data"| node_supabase_client
node_portfolio -->|"filters and orders"| node_project_rules
node_project_detail -->|"filters project data"| node_project_rules
node_project_detail -->|"loads project"| node_supabase_client
node_login -->|"authenticates"| node_supabase_client
node_guard -->|"checks access"| node_supabase_client
node_dashboard -->|"routes to projects"| node_project_admin
node_dashboard -->|"routes to certificates"| node_certificate_admin
node_dashboard -->|"routes to comments"| node_comment_admin
node_project_admin -->|"manages projects"| node_supabase_client
node_certificate_admin -->|"manages certificates"| node_supabase_client
node_comment_admin -->|"moderates comments"| node_supabase_client
node_supabase_client -->|"sends requests"| node_supabase

click node_app "https://github.com/29nls/macengweb/blob/main/src/App.jsx"
click node_home "https://github.com/29nls/macengweb/blob/main/src/Pages/Home.jsx"
click node_about "https://github.com/29nls/macengweb/blob/main/src/Pages/About.jsx"
click node_portfolio "https://github.com/29nls/macengweb/blob/main/src/Pages/Portofolio.jsx"
click node_project_detail "https://github.com/29nls/macengweb/blob/main/src/components/ProjectDetail.jsx"
click node_contact "https://github.com/29nls/macengweb/blob/main/src/Pages/Contact.jsx"
click node_public_comments "https://github.com/29nls/macengweb/blob/main/src/components/Commentar.jsx"
click node_login "https://github.com/29nls/macengweb/blob/main/src/Pages/Login.jsx"
click node_guard "https://github.com/29nls/macengweb/blob/main/src/components/ProtectedRoute.jsx"
click node_dashboard "https://github.com/29nls/macengweb/blob/main/src/Pages/Dashboard.jsx"
click node_project_admin "https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Projects.jsx"
click node_certificate_admin "https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Certificates.jsx"
click node_comment_admin "https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Comments.jsx"
click node_project_rules "https://github.com/29nls/macengweb/blob/main/src/utils/projects.js"
click node_supabase_client "https://github.com/29nls/macengweb/blob/main/src/supabase.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_home,node_about,node_portfolio,node_project_detail,node_contact,node_public_comments toneBlue
class node_login,node_guard,node_dashboard,node_project_admin,node_certificate_admin,node_comment_admin toneAmber
class node_supabase_client,node_supabase toneMint
class node_app,node_project_rules toneRose
class node_visitor,node_admin_actor toneIndigo
```

## Components

### Public Portfolio

- [Home](https://github.com/29nls/macengweb/blob/main/src/Pages/Home.jsx): `src/Pages/Home.jsx`
- [About](https://github.com/29nls/macengweb/blob/main/src/Pages/About.jsx): `src/Pages/About.jsx`
- [Projects, Certificates, Stack](https://github.com/29nls/macengweb/blob/main/src/Pages/Portofolio.jsx): `src/Pages/Portofolio.jsx`
- [Project Details](https://github.com/29nls/macengweb/blob/main/src/components/ProjectDetail.jsx): `src/components/ProjectDetail.jsx`
- [Contact](https://github.com/29nls/macengweb/blob/main/src/Pages/Contact.jsx): `src/Pages/Contact.jsx`
- [Comment System](https://github.com/29nls/macengweb/blob/main/src/components/Commentar.jsx): `src/components/Commentar.jsx`

### Admin Dashboard

- [Login](https://github.com/29nls/macengweb/blob/main/src/Pages/Login.jsx): `src/Pages/Login.jsx`
- [Protected Route](https://github.com/29nls/macengweb/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Dashboard](https://github.com/29nls/macengweb/blob/main/src/Pages/Dashboard.jsx): `src/Pages/Dashboard.jsx`
- [Project Management](https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Projects.jsx): `src/Pages/dashboard/Projects.jsx`
- [Certificate Management](https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Certificates.jsx): `src/Pages/dashboard/Certificates.jsx`
- [Comment Moderation](https://github.com/29nls/macengweb/blob/main/src/Pages/dashboard/Comments.jsx): `src/Pages/dashboard/Comments.jsx`

### Supabase Backend

- [Supabase Client](https://github.com/29nls/macengweb/blob/main/src/supabase.js): `src/supabase.js`
- **Supabase Auth, DB, Storage**

### Shared Runtime

- [App Router](https://github.com/29nls/macengweb/blob/main/src/App.jsx): `src/App.jsx`
- [Project Filtering and Order](https://github.com/29nls/macengweb/blob/main/src/utils/projects.js): `src/utils/projects.js`

### Other components

- **Visitor**
- **Admin**

## Connections

- Visitor → App Router: opens site
- Admin → App Router: opens dashboard
- App Router → Home: renders route
- App Router → About: renders route
- App Router → Projects, Certificates, Stack: renders route
- App Router → Project Details: routes by slug
- App Router → Contact: renders section
- App Router → Login: renders route
- App Router → Protected Route: protects dashboard
- Protected Route → Dashboard: allows access
- Projects, Certificates, Stack → Supabase Client: fetches portfolio data
- Projects, Certificates, Stack → Project Filtering and Order: filters and orders
- Project Details → Project Filtering and Order: filters project data
- Project Details → Supabase Client: loads project
- Login → Supabase Client: authenticates
- Protected Route → Supabase Client: checks access
- Dashboard → Project Management: routes to projects
- Dashboard → Certificate Management: routes to certificates
- Dashboard → Comment Moderation: routes to comments
- Project Management → Supabase Client: manages projects
- Certificate Management → Supabase Client: manages certificates
- Comment Moderation → Supabase Client: moderates comments
- Supabase Client → Supabase Auth, DB, Storage: sends requests