# lethinkj/marvel-slice architecture

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

- Interactive diagram: https://gitdiagram.com/lethinkj/marvel-slice
- Repository: https://github.com/lethinkj/marvel-slice

## Overview

#### Purpose and Runtime
Marvel Slice is a React/Vite education and LMS content site with a public catalog, dynamic CMS pages, submission/chat features, and a separate admin dashboard. It runs as a Vite SPA, deployed to Vercel with SPA rewrites; Supabase supplies PostgreSQL, REST access, and Storage. Entry/bootstrap paths: `src/main.jsx`, `src/App.jsx`, `vercel.json`.

#### Application Routing Boundary
`src/App.jsx` separates public routes from `/admin/*`. Public pages cover home, courses and course detail, services/training, blog, career/contact, legal, upcoming classes, and dynamic navigation pages. The admin router, auth provider, protected layout, and editor routes are centered in `src/admin/Admin.jsx`, `src/admin/context/AuthContext.jsx`, and `src/admin/layout/AdminLayout.jsx`.

#### Public Content Delivery
Public page components compose DB-backed content into reusable site chrome and sections. Home renders configurable sections; course detail renders course metadata and related content; `NavPage` resolves arbitrary navigation-backed pages. Shared navigation/footer fetch settings and navigation tree data. Key paths: `src/pages/Home.jsx`, `src/pages/CourseDetail.jsx`, `src/pages/NavPage.jsx`, `src/components/layout/Header.jsx`, `src/components/ui/SectionRenderer.jsx`.

#### Data Access and Content Model
The browser connects directly to Supabase through a client configured from Vite environment variables. React Query-oriented hooks encapsulate fetch/mutation behavior for courses, blog, services, training, nav, and site data. The relational schema supports CMS settings/navigation, course relations/tags, blog relations, submissions, chat, services, training, jobs, and legal content. Core paths: `src/lib/supabaseClient.js`, `src/hooks/useSupabase.js`, `src/hooks/useBlog.js`, `schema.sql`, `supabase/migrations`.

#### Administrative CMS
The admin application manages both structured entities and page-section JSON/content: courses, blog, nav, home, services, training, careers, media, site settings, and inbound submissions. It relies on a client-side email/password hash check against admin profiles and persists its session in localStorage; this is an explicit security boundary rather than Supabase Auth. Representative paths: `src/admin/pages/CourseEditor.jsx`, `src/admin/pages/HomePageEditor.jsx`, `src/admin/pages/BlogPostEditor.jsx`, `src/admin/pages/MediaLibrary.jsx`, `src/admin/components/ImageUploader.jsx`.

#### User Interaction and Server Endpoints
Most writes go from the SPA directly to Supabase. Form/contact and career submission flows additionally use Vercel serverless API handlers, separating email/reply or submission-side behavior from the static SPA. Embedded chat and job-application UI are client features backed by corresponding Supabase tables/migrations. Paths: `api/submit-contact.js`, `api/submit-career.js`, `api/admin-reply.js`, `src/components/chat/ChatWidget.jsx`, `src/components/apply/JobApplyModal.jsx`.

#### Data Provisioning and Migration Assets
Database setup is rooted in the main SQL schema plus incremental Supabase migrations. JSON exports and scripts provide development/restore/seed pipelines, especially for course and page content; they are operational inputs rather than production runtime sources. Paths: `schema.sql`, `services-schema.sql`, `training-schema.sql`, `scripts/seed-all.js`, `data/courses/courses_raw.json`.

Main entry points: [`src/pages/Home.jsx`](https://github.com/lethinkj/marvel-slice/blob/master/src/pages/Home.jsx) (Public pages), [`src/lib/supabaseClient.js`](https://github.com/lethinkj/marvel-slice/blob/master/src/lib/supabaseClient.js) (Supabase browser client), [`src/App.jsx`](https://github.com/lethinkj/marvel-slice/blob/master/src/App.jsx) (Application router), [`src/admin/Admin.jsx`](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/Admin.jsx) (Admin application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public SPA"]
  node_vite["Vite SPA bootstrap<br/>React/Vite<br/>[main.jsx]"]
  node_router["Application router<br/>route boundary<br/>[App.jsx]"]
  node_public_pages["Public pages<br/>page components<br/>[Home.jsx]"]
  node_course_detail["Course detail<br/>content page<br/>[CourseDetail.jsx]"]
  node_nav_page["Dynamic navigation page<br/>content page<br/>[NavPage.jsx]"]
  node_site_chrome["Site chrome &amp; sections<br/>shared UI<br/>[Header.jsx]"]
  node_section_renderer["Section renderer<br/>CMS section UI"]
  node_interaction_ui["Chat &amp; job application<br/>client features<br/>[ChatWidget.jsx]"]
end

subgraph group_admin["Admin CMS"]
  node_admin_router["Admin application<br/>admin router<br/>[Admin.jsx]"]
  node_admin_auth["Admin session check<br/>client auth boundary<br/>[AuthContext.jsx]"]
  node_admin_layout["Protected admin layout<br/>admin shell<br/>[AdminLayout.jsx]"]
  node_content_editors["Structured content editors<br/>CMS editors<br/>[CourseEditor.jsx]"]
  node_media_library["Media management<br/>CMS media<br/>[MediaLibrary.jsx]"]
  node_image_uploader["Image uploader<br/>storage UI<br/>[ImageUploader.jsx]"]
end

subgraph group_platform["Data &amp; Hosting"]
  node_supabase_client["Supabase browser client<br/>data client<br/>[supabaseClient.js]"]
  node_data_hooks["Query &amp; mutation hooks<br/>React Query hooks<br/>[useSupabase.js]"]
  node_supabase[("Supabase platform<br/>PostgreSQL, REST &amp; Storage")]
  node_vercel_api{{"Submission API handlers<br/>Vercel serverless<br/>[submit-contact.js]"}}
  node_vercel["Vercel deployment<br/>SPA hosting<br/>[vercel.json]"]
end

subgraph group_operations["Provisioning"]
  node_schema["Base database schema<br/>SQL schema<br/>[schema.sql]"]
  node_migrations["Incremental migrations<br/>Supabase migrations"]
  node_seed_pipeline["Seed &amp; restore pipeline<br/>operational data<br/>[seed-all.js]"]
end

node_vite -->|"boots"| node_router
node_router -->|"public routes"| node_public_pages
node_router -->|"/admin/*"| node_admin_router
node_public_pages -->|"course route"| node_course_detail
node_public_pages -->|"dynamic route"| node_nav_page
node_public_pages -->|"composes"| node_site_chrome
node_public_pages -->|"renders sections"| node_section_renderer
node_public_pages -->|"embeds"| node_interaction_ui
node_site_chrome -->|"settings &amp; navigation"| node_data_hooks
node_public_pages -->|"content reads"| node_data_hooks
node_interaction_ui -->|"chat/job writes"| node_supabase_client
node_data_hooks -->|"uses"| node_supabase_client
node_supabase_client -->|"REST &amp; Storage"| node_supabase
node_admin_router -->|"checks session"| node_admin_auth
node_admin_router -->|"protects"| node_admin_layout
node_admin_layout -->|"hosts"| node_content_editors
node_admin_layout -->|"hosts"| node_media_library
node_media_library -->|"uses"| node_image_uploader
node_content_editors -->|"CMS reads/writes"| node_supabase_client
node_image_uploader -->|"uploads media"| node_supabase
node_public_pages -->|"contact/career submits"| node_vercel_api
node_vercel_api -->|"submission operations"| node_supabase
node_vercel -->|"serves"| node_vite
node_schema -.->|"provisions base model"| node_supabase
node_migrations -.->|"evolves schema"| node_supabase
node_seed_pipeline -.->|"development imports"| node_supabase

click node_vite "https://github.com/lethinkj/marvel-slice/blob/master/src/main.jsx"
click node_router "https://github.com/lethinkj/marvel-slice/blob/master/src/App.jsx"
click node_public_pages "https://github.com/lethinkj/marvel-slice/blob/master/src/pages/Home.jsx"
click node_course_detail "https://github.com/lethinkj/marvel-slice/blob/master/src/pages/CourseDetail.jsx"
click node_nav_page "https://github.com/lethinkj/marvel-slice/blob/master/src/pages/NavPage.jsx"
click node_site_chrome "https://github.com/lethinkj/marvel-slice/blob/master/src/components/layout/Header.jsx"
click node_section_renderer "https://github.com/lethinkj/marvel-slice/blob/master/src/components/ui/SectionRenderer.jsx"
click node_interaction_ui "https://github.com/lethinkj/marvel-slice/blob/master/src/components/chat/ChatWidget.jsx"
click node_admin_router "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/Admin.jsx"
click node_admin_auth "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/context/AuthContext.jsx"
click node_admin_layout "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/layout/AdminLayout.jsx"
click node_content_editors "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/pages/CourseEditor.jsx"
click node_media_library "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/pages/MediaLibrary.jsx"
click node_image_uploader "https://github.com/lethinkj/marvel-slice/blob/master/src/admin/components/ImageUploader.jsx"
click node_supabase_client "https://github.com/lethinkj/marvel-slice/blob/master/src/lib/supabaseClient.js"
click node_data_hooks "https://github.com/lethinkj/marvel-slice/blob/master/src/hooks/useSupabase.js"
click node_vercel_api "https://github.com/lethinkj/marvel-slice/blob/master/api/submit-contact.js"
click node_vercel "https://github.com/lethinkj/marvel-slice/blob/master/vercel.json"
click node_schema "https://github.com/lethinkj/marvel-slice/blob/master/schema.sql"
click node_migrations "https://github.com/lethinkj/marvel-slice/tree/master/supabase/migrations"
click node_seed_pipeline "https://github.com/lethinkj/marvel-slice/blob/master/scripts/seed-all.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_vite,node_router,node_public_pages,node_course_detail,node_nav_page,node_site_chrome,node_section_renderer,node_interaction_ui toneBlue
class node_admin_router,node_admin_auth,node_admin_layout,node_content_editors,node_media_library,node_image_uploader toneAmber
class node_supabase_client,node_data_hooks,node_supabase,node_vercel_api,node_vercel toneMint
class node_schema,node_migrations,node_seed_pipeline toneRose
```

## Components

### Public SPA

- [Vite SPA bootstrap](https://github.com/lethinkj/marvel-slice/blob/master/src/main.jsx): React/Vite · `src/main.jsx`
- [Application router](https://github.com/lethinkj/marvel-slice/blob/master/src/App.jsx): route boundary · Separates public routes from /admin/*. · `src/App.jsx`
- [Public pages](https://github.com/lethinkj/marvel-slice/blob/master/src/pages/Home.jsx): page components · Catalog, course, service, blog, legal, and contact experiences. · `src/pages/Home.jsx`
- [Course detail](https://github.com/lethinkj/marvel-slice/blob/master/src/pages/CourseDetail.jsx): content page · `src/pages/CourseDetail.jsx`
- [Dynamic navigation page](https://github.com/lethinkj/marvel-slice/blob/master/src/pages/NavPage.jsx): content page · `src/pages/NavPage.jsx`
- [Site chrome & sections](https://github.com/lethinkj/marvel-slice/blob/master/src/components/layout/Header.jsx): shared UI · Fetches navigation/settings and renders configurable sections. · `src/components/layout/Header.jsx`
- [Section renderer](https://github.com/lethinkj/marvel-slice/blob/master/src/components/ui/SectionRenderer.jsx): CMS section UI · `src/components/ui/SectionRenderer.jsx`
- [Chat & job application](https://github.com/lethinkj/marvel-slice/blob/master/src/components/chat/ChatWidget.jsx): client features · `src/components/chat/ChatWidget.jsx`

### Admin CMS

- [Admin application](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/Admin.jsx): admin router · Protected editor routes under /admin/*. · `src/admin/Admin.jsx`
- [Admin session check](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/context/AuthContext.jsx): client auth boundary · Profiles-based email/password hash check persisted in localStorage. · `src/admin/context/AuthContext.jsx`
- [Protected admin layout](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/layout/AdminLayout.jsx): admin shell · `src/admin/layout/AdminLayout.jsx`
- [Structured content editors](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/pages/CourseEditor.jsx): CMS editors · Courses, home sections, blog, navigation, services, training, and settings. · `src/admin/pages/CourseEditor.jsx`
- [Media management](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/pages/MediaLibrary.jsx): CMS media · `src/admin/pages/MediaLibrary.jsx`
- [Image uploader](https://github.com/lethinkj/marvel-slice/blob/master/src/admin/components/ImageUploader.jsx): storage UI · `src/admin/components/ImageUploader.jsx`

### Data & Hosting

- [Supabase browser client](https://github.com/lethinkj/marvel-slice/blob/master/src/lib/supabaseClient.js): data client · Configured from Vite environment variables. · `src/lib/supabaseClient.js`
- [Query & mutation hooks](https://github.com/lethinkj/marvel-slice/blob/master/src/hooks/useSupabase.js): React Query hooks · Encapsulate CMS reads and direct browser writes. · `src/hooks/useSupabase.js`
- **Supabase platform**: PostgreSQL, REST & Storage · Hosts CMS, content relations, submissions, chat, jobs, and media.
- [Submission API handlers](https://github.com/lethinkj/marvel-slice/blob/master/api/submit-contact.js): Vercel serverless · Handles contact, career, and admin-reply side behavior. · `api/submit-contact.js`
- [Vercel deployment](https://github.com/lethinkj/marvel-slice/blob/master/vercel.json): SPA hosting · Serves the SPA with rewrite support. · `vercel.json`

### Provisioning

- [Base database schema](https://github.com/lethinkj/marvel-slice/blob/master/schema.sql): SQL schema · `schema.sql`
- [Incremental migrations](https://github.com/lethinkj/marvel-slice/tree/master/supabase/migrations): Supabase migrations · `supabase/migrations`
- [Seed & restore pipeline](https://github.com/lethinkj/marvel-slice/blob/master/scripts/seed-all.js): operational data · Development content import from JSON exports. · `scripts/seed-all.js`

## Connections

- Vite SPA bootstrap → Application router: boots
- Application router → Public pages: public routes
- Application router → Admin application: /admin/*
- Public pages → Course detail: course route
- Public pages → Dynamic navigation page: dynamic route
- Public pages → Site chrome & sections: composes
- Public pages → Section renderer: renders sections
- Public pages → Chat & job application: embeds
- Site chrome & sections → Query & mutation hooks: settings & navigation
- Public pages → Query & mutation hooks: content reads
- Chat & job application → Supabase browser client: chat/job writes
- Query & mutation hooks → Supabase browser client: uses
- Supabase browser client → Supabase platform: REST & Storage
- Admin application → Admin session check: checks session
- Admin application → Protected admin layout: protects
- Protected admin layout → Structured content editors: hosts
- Protected admin layout → Media management: hosts
- Media management → Image uploader: uses
- Structured content editors → Supabase browser client: CMS reads/writes
- Image uploader → Supabase platform: uploads media
- Public pages → Submission API handlers: contact/career submits
- Submission API handlers → Supabase platform: submission operations
- Vercel deployment → Vite SPA bootstrap: serves
- Base database schema → Supabase platform: provisions base model
- Incremental migrations → Supabase platform: evolves schema
- Seed & restore pipeline → Supabase platform: development imports