How 29nls/macengweb works
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: App.jsx App Router · supabase.js Supabase Client · Dashboard.jsx Dashboard · Portofolio.jsx Projects, Certificates, Stack
Components 18
Public Portfolio
- Home
src/Pages/Home.jsx - About
src/Pages/About.jsx - Projects, Certificates, Stack
src/Pages/Portofolio.jsx - Project Details
src/components/ProjectDetail.jsx - Contact
src/Pages/Contact.jsx - Comment System
src/components/Commentar.jsx
Admin Dashboard
- Login
src/Pages/Login.jsx - Protected Route
src/components/ProtectedRoute.jsx - Dashboard
src/Pages/Dashboard.jsx - Project Management
src/Pages/dashboard/Projects.jsx - Certificate Management
src/Pages/dashboard/Certificates.jsx - Comment Moderation
src/Pages/dashboard/Comments.jsx
Supabase Backend
- Supabase Client
src/supabase.js - Supabase Auth, DB, Storage
Shared Runtime
- App Router
src/App.jsx - Project Filtering and Order
src/utils/projects.js
Other components
- Visitor
- Admin
Connections 23
- 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