# jsantiago318/scaling-lamp architecture

> Architecture diagram of the GitHub repository jsantiago318/scaling-lamp, 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/scaling-lamp
- Repository: https://github.com/jsantiago318/scaling-lamp

## Overview

1. This repository is a client-side single-page application built with React, TypeScript, and Vite. There is no server application in the tree; the frontend is the whole runtime surface, with backend interaction funneled through a Supabase client.

2. The top-level application entry points are `src/main.tsx` and `src/App.tsx`. `main.tsx` is the bootstrapping layer that mounts React into `index.html`, while `App.tsx` is the root composition layer that likely selects and wires the app’s main screens.

3. The feature surface is organized around three screen-level views in `src/screens`: `Auth.tsx`, `Home.tsx`, and `Calendar.tsx`. These are the highest-level domain boundaries in the repo and are the best candidates for diagramming user flows and page transitions.

4. Shared UI is split into two levels: app-specific components in `src/components` and a larger reusable design system in `src/components/ui`. The `ui` folder contains shadcn-style primitives such as button, dialog, tabs, calendar, chart, and navigation components, which indicate the app builds feature screens from composable, low-level UI blocks rather than custom one-off widgets.

5. `src/components/CountBtn.tsx` is the only clearly custom non-UI component visible in the tree. It likely represents app-specific interaction logic layered on top of the shared component library.

6. `supabaseClient.ts` is the explicit integration boundary to external services. That file centralizes Supabase access, so any authentication or data-driven calendar behavior is probably mediated through this module rather than direct API calls scattered across screens.

7. The likely data flow is: user action in a screen component → shared UI primitives and custom components handle presentation and interaction → screen logic calls the Supabase client for auth or persisted data → results are rendered back into the screen. In architecture terms, Supabase is the only external system visible from the repository structure.

8. Styling is handled through Tailwind CSS and global stylesheet layering. `src/styles/globals.css`, `tailwind.config.js`, and `postcss.config.js` define the design token and utility-class pipeline, with component styles expected to be mostly utility-driven rather than CSS-module based.

9. `src/lib/utils.ts` serves as the shared utility boundary for client-side helpers. In shadcn-based projects this typically includes class name composition and related cross-cutting helpers used by many UI components.

10. The project is strongly tool-driven on the frontend build side: Vite for local dev and production bundling, TypeScript for type safety, ESLint for static analysis, and PostCSS/Tailwind for style processing. These are build-time concerns and do not add runtime subsystems, but they shape how the app is assembled and deployed as static assets.

11. `public/` and `src/assets/` represent the static content boundary. `public/` is for assets served as-is by Vite, while `src/assets` contains importable assets managed through the module graph.

12. The repository also contains broad shadcn/ui coverage in `src/components/ui`, including calendar, tabs, accordion, dialog, pagination, resizable panels, and charts. That suggests the app is designed to support richer interactive screens and dashboard-like interfaces without introducing a separate UI framework or component server.

13. In diagram terms, the clearest architecture is: Vite-hosted React SPA at the center, three primary screens at the feature layer, shared UI primitives beneath them, a small utility layer for helpers, and a Supabase integration edge for authentication and persistent data.

Main entry points: [`src/App.tsx`](https://github.com/jsantiago318/scaling-lamp/blob/main/src/App.tsx) (App.tsx), [`src/screens/Home.tsx`](https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Home.tsx) (Home), [`src/lib/utils.ts`](https://github.com/jsantiago318/scaling-lamp/blob/main/src/lib/utils.ts) (utils), [`src/styles/globals.css`](https://github.com/jsantiago318/scaling-lamp/blob/main/src/styles/globals.css) (globals.css)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Runtime shell"]
  node_main["main.tsx<br/>bootstrap<br/>[main.tsx]"]
  node_app["App.tsx<br/>root composition<br/>[App.tsx]"]
end

subgraph group_features["Screens"]
  node_auth["Auth<br/>screen<br/>[Auth.tsx]"]
  node_home["Home<br/>screen<br/>[Home.tsx]"]
  node_calendar["Calendar<br/>screen<br/>[Calendar.tsx]"]
  node_countbtn["CountBtn<br/>custom control<br/>[CountBtn.tsx]"]
end

subgraph group_ui["Shared UI"]
  node_button["Button<br/>ui primitive<br/>[button.tsx]"]
  node_dialog["Dialog<br/>ui primitive<br/>[dialog.tsx]"]
  node_tabs["Tabs<br/>ui primitive<br/>[tabs.tsx]"]
  node_cal_ui["Calendar UI<br/>ui primitive<br/>[calendar.tsx]"]
  node_chart["Chart<br/>ui primitive<br/>[chart.tsx]"]
  node_nav["Nav Menu<br/>ui primitive"]
end

subgraph group_data["Data & external"]
  node_utils["utils<br/>shared helper<br/>[utils.ts]"]
  node_supabase[("Supabase<br/>client boundary<br/>[supabaseClient.ts]")]
end

subgraph group_platform["Styling & assets"]
  node_globals["globals.css<br/>global styles<br/>[globals.css]"]
  node_public["public<br/>static assets"]
  node_assets["assets"]
  node_vite["Vite config<br/>build config<br/>[vite.config.ts]"]
  node_tailwind["Tailwind config<br/>style config<br/>[tailwind.config.js]"]
  node_postcss["PostCSS config<br/>css pipeline<br/>[postcss.config.js]"]
end

node_main -->|"mounts"| node_app
node_app -->|"routes to"| node_auth
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_calendar
node_app -->|"uses"| node_countbtn
node_auth -->|"builds on"| node_button
node_auth -->|"builds on"| node_dialog
node_auth -->|"auth/data"| node_supabase
node_home -->|"builds on"| node_button
node_home -->|"builds on"| node_tabs
node_home -->|"builds on"| node_chart
node_home -->|"data"| node_supabase
node_calendar -->|"builds on"| node_cal_ui
node_calendar -->|"builds on"| node_dialog
node_calendar -->|"data"| node_supabase
node_countbtn -->|"wraps"| node_button
node_button -->|"helpers"| node_utils
node_dialog -->|"helpers"| node_utils
node_tabs -->|"helpers"| node_utils
node_cal_ui -->|"helpers"| node_utils
node_chart -->|"helpers"| node_utils
node_nav -->|"helpers"| node_utils
node_app -->|"styles"| node_globals
node_auth -->|"styles"| node_globals
node_home -->|"styles"| node_globals
node_calendar -->|"styles"| node_globals
node_app -.->|"imports"| node_assets
node_app -.->|"serves"| node_public
node_vite -.->|"builds"| node_main
node_tailwind -.->|"configures"| node_globals
node_postcss -.->|"processes"| node_globals

click node_main "https://github.com/jsantiago318/scaling-lamp/blob/main/src/main.tsx"
click node_app "https://github.com/jsantiago318/scaling-lamp/blob/main/src/App.tsx"
click node_auth "https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Auth.tsx"
click node_home "https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Home.tsx"
click node_calendar "https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Calendar.tsx"
click node_countbtn "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/CountBtn.tsx"
click node_button "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/button.tsx"
click node_dialog "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/dialog.tsx"
click node_tabs "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/tabs.tsx"
click node_cal_ui "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/calendar.tsx"
click node_chart "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/chart.tsx"
click node_nav "https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/navigation-menu.tsx"
click node_utils "https://github.com/jsantiago318/scaling-lamp/blob/main/src/lib/utils.ts"
click node_supabase "https://github.com/jsantiago318/scaling-lamp/blob/main/supabaseClient.ts"
click node_globals "https://github.com/jsantiago318/scaling-lamp/blob/main/src/styles/globals.css"
click node_public "https://github.com/jsantiago318/scaling-lamp/tree/main/public"
click node_assets "https://github.com/jsantiago318/scaling-lamp/tree/main/src/assets"
click node_vite "https://github.com/jsantiago318/scaling-lamp/blob/main/vite.config.ts"
click node_tailwind "https://github.com/jsantiago318/scaling-lamp/blob/main/tailwind.config.js"
click node_postcss "https://github.com/jsantiago318/scaling-lamp/blob/main/postcss.config.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_main,node_app toneBlue
class node_auth,node_home,node_calendar,node_countbtn toneAmber
class node_button,node_dialog,node_tabs,node_cal_ui,node_chart,node_nav toneMint
class node_utils,node_supabase toneRose
class node_globals,node_public,node_assets,node_vite,node_tailwind,node_postcss toneIndigo
```

## Components

### Runtime shell

SPA entrypoints and root composition.

- [main.tsx](https://github.com/jsantiago318/scaling-lamp/blob/main/src/main.tsx): bootstrap · Mounts the React app into the Vite host page. · `src/main.tsx`
- [App.tsx](https://github.com/jsantiago318/scaling-lamp/blob/main/src/App.tsx): root composition · Root application wiring and screen composition. · `src/App.tsx`

### Screens

Top-level user-facing views.

- [Auth](https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Auth.tsx): screen · Authentication-facing screen. · `src/screens/Auth.tsx`
- [Home](https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Home.tsx): screen · Primary landing or dashboard screen. · `src/screens/Home.tsx`
- [Calendar](https://github.com/jsantiago318/scaling-lamp/blob/main/src/screens/Calendar.tsx): screen · Calendar-centric screen for scheduling or dated data. · `src/screens/Calendar.tsx`
- [CountBtn](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/CountBtn.tsx): custom control · App-specific interaction component layered on shared UI. · `src/components/CountBtn.tsx`

### Shared UI

Reusable primitives and app-specific controls.

- [Button](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/button.tsx): ui primitive · Core action button primitive. · `src/components/ui/button.tsx`
- [Dialog](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/dialog.tsx): ui primitive · Modal and overlay primitive. · `src/components/ui/dialog.tsx`
- [Tabs](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/tabs.tsx): ui primitive · Tabbed navigation and panel switching primitive. · `src/components/ui/tabs.tsx`
- [Calendar UI](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/calendar.tsx): ui primitive · Date picker and calendar display primitive. · `src/components/ui/calendar.tsx`
- [Chart](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/chart.tsx): ui primitive · Visualization primitive for dashboard-style views. · `src/components/ui/chart.tsx`
- [Nav Menu](https://github.com/jsantiago318/scaling-lamp/blob/main/src/components/ui/navigation-menu.tsx): ui primitive · Navigation menu primitive. · `src/components/ui/navigation-menu.tsx`

### Data & external

Client integration boundary and shared helpers.

- [utils](https://github.com/jsantiago318/scaling-lamp/blob/main/src/lib/utils.ts): shared helper · Cross-cutting client helper functions such as class composition. · `src/lib/utils.ts`
- [Supabase](https://github.com/jsantiago318/scaling-lamp/blob/main/supabaseClient.ts): client boundary · Central client for auth and persisted data access. · `supabaseClient.ts`

### Styling & assets

Global styling and static asset boundaries.

- [globals.css](https://github.com/jsantiago318/scaling-lamp/blob/main/src/styles/globals.css): global styles · Global stylesheet and Tailwind layer definitions. · `src/styles/globals.css`
- [public](https://github.com/jsantiago318/scaling-lamp/tree/main/public): static assets · Vite-served static files boundary. · `public`
- [assets](https://github.com/jsantiago318/scaling-lamp/tree/main/src/assets): imported assets · Module-managed static assets imported from the app. · `src/assets`
- [Vite config](https://github.com/jsantiago318/scaling-lamp/blob/main/vite.config.ts): build config · Frontend build and dev-server configuration. · `vite.config.ts`
- [Tailwind config](https://github.com/jsantiago318/scaling-lamp/blob/main/tailwind.config.js): style config · Design-token and utility-class configuration. · `tailwind.config.js`
- [PostCSS config](https://github.com/jsantiago318/scaling-lamp/blob/main/postcss.config.js): css pipeline · CSS transformation pipeline configuration. · `postcss.config.js`

## Connections

- main.tsx → App.tsx: mounts · Bootstraps the root React composition.
- App.tsx → Auth: routes to · Composes the authentication screen.
- App.tsx → Home: routes to · Composes the home screen.
- App.tsx → Calendar: routes to · Composes the calendar screen.
- App.tsx → CountBtn: uses · Includes the custom app-specific control.
- Auth → Button: builds on · Uses shared primitives for interaction.
- Auth → Dialog: builds on · Uses shared primitives for overlays or flows.
- Auth → Supabase: auth/data · Delegates authentication and backend interaction.
- Home → Button: builds on · Uses shared primitives for actions.
- Home → Tabs: builds on · Uses tabbed UI for view organization.
- Home → Chart: builds on · Uses visualization primitives for dashboard content.
- Home → Supabase: data · Fetches or persists app data through the client.
- Calendar → Calendar UI: builds on · Uses the calendar primitive for date interaction.
- Calendar → Dialog: builds on · Uses overlay patterns for editing or detail views.
- Calendar → Supabase: data · Reads and writes calendar-related persisted data.
- CountBtn → Button: wraps · Extends the base button primitive.
- Button → utils: helpers · Shares class-composition and common UI helpers.
- Dialog → utils: helpers · Shares class-composition and common UI helpers.
- Tabs → utils: helpers · Shares class-composition and common UI helpers.
- Calendar UI → utils: helpers · Shares class-composition and common UI helpers.
- Chart → utils: helpers · Shares class-composition and common UI helpers.
- Nav Menu → utils: helpers · Shares class-composition and common UI helpers.
- App.tsx → globals.css: styles · Consumes the global style layer.
- Auth → globals.css: styles · Rendered within the global style layer.
- Home → globals.css: styles · Rendered within the global style layer.
- Calendar → globals.css: styles · Rendered within the global style layer.
- App.tsx → assets: imports · May consume module-managed static assets.
- App.tsx → public: serves · Uses Vite-served static files as part of the SPA.
- Vite config → main.tsx: builds · Defines the dev and production bundle pipeline.
- Tailwind config → globals.css: configures · Shapes the global utility and theme layer.
- PostCSS config → globals.css: processes · Feeds the CSS build pipeline.