Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TheSerchCp/SEAM/llms.txt

Use this file to discover all available pages before exploring further.

SEAM follows a strict layered architecture that separates concerns into well-defined directories. Every module in the application — users, roles, projects, tasks, grades, and so on — maps to exactly one file in each of the repositories/, services/, and pages/ layers. Learning the layout once gives you a mental model that applies to every module.

​
Directory tree

SEAM/
├── index.html                        # App shell — mounts <div id="app">
├── server.js                         # Node.js HTTP server (port 3000)
├── build-tailwind.mjs                # One-shot PostCSS / Tailwind build script
├── tailwind.config.js                # Tailwind v4 config (content, theme, darkMode)
├── package.json
├── nodemon.json
│
├── css/
│   ├── tailwind-base.css             # Tailwind entry point (@import / directives)
│   ├── tailwind.css                  # ⚙ Generated — do not edit by hand
│   ├── components/                   # Per-component stylesheets
│   │   ├── footer.css
│   │   ├── header.css
│   │   ├── loader.css
│   │   ├── modal.css
│   │   ├── sidebar.css
│   │   └── toast.css
│   ├── layout/
│   │   └── private.layout.css
│   ├── pages/
│   │   ├── error.404.css
│   │   ├── error.404.page.css
│   │   └── public/login/login.css
│   └── fontawesome/                  # Bundled Font Awesome assets
│
└── js/
    ├── main.js                       # Entry point — hydrates session, starts router
    ├── config/
    │   └── api.js                    # API_BASE constant
    ├── core/
    │   ├── Router.js                 # Hash-based router + registerPageCleanup
    │   ├── EventBus.js               # Pub/sub + Socket.io bridge
    │   ├── ApiClient.js              # Fetch wrapper (attaches auth token)
    │   └── OperationListeners.js     # Maps socket operations → page keys
    ├── layout/
    │   ├── PrivateLayout.js          # Authenticated shell (header + sidebar + footer)
    │   └── PublicLayout.js           # Unauthenticated shell (login, etc.)
    ├── pages/
    │   ├── auth/
    │   │   └── auth.page.js
    │   ├── home/
    │   │   └── home.page.js
    │   ├── users/
    │   │   └── users.page.js
    │   ├── roles/
    │   │   └── roles.page.js
    │   ├── permissions/
    │   │   └── permissions.page.js
    │   ├── calificaciones/
    │   │   └── calificaciones.page.js
    │   ├── tareas/
    │   │   └── tareas.page.js
    │   ├── proyectos/
    │   │   └── proyectos.page.js
    │   ├── reportes/
    │   │   └── reportes.page.js
    │   └── error/
    │       └── error.404.page.js
    ├── repositories/
    │   ├── users.repository.js
    │   ├── roles.repository.js
    │   ├── permissions.repository.js
    │   ├── auth.repository.js
    │   ├── calificaciones.repository.js
    │   ├── proyectos.repository.js
    │   ├── tareas.repository.js
    │   ├── reportes.repository.js
    │   └── sidebar.repository.js
    ├── services/
    │   ├── users.service.js
    │   ├── roles.service.js
    │   ├── permissions.service.js
    │   ├── auth.service.js
    │   ├── calificaciones.service.js
    │   ├── proyectos.service.js
    │   ├── tareas.service.js
    │   ├── reportes.service.js
    │   └── sidebar.service.js
    ├── shared/
    │   ├── components/
    │   │   ├── FormModal.js
    │   │   ├── Loader.js
    │   │   ├── Modal.js
    │   │   ├── Toast.js
    │   │   ├── footer.js
    │   │   ├── header.js
    │   │   ├── sidebar.js
    │   │   └── ui/
    │   │       ├── Form.js
    │   │       ├── InputField.js
    │   │       ├── SelectField.js
    │   │       ├── Table.js
    │   │       └── TextareaField.js
    │   └── utils/
    │       ├── ComponentInitializer.js
    │       ├── FormValidator.js
    │       ├── Validators.js
    │       └── loadCss.js
    └── state/
        └── session.state.js          # Global session object (user, token, permissions)

​
Directory responsibilities

DirectoryResponsibility
js/config/Single source of truth for the API base URL (API_BASE). Change it here to point all ApiClient calls at a different backend.
js/core/Framework-level primitives: the hash Router, the EventBus (pub/sub + Socket.io), the ApiClient (fetch wrapper with auth headers), and the OperationListeners map for real-time updates.
js/layout/Shell components. PrivateLayout wraps authenticated pages with the sticky header, collapsible sidebar, and footer. PublicLayout wraps unauthenticated pages.
js/pages/One subdirectory per application module. Each subdirectory contains a single *.page.js file that exports an async function returning an HTML string.
js/repositories/Data-access layer. Each file calls ApiClient directly and exports one function per HTTP operation. No business logic lives here.
js/services/Business-logic layer. Each service file imports from its matching repository and re-exports clean, intention-revealing functions consumed by page files.
js/shared/Reusable UI components (FormModal, Modal, Toast, Table, InputField, …) and utility helpers (FormValidator, Validators, loadCss).
js/state/A single session.state.js module that holds the mutable global session object (user, token, permissions, sidebarItems).
css/Tailwind entry point, the generated tailwind.css output, per-component CSS files, per-layout CSS files, per-page CSS files, and bundled Font Awesome assets.

​
Naming conventions

Every module follows a predictable three-file naming pattern:
LayerFile name patternExample
Data accessjs/repositories/<module>.repository.jsusers.repository.js
Business logicjs/services/<module>.service.jsusers.service.js
Viewjs/pages/<module>/<module>.page.jsusers/users.page.js
This consistency means you can locate any module’s files immediately by knowing its name, and adding a new module always follows the same three-step pattern.
The css/tailwind.css file is generated automatically by the build:css or build:css:watch scripts. Never edit it by hand — your changes will be overwritten on the next build. Edit css/tailwind-base.css or add Tailwind classes directly in HTML/JS templates instead.

Build docs developers (and LLMs) love

Get started for freeTalk to us