# jdbr0505/immujel architecture

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

- Interactive diagram: https://gitdiagram.com/jdbr0505/immujel
- Repository: https://github.com/jdbr0505/immujel

## Overview

1. **Overall shape**
   - This is a **static Progressive Web App** front end, deployed on **Vercel** and **GitHub Pages**.
   - The repository is organized by feature/page folders rather than by a server-side app framework.

2. **Client-side app shell**
   - `index.html`, `styles.css`, `animations.js`, `auth.js`, and `js/ui.js` appear to provide the shared shell, global styling, animations, and common UI/auth behavior used across the site.
   - `404.html`, `offline.html`, `manifest.json`, `sw.js`, and `js/sw-register.js` support PWA behavior and graceful fallback when the app is unavailable.

3. **Page-level feature boundaries**
   - `NavBar's/` contains content pages such as `FL.html`, `Programas.html`, `Sobre Nosotras.html`, `noticiero.html`, `publicacion.html`, and `semanario.html`.
   - These are separate static routes/pages, likely linked through a shared navigation experience rather than a router in a SPA framework.

4. **Authentication subsystem**
   - The `Login/` folder is a self-contained auth area with `login.html/js`, `signup.html/js`, `update-password.html/js`, and supporting styles.
   - `Login/Login_supabase.js` suggests the auth flows are backed by **Supabase Auth**.
   - `email-confirmacion.html` is part of the email verification / recovery flow.

5. **Admin and content management**
   - `Admin/Admin.html`, `Admin.js`, and `Admin_cms.js` define an administrative interface.
   - This likely acts as a lightweight CMS or moderation console for managing site content, users, or submissions, separated from public pages.

6. **Forms and user submissions**
   - `Forms/form.html`, `form.js`, and `form_styles.css` represent a distinct submission workflow.
   - Based on the presence of Supabase SQL and notification automation, form submissions likely persist to Supabase and may trigger downstream notifications.

7. **Backend platform boundary: Supabase**
   - The `supabase/` directory and `Supabase SQL/` scripts show that **Supabase is the main backend service**.
   - The project relies on Supabase for auth, database, storage, row-level security, triggers, and notifications.

8. **Database and security provisioning**
   - `Supabase SQL/TODO_EN_UNO.sql`, `alter_storage_rls.sql`, and trigger-fix scripts indicate schema setup and maintenance are handled as SQL migrations/scripts.
   - `setup_notificaciones.sql` and `setup_push_subscriptions.sql` point to notification tables, subscription tracking, and push-related persistence.

9. **Server-side automation**
   - `supabase/functions/send-notification/index.ts` is a Supabase Edge Function.
   - This is the main server-side executable in the repo and is likely invoked by database events or client calls to send notifications.

10. **PWA and offline distribution**
   - `manifest.json`, `sw.js`, and `offline.html` define the installable/offline experience.
   - `js/sw-register.js` registers the service worker, making the site usable as an app-like experience on mobile and desktop.

11. **Content, assets, and static hosting**
   - `Images/` holds the visual asset pool used across pages.
   - `sitemap.xml` supports search indexing, while `IMMUJEL.xml` is an additional XML asset used for site data or metadata.

12. **Deployment topology**
   - The app is hosted as static files on **Vercel** and **GitHub Pages**.
   - Runtime behavior beyond the browser is limited mainly to **Supabase** services: auth, database/storage, and edge functions.

13. **High-level data flow**
   - User interacts with public pages or forms in the browser.
   - Auth and data operations go to Supabase.
   - Database rules/triggers and the `send-notification` function handle automated side effects.
   - The service worker caches assets and serves `offline.html` when network access is unavailable.

14. **Architecture summary for a diagram**
   - Draw this as a **browser-first static PWA** with separate page modules for public content, login, forms, and admin.
   - Put **Supabase** outside the app boundary as the backend platform, with SQL-managed schema/security and one edge function for notifications.
   - Add **service worker/offline cache** as a client-side infrastructure layer, and show deployment via **Vercel/GitHub Pages**.

Main entry points: [`index.html`](https://github.com/jdbr0505/immujel/blob/main/index.html) (Home shell), [`vercel.json`](https://github.com/jdbr0505/immujel/blob/main/vercel.json) (Static hosting), [`Login/login.html`](https://github.com/jdbr0505/immujel/blob/main/Login/login.html) (Login area), [`Admin/Admin.html`](https://github.com/jdbr0505/immujel/blob/main/Admin/Admin.html) (Admin console)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_index["Home shell<br/>static entry<br/>[index.html]"]
  node_shared_ui["Shared UI<br/>common client<br/>[ui.js]"]
  node_styles["Global styles<br/>site css<br/>[styles.css]"]
  node_motion["Animations<br/>ui motion<br/>[animations.js]"]
  node_auth_core["Auth shell<br/>auth client<br/>[auth.js]"]
  node_public_pages["Public pages<br/>content pages<br/>[FL.html]"]
  node_login_area["Login area<br/>auth pages<br/>[login.html]"]
  node_admin_area["Admin console<br/>cms UI<br/>[Admin.html]"]
  node_forms_area["Submission form<br/>forms UI<br/>[form.html]"]
end

subgraph group_pwa["PWA layer"]
  node_offline["Offline page<br/>pwa fallback<br/>[offline.html]"]
  node_manifest["Web manifest<br/>pwa metadata<br/>[manifest.json]"]
  node_service_worker["Service worker<br/>pwa cache<br/>[sw.js]"]
  node_sw_register["SW register<br/>pwa bootstrap<br/>[sw-register.js]"]
end

subgraph group_backend["Supabase backend"]
  node_supabase_auth["Supabase auth<br/>backend auth<br/>[Login_supabase.js]"]
  node_supabase_sql["SQL setup<br/>db schema<br/>[TODO_EN_UNO.sql]"]
  node_edge_fn["Notify function<br/>edge function<br/>[index.ts]"]
end

subgraph group_deploy["Deployment"]
  node_deploy_host["Static hosting<br/>deployment<br/>[vercel.json]"]
end

node_index -->|"uses"| node_shared_ui
node_index -->|"styles"| node_styles
node_index -->|"animates"| node_motion
node_index -->|"auth"| node_auth_core
node_index -->|"nav"| node_public_pages
node_index -->|"entry"| node_login_area
node_index -->|"entry"| node_forms_area
node_index -->|"entry"| node_admin_area
node_login_area -->|"signin"| node_supabase_auth
node_auth_core -->|"session"| node_supabase_auth
node_forms_area -->|"persist"| node_supabase_sql
node_admin_area -->|"manage"| node_supabase_sql
node_supabase_sql -->|"trigger"| node_edge_fn
node_edge_fn -->|"backend"| node_supabase_auth
node_sw_register -->|"registers"| node_service_worker
node_service_worker -->|"fallback"| node_offline
node_service_worker -->|"pwa"| node_manifest
node_index -->|"boot"| node_sw_register
node_index -.->|"served by"| node_deploy_host
node_public_pages -.->|"served by"| node_deploy_host
node_login_area -.->|"served by"| node_deploy_host
node_admin_area -.->|"served by"| node_deploy_host

click node_index "https://github.com/jdbr0505/immujel/blob/main/index.html"
click node_shared_ui "https://github.com/jdbr0505/immujel/blob/main/js/ui.js"
click node_styles "https://github.com/jdbr0505/immujel/blob/main/styles.css"
click node_motion "https://github.com/jdbr0505/immujel/blob/main/animations.js"
click node_auth_core "https://github.com/jdbr0505/immujel/blob/main/auth.js"
click node_public_pages "https://github.com/jdbr0505/immujel/blob/main/NavBar's/FL.html"
click node_login_area "https://github.com/jdbr0505/immujel/blob/main/Login/login.html"
click node_admin_area "https://github.com/jdbr0505/immujel/blob/main/Admin/Admin.html"
click node_forms_area "https://github.com/jdbr0505/immujel/blob/main/Forms/form.html"
click node_offline "https://github.com/jdbr0505/immujel/blob/main/offline.html"
click node_manifest "https://github.com/jdbr0505/immujel/blob/main/manifest.json"
click node_service_worker "https://github.com/jdbr0505/immujel/blob/main/sw.js"
click node_sw_register "https://github.com/jdbr0505/immujel/blob/main/js/sw-register.js"
click node_supabase_auth "https://github.com/jdbr0505/immujel/blob/main/Login/Login_supabase.js"
click node_supabase_sql "https://github.com/jdbr0505/immujel/blob/main/Supabase SQL/TODO_EN_UNO.sql"
click node_edge_fn "https://github.com/jdbr0505/immujel/blob/main/supabase/functions/send-notification/index.ts"
click node_deploy_host "https://github.com/jdbr0505/immujel/blob/main/vercel.json"

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,node_shared_ui,node_styles,node_motion,node_auth_core,node_public_pages,node_login_area,node_admin_area,node_forms_area toneBlue
class node_offline,node_manifest,node_service_worker,node_sw_register toneAmber
class node_supabase_auth,node_supabase_sql,node_edge_fn toneMint
class node_deploy_host toneRose
```

## Components

### Client app

Static browser-first app shell and page modules.

- [Home shell](https://github.com/jdbr0505/immujel/blob/main/index.html): static entry · Main app entry and shared shell. · `index.html`
- [Shared UI](https://github.com/jdbr0505/immujel/blob/main/js/ui.js): common client · Global UI helpers and interaction behavior. · `js/ui.js`
- [Global styles](https://github.com/jdbr0505/immujel/blob/main/styles.css): site css · Base styling for the public app. · `styles.css`
- [Animations](https://github.com/jdbr0505/immujel/blob/main/animations.js): ui motion · Shared animation behavior across pages. · `animations.js`
- [Auth shell](https://github.com/jdbr0505/immujel/blob/main/auth.js): auth client · Shared browser auth state and helpers. · `auth.js`
- [Public pages](https://github.com/jdbr0505/immujel/blob/main/NavBar's/FL.html): content pages · Static content routes for the public site. · `NavBar's/FL.html`
- [Login area](https://github.com/jdbr0505/immujel/blob/main/Login/login.html): auth pages · Sign-in, signup, password recovery, and verification flows. · `Login/login.html`
- [Admin console](https://github.com/jdbr0505/immujel/blob/main/Admin/Admin.html): cms UI · Administrative content and moderation interface. · `Admin/Admin.html`
- [Submission form](https://github.com/jdbr0505/immujel/blob/main/Forms/form.html): forms UI · User submission workflow and form handling. · `Forms/form.html`

### PWA layer

Offline and installable app behavior in the browser.

- [Offline page](https://github.com/jdbr0505/immujel/blob/main/offline.html): pwa fallback · Fallback page shown when network access is unavailable. · `offline.html`
- [Web manifest](https://github.com/jdbr0505/immujel/blob/main/manifest.json): pwa metadata · Installability and app metadata for the PWA. · `manifest.json`
- [Service worker](https://github.com/jdbr0505/immujel/blob/main/sw.js): pwa cache · Caching and offline runtime for static assets. · `sw.js`
- [SW register](https://github.com/jdbr0505/immujel/blob/main/js/sw-register.js): pwa bootstrap · Registers the service worker from the client. · `js/sw-register.js`

### Supabase backend

Database, auth, storage, and server-side automation.

- [Supabase auth](https://github.com/jdbr0505/immujel/blob/main/Login/Login_supabase.js): backend auth · Authentication backend used by login flows. · `Login/Login_supabase.js`
- [SQL setup](https://github.com/jdbr0505/immujel/blob/HEAD/Supabase%20SQL/TODO_EN_UNO.sql): db schema · Schema, RLS, triggers, and notification provisioning scripts. · `Supabase SQL/TODO_EN_UNO.sql`
- [Notify function](https://github.com/jdbr0505/immujel/blob/main/supabase/functions/send-notification/index.ts): edge function · Server-side notification sender. · `supabase/functions/send-notification/index.ts`

### Deployment

Static hosting and site distribution.

- [Static hosting](https://github.com/jdbr0505/immujel/blob/main/vercel.json): deployment · Static deployment via Vercel and GitHub Pages. · `vercel.json`

## Connections

- Home shell → Shared UI: uses · Main page uses shared UI behavior.
- Home shell → Global styles: styles · Main page consumes global styles.
- Home shell → Animations: animates · Shared animation helpers enhance the shell.
- Home shell → Auth shell: auth · Shared auth logic is available from the shell.
- Home shell → Public pages: nav · Public shell links into content pages.
- Home shell → Login area: entry · Shell routes users into authentication flows.
- Home shell → Submission form: entry · Shell links to submission workflows.
- Home shell → Admin console: entry · Shell links to the admin console.
- Login area → Supabase auth: signin · Login flows delegate authentication to Supabase.
- Auth shell → Supabase auth: session · Shared auth helpers talk to Supabase Auth.
- Submission form → SQL setup: persist · Form data is supported by database setup and triggers.
- Admin console → SQL setup: manage · Admin tools rely on backend schema and security.
- SQL setup → Notify function: trigger · Database events can invoke notification delivery.
- Notify function → Supabase auth: backend · Edge function operates within the Supabase platform.
- SW register → Service worker: registers · Client bootstrap registers the service worker.
- Service worker → Offline page: fallback · Service worker serves the offline page when needed.
- Service worker → Web manifest: pwa · Offline/runtime supports the installable app experience.
- Home shell → SW register: boot · App shell loads service worker registration.
- Home shell → Static hosting: served by · Static app is deployed through hosting configuration.
- Public pages → Static hosting: served by · Public content pages are statically hosted.
- Login area → Static hosting: served by · Auth pages are part of the static deployment.
- Admin console → Static hosting: served by · Admin UI is statically deployed.