# molimen/o-matic architecture

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

- Interactive diagram: https://gitdiagram.com/molimen/o-matic
- Repository: https://github.com/molimen/o-matic

## Overview

This repository is a client-side single-page application built with Vite, React, TypeScript, and plain CSS. There is no backend code in the repo; all behavior appears to happen in the browser, with data either fetched from external sources through service modules or stored locally.

The application entry point is `src/main.tsx`, which bootstraps `App.tsx` into `index.html`. `App.tsx` is the top-level composition and is the likely place where page selection/routing and global app structure are wired together.

The app is organized around page-level feature screens in `src/pages`: `Home`, `About`, `AlterEgo`, `Kel-o-matic`, `Petto`, `Seat-o-matic`, and `NotFound`. The naming suggests a set of distinct tools or mini-apps rather than one uniform workflow, so the main architectural boundary is “page/feature” rather than “model/domain” in the classic sense.

Shared UI is concentrated in `src/components`. The `user-input` subfolder contains reusable form controls such as buttons, number inputs, select inputs, color pickers, and message display. These are the building blocks for the interactive pages and are likely reused across multiple tools.

There is a small notification subsystem in `src/components/notification/notificationWindow.tsx`. This indicates a cross-cutting UI concern for transient feedback, probably triggered by user actions on the feature pages rather than managed as a separate domain.

The `src/services` folder contains `getStudentsData.tsx` and `getBlacklistsData.tsx`, which represent the data-access boundary of the app. These modules likely encapsulate fetching and parsing of external or remote data so the page components do not deal directly with transport concerns.

The `src/utils` folder contains the app’s reusable logic and small helpers: `classData`, `hexToBrightness`, `language`, `shuffleArray`, and `useLocalStorage`. This suggests the app depends on client-side data shaping, visual calculations, language/text handling, randomization, and persistence in browser storage.

`useLocalStorage` is especially important architecturally because it implies user preferences or generated state survive page reloads without a server. That makes browser storage part of the persistence layer alongside any fetched service data.

Static assets live under `public`, including fonts, icons, and image sets such as carousel images. These are part of the presentation layer and are loaded directly by the browser rather than through the TypeScript module graph.

Styling is split between `src/index.css` for global styles and component/page-local structure in the React components. There is no sign of a CSS framework; the layout is likely custom-styled.

Tooling is standard frontend app tooling: TypeScript config files, ESLint, Prettier, and `package-lock.json` for deterministic installs. `vite.config.ts` indicates Vite is the build/dev server and module bundler, which matters because the app is designed to be shipped as static frontend assets.

From an architecture-diagram perspective, the main flow is: browser entry → app shell → page feature component → shared inputs/utilities/services → browser storage and/or external data → UI feedback via notifications. The main boundaries are feature pages, shared components, service/data access, and utility logic.

Main entry points: [`src/App.tsx`](https://github.com/molimen/o-matic/blob/master/src/App.tsx) (App), [`src/pages/AlterEgo.tsx`](https://github.com/molimen/o-matic/blob/master/src/pages/AlterEgo.tsx) (Alter Ego), [`src/pages/Seat-o-matic.tsx`](https://github.com/molimen/o-matic/blob/master/src/pages/Seat-o-matic.tsx) (Seat-o-matic), [`src/components/user-input`](https://github.com/molimen/o-matic/tree/master/src/components/user-input) (Inputs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g1["App Shell"]
  node_n1(("Entry<br/>bootstrap<br/>[main.tsx]"))
  node_n2["App<br/>shell<br/>[App.tsx]"]
  node_n17["Styles<br/>global css<br/>[index.css]"]
end

subgraph group_g2["Feature Pages"]
  node_n3["Home<br/>page<br/>[Home.tsx]"]
  node_n4["About<br/>page<br/>[About.tsx]"]
  node_n5["Alter Ego<br/>tool page<br/>[AlterEgo.tsx]"]
  node_n6["Kel-o-matic<br/>tool page<br/>[Kel-o-matic.tsx]"]
  node_n7["Petto<br/>tool page<br/>[Petto.tsx]"]
  node_n8["Seat-o-matic<br/>tool page<br/>[Seat-o-matic.tsx]"]
  node_n9["Not Found<br/>page<br/>[NotFound.tsx]"]
end

subgraph group_g3["Shared UI"]
  node_n10["Inputs<br/>controls"]
  node_n11["Notify<br/>feedback ui"]
end

subgraph group_g4["Data & Logic"]
  node_n12["Students"]
  node_n13["Blacklists"]
  node_n14{{"Storage<br/>hook"}}
  node_n15{{"Helpers<br/>utils"}}
end

subgraph group_g5["Static Assets"]
  node_n16[("Assets<br/>static")]
end

subgraph group_g6["Tooling"]
  node_n18["Vite<br/>build config<br/>[vite.config.ts]"]
end

node_n1 -->|"mounts"| node_n2
node_n2 -->|"renders"| node_n3
node_n2 -->|"routes"| node_n4
node_n2 -->|"routes"| node_n5
node_n2 -->|"routes"| node_n6
node_n2 -->|"routes"| node_n7
node_n2 -->|"routes"| node_n8
node_n2 -->|"fallback"| node_n9
node_n2 -->|"uses"| node_n10
node_n2 -->|"uses"| node_n11
node_n5 -->|"loads"| node_n12
node_n5 -->|"loads"| node_n13
node_n6 -->|"persists"| node_n14
node_n7 -->|"persists"| node_n14
node_n8 -->|"loads"| node_n12
node_n8 -->|"uses"| node_n15
node_n10 -->|"depends on"| node_n15
node_n10 -->|"triggers"| node_n11
node_n2 -->|"styles"| node_n17
node_n1 -->|"builds with"| node_n18
node_n2 -->|"references"| node_n16

click node_n1 "https://github.com/molimen/o-matic/blob/master/src/main.tsx"
click node_n2 "https://github.com/molimen/o-matic/blob/master/src/App.tsx"
click node_n3 "https://github.com/molimen/o-matic/blob/master/src/pages/Home.tsx"
click node_n4 "https://github.com/molimen/o-matic/blob/master/src/pages/About.tsx"
click node_n5 "https://github.com/molimen/o-matic/blob/master/src/pages/AlterEgo.tsx"
click node_n6 "https://github.com/molimen/o-matic/blob/master/src/pages/Kel-o-matic.tsx"
click node_n7 "https://github.com/molimen/o-matic/blob/master/src/pages/Petto.tsx"
click node_n8 "https://github.com/molimen/o-matic/blob/master/src/pages/Seat-o-matic.tsx"
click node_n9 "https://github.com/molimen/o-matic/blob/master/src/pages/NotFound.tsx"
click node_n10 "https://github.com/molimen/o-matic/tree/master/src/components/user-input"
click node_n11 "https://github.com/molimen/o-matic/blob/master/src/components/notification/notificationWindow.tsx"
click node_n12 "https://github.com/molimen/o-matic/blob/master/src/services/getStudentsData.tsx"
click node_n13 "https://github.com/molimen/o-matic/blob/master/src/services/getBlacklistsData.tsx"
click node_n14 "https://github.com/molimen/o-matic/blob/master/src/utils/useLocalStorage.tsx"
click node_n15 "https://github.com/molimen/o-matic/tree/master/src/utils"
click node_n16 "https://github.com/molimen/o-matic/tree/master/public"
click node_n17 "https://github.com/molimen/o-matic/blob/master/src/index.css"
click node_n18 "https://github.com/molimen/o-matic/blob/master/vite.config.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_n1,node_n2,node_n17 toneBlue
class node_n3,node_n4,node_n5,node_n6,node_n7,node_n8,node_n9 toneAmber
class node_n10,node_n11 toneMint
class node_n12,node_n13,node_n14,node_n15 toneRose
class node_n16 toneIndigo
class node_n18 toneTeal
```

## Components

### App Shell

Browser entry and top-level composition

- [Entry](https://github.com/molimen/o-matic/blob/master/src/main.tsx): bootstrap · Bootstraps the React app into the document · `src/main.tsx`
- [App](https://github.com/molimen/o-matic/blob/master/src/App.tsx): shell · Top-level app composition and page wiring · `src/App.tsx`
- [Styles](https://github.com/molimen/o-matic/blob/master/src/index.css): global css · Global application styling · `src/index.css`

### Feature Pages

Page-level tools and screens

- [Home](https://github.com/molimen/o-matic/blob/master/src/pages/Home.tsx): page · Landing page and overview · `src/pages/Home.tsx`
- [About](https://github.com/molimen/o-matic/blob/master/src/pages/About.tsx): page · About screen and app info · `src/pages/About.tsx`
- [Alter Ego](https://github.com/molimen/o-matic/blob/master/src/pages/AlterEgo.tsx): tool page · Feature page for AlterEgo · `src/pages/AlterEgo.tsx`
- [Kel-o-matic](https://github.com/molimen/o-matic/blob/master/src/pages/Kel-o-matic.tsx): tool page · Feature page for Kel-o-matic · `src/pages/Kel-o-matic.tsx`
- [Petto](https://github.com/molimen/o-matic/blob/master/src/pages/Petto.tsx): tool page · Feature page for Petto · `src/pages/Petto.tsx`
- [Seat-o-matic](https://github.com/molimen/o-matic/blob/master/src/pages/Seat-o-matic.tsx): tool page · Feature page for Seat-o-matic · `src/pages/Seat-o-matic.tsx`
- [Not Found](https://github.com/molimen/o-matic/blob/master/src/pages/NotFound.tsx): page · Fallback route or missing-page screen · `src/pages/NotFound.tsx`

### Shared UI

Reusable interactive and feedback components

- [Inputs](https://github.com/molimen/o-matic/tree/master/src/components/user-input): controls · Shared user-input controls for the tool pages · `src/components/user-input`
- [Notify](https://github.com/molimen/o-matic/blob/master/src/components/notification/notificationWindow.tsx): feedback ui · Transient notification window for app feedback · `src/components/notification/notificationWindow.tsx`

### Data & Logic

Client data access, storage, and helper logic

- [Students](https://github.com/molimen/o-matic/blob/master/src/services/getStudentsData.tsx): service · Fetches or prepares student data · `src/services/getStudentsData.tsx`
- [Blacklists](https://github.com/molimen/o-matic/blob/master/src/services/getBlacklistsData.tsx): service · Fetches or prepares blacklist data · `src/services/getBlacklistsData.tsx`
- [Storage](https://github.com/molimen/o-matic/blob/master/src/utils/useLocalStorage.tsx): hook · Local storage persistence helper · `src/utils/useLocalStorage.tsx`
- [Helpers](https://github.com/molimen/o-matic/tree/master/src/utils): utils · Shared helpers for sorting, language, brightness, and class data · `src/utils`

### Static Assets

Public files served directly by the browser

- [Assets](https://github.com/molimen/o-matic/tree/master/public): static · Fonts, icons, and images served from public · `public`

### Tooling

Build and project configuration

- [Vite](https://github.com/molimen/o-matic/blob/master/vite.config.ts): build config · Vite dev server and bundling configuration · `vite.config.ts`

## Connections

- Entry → App: mounts · Entry bootstraps the root app
- App → Home: renders · App composes the home screen
- App → About: routes · App can show about page
- App → Alter Ego: routes · App can show Alter Ego page
- App → Kel-o-matic: routes · App can show Kel-o-matic page
- App → Petto: routes · App can show Petto page
- App → Seat-o-matic: routes · App can show Seat-o-matic page
- App → Not Found: fallback · App handles unknown routes
- App → Inputs: uses · Feature pages share input controls
- App → Notify: uses · App or pages emit notifications
- Alter Ego → Students: loads · Alter Ego uses student data
- Alter Ego → Blacklists: loads · Alter Ego uses blacklist data
- Kel-o-matic → Storage: persists · Kel-o-matic keeps state in browser storage
- Petto → Storage: persists · Petto keeps state in browser storage
- Seat-o-matic → Students: loads · Seat-o-matic uses student data
- Seat-o-matic → Helpers: uses · Seat-o-matic depends on helpers like shuffle and class data
- Inputs → Helpers: depends on · Shared controls use common helper logic
- Inputs → Notify: triggers · Inputs can surface feedback messages
- App → Styles: styles · Global styles support the app shell
- Entry → Vite: builds with · Vite serves and bundles the client app
- App → Assets: references · Pages and components can reference public assets