Technical Track Record

Case 04: GradeOS – Academic Scheduling Engine

Note: Source code is private due to enterprise compliance and non-disclosure agreements. Detailed system architecture and DevOps documentation are available for review.

Vite 5JavaScript (ES6+)Tailwind CSSLocalStorage Persistence

Briefing

Building the annual timetable for an educational institution is a classic combinatorial optimization problem that often paralyzes coordination teams for weeks. I built GradeOS to turn this chaotic process into a matter of hours. The system resolved a real logistical deadlock, enabling a complete, validated schedule in under 4 hours after weeks of stalled manual attempts.

Technical Deep Dive

I designed a 100% client-side multi-page architecture (MPA), using Vite 5 to keep builds lightweight and modular. At its core is the 'Seed Environment', an assisted rescheduling engine that enforces strict rules and detects conflicts in real time. With no backend required for the demo, I implemented a State Machine logic with LocalStorage persistence, ensuring the app is resilient, fast, and capable of handling 120+ constraint variables simultaneously.

Seed Environment

Scheduling Resolution Grid

Constraints120+ vars

Resolution time<4h

ConflictsLive detect

PersistenceLocalStorage

Documentation

Static multipage front-end demo for GradeOS, an intelligent school scheduling system with visualization, simulation, and assisted rescheduling.

Overview

The project delivers a 100% client-side experience with:

Institutional landing page with product narrative and illustrative timetable.
Simple login for console access.
Operational console with setup, engine, schedule, rules, versioning, and export modules.
Seed Environment for rescheduling with strict rule validation, drag and drop, and local backup.

There is no backend or API. All state is simulated in the browser via JavaScript and localStorage.

System architecture

code

+--------------------------------------------------------------------+
| Browser                                                            |
|                                                                    |
| index.html       -> scripts/main.js       -> Demo timetable         |
| login.html       -> scripts/login.js      -> Local auth + redirect  |
| app/index.html   -> scripts/app/*         -> Modular console        |
| semear/index.html -> scripts/semear.js    -> Rescheduling + validation |
|                                                                    |
| styles/*.css     -> tokens, layout, components, animations          |
+--------------------------------------------------------------------+

Stack

Layer	Technology	Notes
Build	Vite 5	Multipage build configured in `vite.config.js`
UI	HTML + CSS	No framework, responsive layout
Interaction	JavaScript (ES Modules)	Modules in `scripts/`
Persistence	localStorage	Auth and backup in the browser
Typography	Google Fonts	Bebas Neue, Space Grotesk, IBM Plex Mono

Project structure

index.html: GradeOS landing page.
login.html: Local login screen.
app/index.html: Operational console.
semear/index.html: Seed Environment (rescheduling).
scripts/: client-side logic per page and modules.
styles/: design tokens, layout, components, and per-page themes.
public/: favicons.
dist/: build output (generated by Vite).
vite.config.js: multipage build entries.

How to run

Prerequisites

Node.js 18+ (recommended for Vite 5)
npm 8+

Installation

bash

npm install

Development

bash

npm run dev

Production build

bash

npm run build

Build preview

bash

npm run preview

Pages and flows

Landing (`index.html`)

Product narrative, KPIs, and informational blocks.
Demo timetable with view switching (classes, teachers, rooms).
Reveal animations via IntersectionObserver.

Login (`login.html`)

Local password for demo access.
Redirects to the console in app/.
Button to clear access (localStorage).

Console (`app/index.html`)

Dashboard with KPIs and quick actions.
School, subjects, and teachers setup (front-end simulation).
Optimization engine with sliders and calculated score.
Interactive timetable with view switching and conflict validation.
Hard/soft rules with dynamic counters.
Versioning with comparison and simulated restore.
Export with formats and communication triggers.
Guided tutorial with spotlight and local persistence.

Seed Environment (`semear/index.html`)

Rescheduling board with drag and drop.
Strict rule validation and real-time weekly load checks.
Block logs and pending indicators.
Manual backup via JSON export/import.

Configuration and customization

Build entries

Edit vite.config.js to add new pages or change routes.

Brand tokens and themes

styles/tokens.css centralizes colors, typography, and spacing.

Content and sample data

Landing and demo timetable: scripts/main.js.
Console and app schedule: scripts/app/schedule.js.
Seed rules and validation: scripts/semear.js.

Demo password

The password is hardcoded in scripts/login.js.

Persistencia local

Chave	Uso	Onde
`gradeos_auth`	Controle de acesso demo	`scripts/login.js`, `scripts/app/auth.js`
`semearScheduleV1`	Backup da grade Semear	`scripts/semear.js`
`gradeos_tutorial_seen`	Tutorial ja exibido	`scripts/app/tutorial.js`

Deploy

O projeto eh estatico. Basta publicar o conteudo gerado em dist/ em qualquer host estatico.

Checklist

Rodar npm run build.
Publicar dist/ (Netlify, Vercel static, S3, Nginx, etc.).
Garantir que as rotas app/ e semear/ estejam acessiveis.

Se for hospedar em subdiretorio, configure base no vite.config.js.

Monitoramento e observabilidade

Nao ha telemetria embutida. Para observabilidade, inclua:

Eventos de uso (ex: inicio de tutorial, exportacao) em scripts/app/.
Logs de validacao e conflitos em scripts/semear.js.

Troubleshooting

Login redireciona em loop: limpar localStorage ou usar o botao \"Limpar acesso\".
Grade nao renderiza: conferir se o JavaScript esta habilitado.
Build falha: validar Node 18+ e apagar dist/ antes de novo build.
Preview vazio: garantir que o build foi gerado e que o host serve caminhos relativos.

Seguranca

O login eh apenas demonstrativo:

Senha hardcoded e validacao 100% client-side.
localStorage nao e seguro para dados sensiveis.

Para uso real, substitua por backend com autenticacao e controle de sessao.

Performance

Assets estaticos e CSS modularizados.
Evite imagens grandes sem compressao.
Considere cache agressivo para dist/ em producao.

Backup e recuperacao

Nao ha banco de dados. O unico estado persistente esta no navegador:

Use o exportador JSON no Semear para backup manual.
Para reset completo, limpe localStorage.

Manutencao

Tarefas recomendadas:

npm update para atualizar Vite.
npm run build para validar integridade do bundle.
Revisar textos e dados de exemplo nos arquivos scripts/.

Recursos adicionais

PRD.md: requisitos e contexto do produto.
Brandbook.md: diretrizes de marca.
design-system.md: componentes e linguagem visual.
case.md: caso e narrativa de produto.
Awwards.md: referencias de layout e storytelling.