SEAM (Single-page Enterprise Application Manager) is a vanilla JavaScript single-page application built entirely on native ES Modules — no React, no Vue, no Angular. It delivers a full-featured management platform covering eight business modules through hash-based client-side routing, JWT-secured sessions, and Socket.IO real-time communication, all without a build step for the JavaScript layer itself. Teams that need a lightweight, dependency-free frontend shell they can fully understand and extend will find SEAM an ideal starting point.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.
What SEAM Is
SEAM is a frontend-only SPA that pairs with any REST API backend. It handles authentication, session persistence, and role-driven navigation entirely in the browser. All page modules are loaded lazily through dynamicimport() calls, keeping the initial bundle small while the built-in Router resolves #/ruta hash fragments to the correct view. A simple Node.js HTTP server (server.js) serves the static assets with automatic extension resolution and an SPA fallback to index.html for all extensionless paths.
Who It Is For
SEAM is designed for teams that want:- Full transparency — every layer (routing, HTTP client, state, layouts) is plain JavaScript you can read and change.
- Zero framework lock-in — no virtual DOM diffing, no JSX, no compiler required.
- Rapid module addition — dropping a new page file and registering a route is all it takes to add a feature.
- Real-time awareness — Socket.IO is wired at startup and bridged to an internal
EventBusso any page can react to server-pushed events without polling.
Key Capabilities
Hash-Based Routing
The
Router listens to hashchange events and resolves #/ruta fragments to page modules. Most routes are lazily imported on demand; only LoginPage, HomePage, and UsersPage are eagerly loaded.JWT Authentication
On login the server returns a JWT that is stored in
localStorage under currentUser. Every subsequent API call reads session.token from in-memory state hydrated from storage at startup.Socket.IO Real-Time
EventBus.connect(token) is called at startup (and on login) to establish a Socket.IO connection. Socket events are republished on the internal EventBus so UI components subscribe without knowing about the socket transport.ES Modules — No Bundler
Every source file uses standard
import/export. The browser loads modules natively over HTTP; server.js serves .js files with application/javascript content-type and no caching headers so changes are visible immediately.Role-Based Sidebar
After login the server returns
sidebarItems alongside the JWT. PrivateLayout passes those items to the Sidebar component, which renders only the navigation links the current user’s role permits.Tailwind CSS — Compiled
Styling uses Tailwind CSS v4 compiled by
build-tailwind.mjs via @tailwindcss/postcss. The dark-mode class strategy and a custom primary: '#3B82F6' colour token are defined in tailwind.config.js.Application Modules
SEAM ships with eight modules, each living under its own directory injs/pages/.
| Module | Route | Description |
|---|---|---|
| Auth | #/login | Login form, JWT acquisition, and persistent session setup |
| Users | #/usuarios | Create, list, update, and deactivate system users |
| Roles | #/roles | Define roles and assign them to users |
| Permissions | #/permisos | Granular access-control entries per role |
| Projects | #/proyectos | Full project lifecycle management |
| Tasks | #/tareas | Task tracking scoped to individual projects |
| Grades | #/calificaciones | Record and query grade or evaluation entries |
| Reports | #/reportes | Generate and view cross-module reports |
Backend Requirement
SEAM is a pure frontend application. It expects a REST API to be reachable at the base URL configured injs/config/api.js:
js/config/api.js
API_BASE to build its endpoint URLs. The backend must implement the routes consumed by each page module and issue JWTs on successful authentication. See the Quickstart guide for instructions on starting both the frontend server and the backend together.
SEAM’s
server.js serves the frontend on port 3000. The backend API is expected on port 3001. Make sure both ports are available before starting the application.