# jsantiago318/improved-tsquared architecture

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

- Interactive diagram: https://gitdiagram.com/jsantiago318/improved-tsquared
- Repository: https://github.com/jsantiago318/improved-tsquared

## Overview

1. This is a client-side React SPA built with Vite, TypeScript, Tailwind CSS, and shadcn/ui. The repository contains no custom server code; the app depends on external services for persistence/integration.

2. The bootstrapping path is the usual Vite frontend flow: `index.html` → `src/main.tsx` → `src/App.tsx`. Global styling lives in `src/styles/globals.css`, with Tailwind/PostCSS/Tailwind config handling the design system layer.

3. `src/App.tsx` is the top-level composition point. Based on the file structure, it likely decides which screen shell to render and wires together the main navigation and shared UI providers such as notifications/toasts.

4. The app is organized around screen-level views in `src/screens/`: `AuthScreen`, `HomeScreen`, `MenuScreen`, `UserHomeScreen`, and a dedicated `calendar_events/home_calendar.tsx`. These are the main user-facing boundaries and are the best candidates for diagram nodes at the “page” level.

5. The domain-specific functionality is concentrated in `src/components/`: dashboard widgets, tables, menu/instructor selectors, event creation, and notifications. `Dashboard.tsx`, `Header.tsx`, `NewEvents.tsx`, and the various table components (`DTable`, `HTable`, `ITable`, `PTable`) suggest a data-management UI with reusable table variants.

6. There is a second layer of more feature-specific composition under `src/components/Panels/` and `src/components/premades/`. The `Panels` directory appears to hold dashboard subviews for different roles or sections (`DashboardPanelInstructor`, `DashboardPanelSeminars`, `DrawerEntity`), while `premades` contains reusable specialized widgets like instructor dropdowns and seminar table menus.

7. The UI foundation is a large set of local shadcn-style primitives in `src/components/ui/` such as dialogs, tables, selects, tabs, dropdowns, forms, and toasts. These are low-level building blocks used by the higher-level feature components rather than being application logic themselves.

8. Data and service boundaries are explicit in `src/supabaseClient.ts` and `src/mailchimpClient.ts`. Supabase is the likely backend boundary for authentication and app data; Mailchimp is a separate integration boundary for mailing-list or marketing-related synchronization.

9. The architecture suggests a role- or context-driven UI: authentication, home/dashboard, menu/instructor management, and user home are separate flows rather than one monolithic view. The `Dashboard`/panel components likely render different content depending on the current user or feature context.

10. Static assets are split between `public/` and `src/assets/`, including `src/assets/uiSpritesheets` and `src/components/assets`, which indicates the app uses bundled UI imagery and component-local assets rather than fetching most visuals remotely.

11. The calendar/events area is its own mini-subsystem. The presence of `calendar_events/template-center.pptx` alongside `home_calendar.tsx` suggests this part of the app likely supports event scheduling or presentation/export workflows tied to seminars or classes.

12. For an architecture diagram, the most important boundaries are: frontend SPA shell, screen-level routes/views, feature components/panels, shared UI primitives, and external service adapters (Supabase, Mailchimp). Everything appears to flow from the screen layer down into reusable components and then out to those service clients.

Main entry points: [`src/App.tsx`](https://github.com/jsantiago318/improved-tsquared/blob/main/src/App.tsx) (App), [`src/screens/HomeScreen.tsx`](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/HomeScreen.tsx) (Home), [`src/components/NewEvents.tsx`](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/NewEvents.tsx) (New Events), [`src/components/ui/table.tsx`](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/table.tsx) (Table)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["SPA shell"]
  node_index_html["index.html<br/>entry document<br/>[index.html]"]
  node_main_tsx["main.tsx<br/>bootstrap<br/>[main.tsx]"]
  node_app_tsx["App<br/>[App.tsx]"]
  node_globals_css["Globals<br/>style layer<br/>[globals.css]"]
end

subgraph group_screens["Screens"]
  node_auth_screen["Auth<br/>screen<br/>[AuthScreen.tsx]"]
  node_home_screen["Home<br/>screen<br/>[HomeScreen.tsx]"]
  node_menu_screen["Menu<br/>screen<br/>[MenuScreen.tsx]"]
  node_user_home_screen["User Home<br/>screen<br/>[UserHomeScreen.tsx]"]
  node_calendar_home["Calendar<br/>screen<br/>[home_calendar.tsx]"]
end

subgraph group_features["Feature components"]
  node_dashboard["Dashboard<br/>feature shell<br/>[Dashboard.tsx]"]
  node_header["Header<br/>layout component<br/>[Header.tsx]"]
  node_new_events["New Events<br/>event form<br/>[NewEvents.tsx]"]
  node_menu_instructors["Instructors<br/>selector"]
  node_dtable["DTable<br/>data table<br/>[DTable.tsx]"]
  node_htable["HTable<br/>data table<br/>[HTable.tsx]"]
  node_itable["ITable<br/>data table<br/>[ITable.tsx]"]
  node_ptable["PTable<br/>data table<br/>[PTable.tsx]"]
  node_dashboard_panel_instructor["Instructor Panel<br/>dashboard panel"]
  node_dashboard_panel_seminars["Seminars Panel<br/>dashboard panel"]
  node_drawer_entity["Drawer Entity<br/>drawer panel<br/>[DrawerEntity.jsx]"]
  node_dropdown_instructors["Dropdown Instr.<br/>premade widget"]
  node_seminar_table_menu["Seminar Menu<br/>premade widget"]
  node_notifications["Notifications<br/>toast bridge<br/>[notifications.tsx]"]
end

subgraph group_ui["UI primitives"]
  node_ui_table["Table<br/>ui primitive<br/>[table.tsx]"]
  node_ui_dialog["Dialog<br/>ui primitive<br/>[dialog.tsx]"]
  node_ui_select["Select<br/>ui primitive<br/>[select.tsx]"]
  node_ui_toaster["Toaster<br/>ui primitive<br/>[toaster.tsx]"]
end

subgraph group_integrations["Integrations"]
  node_supabase_client["Supabase<br/>service client<br/>[supabaseClient.ts]"]
  node_mailchimp_client["Mailchimp<br/>service client<br/>[mailchimpClient.ts]"]
end

node_index_html -->|"loads"| node_main_tsx
node_main_tsx -->|"renders"| node_app_tsx
node_app_tsx -->|"styles"| node_globals_css
node_app_tsx -->|"routes"| node_auth_screen
node_app_tsx -->|"routes"| node_home_screen
node_app_tsx -->|"routes"| node_menu_screen
node_app_tsx -->|"routes"| node_user_home_screen
node_app_tsx -->|"routes"| node_calendar_home
node_app_tsx -->|"composes"| node_header
node_app_tsx -->|"provides"| node_notifications
node_home_screen -->|"uses"| node_dashboard
node_home_screen -->|"uses"| node_new_events
node_menu_screen -->|"uses"| node_menu_instructors
node_user_home_screen -->|"uses"| node_htable
node_calendar_home -->|"uses"| node_new_events
node_dashboard -->|"composes"| node_dashboard_panel_instructor
node_dashboard -->|"composes"| node_dashboard_panel_seminars
node_dashboard_panel_instructor -->|"opens"| node_drawer_entity
node_dashboard_panel_seminars -->|"uses"| node_seminar_table_menu
node_menu_instructors -->|"uses"| node_dropdown_instructors
node_new_events -->|"uses"| node_ui_dialog
node_new_events -->|"uses"| node_ui_select
node_dtable -->|"builds on"| node_ui_table
node_htable -->|"builds on"| node_ui_table
node_itable -->|"builds on"| node_ui_table
node_ptable -->|"builds on"| node_ui_table
node_notifications -->|"uses"| node_ui_toaster
node_auth_screen -->|"auth"| node_supabase_client
node_home_screen -->|"data"| node_supabase_client
node_calendar_home -->|"data"| node_supabase_client
node_menu_screen -->|"syncs"| node_mailchimp_client

click node_index_html "https://github.com/jsantiago318/improved-tsquared/blob/main/index.html"
click node_main_tsx "https://github.com/jsantiago318/improved-tsquared/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/jsantiago318/improved-tsquared/blob/main/src/App.tsx"
click node_globals_css "https://github.com/jsantiago318/improved-tsquared/blob/main/src/styles/globals.css"
click node_auth_screen "https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/AuthScreen.tsx"
click node_home_screen "https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/HomeScreen.tsx"
click node_menu_screen "https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/MenuScreen.tsx"
click node_user_home_screen "https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/UserHomeScreen.tsx"
click node_calendar_home "https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/calendar_events/home_calendar.tsx"
click node_dashboard "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Dashboard.tsx"
click node_header "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Header.tsx"
click node_new_events "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/NewEvents.tsx"
click node_menu_instructors "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/MenuInstructors.tsx"
click node_dtable "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/DTable.tsx"
click node_htable "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/HTable.tsx"
click node_itable "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ITable.tsx"
click node_ptable "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/PTable.tsx"
click node_dashboard_panel_instructor "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DashboardPanelInstructor.jsx"
click node_dashboard_panel_seminars "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DashboardPanelSeminars.jsx"
click node_drawer_entity "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DrawerEntity.jsx"
click node_dropdown_instructors "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/premades/DropdownInstructores.tsx"
click node_seminar_table_menu "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/premades/SeminarTableMenu.tsx"
click node_notifications "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/notifications.tsx"
click node_ui_table "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/table.tsx"
click node_ui_dialog "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/dialog.tsx"
click node_ui_select "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/select.tsx"
click node_ui_toaster "https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/toaster.tsx"
click node_supabase_client "https://github.com/jsantiago318/improved-tsquared/blob/main/src/supabaseClient.ts"
click node_mailchimp_client "https://github.com/jsantiago318/improved-tsquared/blob/main/src/mailchimpClient.ts"

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_main_tsx,node_app_tsx,node_globals_css toneBlue
class node_auth_screen,node_home_screen,node_menu_screen,node_user_home_screen,node_calendar_home toneAmber
class node_dashboard,node_header,node_new_events,node_menu_instructors,node_dtable,node_htable,node_itable,node_ptable,node_dashboard_panel_instructor,node_dashboard_panel_seminars,node_drawer_entity,node_dropdown_instructors,node_seminar_table_menu,node_notifications toneMint
class node_ui_table,node_ui_dialog,node_ui_select,node_ui_toaster toneRose
class node_supabase_client,node_mailchimp_client toneIndigo
```

## Components

### SPA shell

Vite entrypoint, app composition, and global styling.

- [index.html](https://github.com/jsantiago318/improved-tsquared/blob/main/index.html): entry document · Vite HTML entry that mounts the SPA. · `index.html`
- [main.tsx](https://github.com/jsantiago318/improved-tsquared/blob/main/src/main.tsx): bootstrap · Client entry that renders the React tree. · `src/main.tsx`
- [App](https://github.com/jsantiago318/improved-tsquared/blob/main/src/App.tsx): app shell · Top-level composition and screen wiring. · `src/App.tsx`
- [Globals](https://github.com/jsantiago318/improved-tsquared/blob/main/src/styles/globals.css): style layer · Global styles and design-system baseline. · `src/styles/globals.css`

### Screens

Top-level user-facing views and flows.

- [Auth](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/AuthScreen.tsx): screen · Authentication and sign-in flow. · `src/screens/AuthScreen.tsx`
- [Home](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/HomeScreen.tsx): screen · Primary home/dashboard view. · `src/screens/HomeScreen.tsx`
- [Menu](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/MenuScreen.tsx): screen · Menu and selection-oriented view. · `src/screens/MenuScreen.tsx`
- [User Home](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/UserHomeScreen.tsx): screen · Role- or user-specific home view. · `src/screens/UserHomeScreen.tsx`
- [Calendar](https://github.com/jsantiago318/improved-tsquared/blob/main/src/screens/calendar_events/home_calendar.tsx): screen · Calendar and event home flow. · `src/screens/calendar_events/home_calendar.tsx`

### Feature components

Reusable domain UI and composed panels.

- [Dashboard](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Dashboard.tsx): feature shell · Main dashboard composition and summary area. · `src/components/Dashboard.tsx`
- [Header](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Header.tsx): layout component · Shared top-level navigation/header region. · `src/components/Header.tsx`
- [New Events](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/NewEvents.tsx): event form · Event creation and management UI. · `src/components/NewEvents.tsx`
- [Instructors](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/MenuInstructors.tsx): selector · Instructor selection and menu management UI. · `src/components/MenuInstructors.tsx`
- [DTable](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/DTable.tsx): data table · Dashboard-oriented table variant. · `src/components/DTable.tsx`
- [HTable](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/HTable.tsx): data table · Home-oriented table variant. · `src/components/HTable.tsx`
- [ITable](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ITable.tsx): data table · Instructor-oriented table variant. · `src/components/ITable.tsx`
- [PTable](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/PTable.tsx): data table · Persona- or panel-oriented table variant. · `src/components/PTable.tsx`
- [Instructor Panel](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DashboardPanelInstructor.jsx): dashboard panel · Role-specific dashboard panel for instructors. · `src/components/Panels/DashboardPanelInstructor.jsx`
- [Seminars Panel](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DashboardPanelSeminars.jsx): dashboard panel · Dashboard panel focused on seminars or sessions. · `src/components/Panels/DashboardPanelSeminars.jsx`
- [Drawer Entity](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/Panels/DrawerEntity.jsx): drawer panel · Drawer-based entity editor or inspector. · `src/components/Panels/DrawerEntity.jsx`
- [Dropdown Instr.](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/premades/DropdownInstructores.tsx): premade widget · Reusable instructor dropdown control. · `src/components/premades/DropdownInstructores.tsx`
- [Seminar Menu](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/premades/SeminarTableMenu.tsx): premade widget · Table menu actions for seminar rows. · `src/components/premades/SeminarTableMenu.tsx`
- [Notifications](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/notifications.tsx): toast bridge · App-level toast/notification wiring. · `src/components/notifications.tsx`

### UI primitives

Local shadcn-style building blocks.

- [Table](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/table.tsx): ui primitive · Base table primitive used by data views. · `src/components/ui/table.tsx`
- [Dialog](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/dialog.tsx): ui primitive · Modal/dialog primitive. · `src/components/ui/dialog.tsx`
- [Select](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/select.tsx): ui primitive · Selection control primitive. · `src/components/ui/select.tsx`
- [Toaster](https://github.com/jsantiago318/improved-tsquared/blob/main/src/components/ui/toaster.tsx): ui primitive · Toast host and display primitive. · `src/components/ui/toaster.tsx`

### Integrations

External service clients used by the app.

- [Supabase](https://github.com/jsantiago318/improved-tsquared/blob/main/src/supabaseClient.ts): service client · Backend boundary for auth and app data. · `src/supabaseClient.ts`
- [Mailchimp](https://github.com/jsantiago318/improved-tsquared/blob/main/src/mailchimpClient.ts): service client · External mailing-list / marketing integration. · `src/mailchimpClient.ts`

## Connections

- index.html → main.tsx: loads · HTML entry bootstraps the React app.
- main.tsx → App: renders · Main entry mounts the application shell.
- App → Globals: styles · App imports the global style layer.
- App → Auth: routes · Top-level shell can render authentication.
- App → Home: routes · Top-level shell can render the home view.
- App → Menu: routes · Top-level shell can render the menu view.
- App → User Home: routes · Top-level shell can render the user-specific home view.
- App → Calendar: routes · Top-level shell can render the calendar/events view.
- App → Header: composes · Shell assembles shared navigation chrome.
- App → Notifications: provides · Shell wires the notification surface.
- Home → Dashboard: uses · Home view centers on dashboard composition.
- Home → New Events: uses · Home view can launch event creation.
- Menu → Instructors: uses · Menu screen drives instructor/menu selection.
- User Home → HTable: uses · User home relies on a table-based data view.
- Calendar → New Events: uses · Calendar flow connects to event creation.
- Dashboard → Instructor Panel: composes · Dashboard swaps in role-specific instructor content.
- Dashboard → Seminars Panel: composes · Dashboard swaps in seminar-focused content.
- Instructor Panel → Drawer Entity: opens · Instructor panel uses drawer-based entity editing.
- Seminars Panel → Seminar Menu: uses · Seminar panel uses row action menus.
- Instructors → Dropdown Instr.: uses · Instructor management relies on a reusable dropdown.
- New Events → Dialog: uses · Event creation is likely presented in a dialog.
- New Events → Select: uses · Event creation uses select controls.
- DTable → Table: builds on · Dashboard table variant wraps the base table primitive.
- HTable → Table: builds on · Home table variant wraps the base table primitive.
- ITable → Table: builds on · Instructor table variant wraps the base table primitive.
- PTable → Table: builds on · Persona table variant wraps the base table primitive.
- Notifications → Toaster: uses · Notification bridge relies on the toast host.
- Auth → Supabase: auth · Authentication likely flows through Supabase.
- Home → Supabase: data · Home/dashboard reads and writes app data through Supabase.
- Calendar → Supabase: data · Calendar/events view likely persists through Supabase.
- Menu → Mailchimp: syncs · Menu/integration flow may sync mailing data externally.