EduAgent Portal
Study-Abroad Management Platform for Education Agencies
Project Overview
EduAgent Portal is a large-scale Angular SPA built for education agencies and their institutional partners. It centralises the full student lifecycle — from initial course search through enrollment, applications, and ongoing case management — alongside partner (organization, branch, team) and institution (campus, course) management, commission and transaction tracking, health cover quote flows, and a FullCalendar-based events module. The goal was to replace fragmented tools with a single, role-aware platform that supports consistent, auditable workflows.
My Role
As the Frontend / Angular Developer, I owned the full web client from architecture to deployment. This included designing the lazy-loaded module structure, implementing JWT/OAuth auth with refresh-token handling and request queuing, building the RBAC layer with CASL and API-backed permissions, creating complex reactive-form wizards (course search, enrollment), integrating third-party services (Google Maps, FullCalendar, hCaptcha), and handling deployment to Firebase Hosting.
Key Features
- Lazy-loaded feature modules (auth, dashboard, course search, students, partners, enrollments, applications, commissions, institutions, settings, cases, health cover, my events, profile) for minimal initial bundle size
- JWT / OAuth authentication: login, forgot/reset password, and partner signup with hCaptcha protection; Bearer token attached by auth interceptor; refresh-token flow with a single in-flight request and a queue of waiting requests retried on success
- API-backed permission model: on layout entry a resolver fetches permissions; LayoutService builds CASL ability rules so both route guards and UI elements (buttons, menu items) respect the same access rules
- Multi-criteria course search wizard with filtering by location, institution, course type, and intake; step-based enrollment wizard guiding agents through the full enrollment creation flow using reactive forms
- Student management with full lifecycle views; partner management with nested branches and teams; institution management with campus detail pages and Google Maps pins
- Enrollments, linked applications, and commission / transaction tracking with list and detail views
- Case management module for support workflows; health cover request-quote and quotes-list flows
- Centralized CodeListService with in-memory caching; route-level CodeListResolver declares exactly which code lists each route needs, avoiding redundant API calls and blocking spinners
Challenges & Solutions
1.Concurrent 401s and Token Refresh Races
The auth interceptor tracks a single in-flight refresh request. When the first 401 triggers the refresh, all subsequent failing requests are pushed into a queue. Once the new token arrives every queued request is retried with it, preventing duplicate refreshes and ensuring no request is permanently dropped.
2.Fine-Grained, API-Driven Access Control
Permissions are fetched from the API on layout entry and stored via LayoutService. CASL AbilityBuilder translates them into ability rules. Per-feature canActivate guards check the required permission (e.g. STUDENT_INDEX) and redirect unauthorized users, while UI directives hide buttons and menu items that the current user cannot use — a single source of truth for both routing and rendering.
3.Heavy Code-List Dependency Across Screens
A central CodeListService caches fetched code lists in memory. Each route declares its required lists via data.codeList and a shared CodeListResolver fetches only what is missing before the component activates. This avoids redundant API calls and prevents the UI from blocking while waiting for lookup data.
Business Impact
EduAgent Portal gives education agents and back-office staff a single platform to manage students, applications, partners, and institutions with clearly defined roles and permissions. Structured course-search and enrollment wizards enforce consistent data entry, while commission tracking and case management improve follow-up and auditability. Deploying the SPA on Firebase Hosting with the API on AWS Elastic Beanstalk provides a scalable, maintainable architecture with a clean separation between client and backend.
Tech Stack
Highlights
- Lazy-loaded feature modules for fast initial load and clear code boundaries
- JWT / OAuth auth with single in-flight refresh token flow and request queuing on concurrent 401s
- API-backed permissions fed into CASL ability rules for consistent route and UI access control
- Multi-criteria course search wizard and step-based enrollment wizard with reactive forms
- Google Maps integration for institution and campus location views
- FullCalendar-based "My Events" module for scheduling and calendar management
- Centralized CodeListService with route-level resolvers for dropdown data
- hCaptcha on partner signup and document upload to prevent bot abuse