overview

JPortal is a client-side PWA that replaces the official JIIT web portal UI. Login skips the captcha. Attendance, grades, exams, subjects, and profile all run in the browser against jsjiit.

Live app: https://codeblech.github.io/jportal/. Public stats: https://codeblech.github.io/jportal/#/stats.

Related: Getting Started, Architecture Overview, Feature Modules.

• Login without captcha through jsjiit (WebPortal.student_login)
• React 18 UI on Radix primitives and Tailwind 4
• Offline shell via vite-plugin-pwa and Workbox
• Theme presets in src/utils/theme-presets.ts
• Demo mode through MockWebPortal and src/assets/fakedata.json
• Installable on Android, iOS, and Windows

The hosted GitHub Pages site is still https://codeblech.github.io/jportal/. This docs tree follows the tashifkhan/jportal fork.

Five protected modules after login, plus a public stats page:

Authentication modes#

App keeps two portal instances and picks one:

1. Real mode. realPortal is new WebPortal({ useProxy: true, proxyUrl: "https://jportal-cors-proxy.onrender.com" }) from jsjiit 0.0.27.
2. Demo mode. mockPortal is MockWebPortal reading fakedata.json. The login screen’s Try Demo button sets isDemoMode.

Core framework#

flowchart TD
  indexHtml["index.html"] --> pyodide["Pyodide 0.23.4 CDN"]
  indexHtml --> beacon["Cloudflare beacon"]
  indexHtml --> mainJsx["src/main.jsx"]
  mainJsx --> App["src/App.jsx"]
  App --> Theme["ThemeScript + ThemeProvider + DynamicFontLoader"]
  App --> Query["QueryClientProvider"]
  App --> Router["HashRouter"]
  App --> jsjiit["[email protected] CDN ESM"]

jsjiit is imported as https://cdn.jsdelivr.net/npm/[email protected]/dist/jsjiit.esm.js. It is not listed in package.json.

Application entry point and authentication flow#

sequenceDiagram
  participant App as App
  participant LS as localStorage
  participant Portal as realPortal
  participant UI as LoginWrapper or AuthenticatedApp

  App->>LS: getItem username password
  alt credentials present
    App->>Portal: student_login(username, password)
    alt session exists
      App->>UI: AuthenticatedApp w=realPortal
    else LoginError
      App->>LS: remove username password
      App->>UI: LoginWrapper
    end
  else no credentials
    App->>UI: LoginWrapper
  end

App is the auth gate:

1. On mount it reads username and password from localStorage and calls realPortal.student_login.
2. Unauthenticated users get LoginWrapper (Login).
3. Authenticated users get AuthenticatedApp with w={activePortal}.
4. /stats stays public and always renders Cloudflare.

Feature module organization#

flowchart TD
  AuthApp["AuthenticatedApp"] --> Header["Header"]
  AuthApp --> Routes["protected Routes"]
  AuthApp --> Navbar["Navbar"]
  Routes --> Att["Attendance"]
  Routes --> Gr["Grades"]
  Routes --> Ex["Exams"]
  Routes --> Sub["Subjects"]
  Routes --> Pr["Profile"]
  AuthApp -->|"w + state + setters"| Att
  AuthApp -->|"w + state + setters"| Gr
  AuthApp -->|"w + state + setters"| Ex
  AuthApp -->|"w + state + setters"| Sub
  AuthApp -->|"w + profileData"| Pr

AuthenticatedApp holds feature state and drills it down. Each feature gets w, its cache objects, and the matching setters. Navigating between hash routes does not wipe that cache.

Portal abstraction layer#

Feature components call the same methods on w whether w is WebPortal or MockWebPortal.

flowchart LR
  Feat["Attendance Grades Exams Subjects Profile"] --> W["w prop"]
  W --> Real["realPortal WebPortal"]
  W --> Mock["mockPortal MockWebPortal"]
  Real --> Proxy["jportal-cors-proxy.onrender.com"]
  Proxy --> JIIT["JIIT Web Portal"]
  Mock --> Fake["src/assets/fakedata.json"]

Methods actually used:

• student_login
• get_attendance_meta, get_attendance, get_subject_daily_attendance
• get_registered_semesters, get_registered_subjects_and_faculties, get_subject_choices
• get_semesters_for_exam_events, get_exam_events, get_exam_schedule
• get_semesters_for_grade_card, get_grade_card, get_sgpa_cgpa
• get_semesters_for_marks, download_marks
• get_personal_info

There is no get_grades() or get_student_info() on this client.

State persistence#

VitePWA in jportal/vite.config.ts generates the service worker. There is no hand-rolled public/sw.js.

1. Precache JS, CSS, HTML, ico, png, svg, and .whl files (30MB max).
2. CacheFirst for Pyodide v0.23.4.
3. Extra manifest entries for jiit_marks-0.2.0 and PyMuPDF wheels under ${base}artifact/.

• Presets live in src/utils/theme-presets.ts (adefault, modern-minimal, violet-bloom, and many more).
• Light/dark toggle uses the View Transition API when the browser supports it.
• DynamicFontLoader injects Google Fonts from the active preset.
• CSS custom properties on :root feed Tailwind @theme inline.
• Zustand store: src/stores/theme-store.ts.

See Theme System.

HashRouter so GitHub Pages does not need rewrite rules.

Public:

• /stats → Cloudflare

Protected:

• / and /login redirect to /attendance
• /attendance, /grades, /exams, /subjects, /profile

Chrome:

• Header (theme, stats link, logout)
• Navbar (five feature links)

• Install and run: Getting Started
• Structure: Architecture Overview
• Features: Feature Modules
• UI: UI Components
• Build: Build & Deployment
• Hacking: Development Guide