StudentHub Frontend Architecture#

StudentHub uses a multi-app frontend architecture: four separate Ionic/Angular applications, each deployed independently for a distinct user type, all talking to a single PHP/Yii2 backend.

Each app is an independent SPA. The backend (studenthub) exposes a separate /v1 API module per user type, with distinct ports for local development: Admin (21080), Candidate (22080), Company (23080), Staff (25080), plus Inspector (24080) and Verification (26080) 5.

Per-App Entry Points#

Each app shares a consistent internal structure:

• Environment config — src/environments/environment*.ts holds the apiEndpoint, Cloudinary URL, and S3 bucket. Multiple configs exist: dev, prod, docker, and per-developer overrides (khalid, krushn, etc.). The Angular build swaps files at compile time 6.
• App module — src/app/app.module.ts bootstraps IonicModule.forRoot(), Auth0, Service Worker, IonicStorageModule, and runs APP_INITIALIZER providers (Auth + AWS) before the app becomes interactive.
  • Candidate: 7
  • Staff: 8 — storage DB name __payroll_staff
  • Admin: 9
  • Company: 10
• Routing — src/app/app-routing.module.ts uses lazy-loaded loadChildren imports throughout. All authenticated routes are guarded by AuthService. A custom SelectiveLoadingStrategy handles preloading.
  • Candidate routes 11 — work logging, wallet, chat, profile completion
  • Staff routes 12 — candidates, companies, stores, teams, transfers, expenses, leave
  • Admin routes 13 — dashboard, staff, company, university, transfer management
  • Company routes 14 — contracts, work logs, invoices, chat

Authentication#

All four apps use Auth0 (bawes.us.auth0.com) for identity, configured at the Angular module level 15. The Auth0 token is passed to the Yii2 backend as an HTTP Bearer token. The backend validates it via a custom JWT component that supports HS256/RS256 algorithms 16. Initial login uses HTTP Basic Auth to exchange credentials for a bearer token; subsequent requests use Authorization: Bearer <token> 17 18.

Deployment#

Every app uses the same two-stage Docker build pattern:

1. Build stage — node:14-alpine image installs Ionic CLI globally and runs npm run-script build:production 19.
2. Serve stage — nginx:alpine copies the compiled output from /app/www/ and serves it as static files 20.

See Dockerfiles: candidate, staff, admin, company.

CORS on the backend is handled per controller via Yii's Cors filter. Allowed origins come from Yii::$app->params['allowedOrigins']; both dev and production configs currently set this to '*' 21. Pagination metadata is exposed via X-Pagination-* headers 22.

Architecture Diagram#