adding new features

Checklist for a new authenticated module.

Feature module architecture#

Core pattern#

flowchart TD
  AA["AuthenticatedApp state"] --> Route["Route path"]
  Route --> Comp["Feature.jsx"]
  Comp --> W["w.method"]
  Nav["Navbar navItems"] --> Route

Aspect	Implementation
State	Declared in `AuthenticatedApp`
Props	Data + setters
Data	`w`
Cache	Keyed by `registration_id`
Loading	Dedicated booleans

Sticky top-14 for selectors. try/catch around portal calls.

Step-by-step implementation guide#

Step 1: create the feature component#

src/components/NewFeature.jsx. Accept w, caches, setters. Fetch in useEffect. Use Select from @/components/ui/select.

Step 2: define state in AuthenticatedApp#

flowchart TD
  Data["featureData {}"] --> Sem["featureSemestersData"]
  Sem --> Sel["selectedFeatureSem"]
  Sel --> Load["featureMetaLoading featureDataLoading"]

Names: featureData, selectedFeatureSem, isFeatureLoading, activeFeatureTab.

Step 3: add route configuration#

flowchart TD
  Routes --> Existing["attendance grades exams subjects profile"]
  Routes --> New["/new-feature"]

Hash URL: https://codeblech.github.io/jportal/#/new-feature.

flowchart LR
  Nav["Navbar.jsx navItems"] --> Icon["public/icons/*.svg?react"]
  Nav --> Link["NavLink to /new-feature"]

Push onto navItems in Navbar.jsx. Prefer an SVG in public/icons/ with ?react, same as attendance. lucide is fine if you skip a custom icon. Labels stay short.

Step 5: implement mock data support#

flowchart TD
  JSON["src/assets/fakedata.json"] --> Method["MockWebPortal.js method"]
  Method --> Comp["Feature.jsx w"]

Add a domain in fakedata.json. Implement snake_case methods that match jsjiit. Import JSON at the top of MockWebPortal.js. Do not fetch /fakedata.json from public/.

Step 6: add WebPortal API methods (real mode)#

Call existing jsjiit methods. If the portal has no method, extend jsjiit first.

Method	Feature
`get_attendance_meta`, `get_attendance`	Attendance
`get_sgpa_cgpa`, `get_grade_card`	Grades
`get_registered_semesters`, `get_registered_subjects_and_faculties`, `get_subject_choices`	Subjects
`get_semesters_for_exam_events`, `get_exam_schedule`	Exams
`get_personal_info`	Profile

Advanced patterns#

Multi-tab features#

flowchart TD
  Parent["activeTab on AuthenticatedApp"] --> Tabs["Tabs onValueChange"]
  Tabs --> Views["overview daily"]

Attendance, Grades, and Subjects already do this. Keep tab state on the parent so it survives leaving the route.

Jportal