An AI-powered web-based Learning app for English, Chinese, and Knowledge Bank.
Built with Angular 21 (standalone components, Signals, Angular Material, Tailwind CSS, Transloco i18n en/zh-CN). This project was generated with Angular CLI version 21.1.2.
The frontend expects two sibling backend services to be running (see the workspace-level docs for start-learning-all.ps1):
- aclearningutil - REST API serving all learning content (
apiUrlinsrc/environments/environment*.ts) - acidserver - OIDC identity provider; all exercise routes require sign-in
Run ng serve for a dev server. Navigate to http://localhost:29800/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Vitest.
Run ng lint (ESLint via @angular-eslint) and npm run format (Prettier).
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
The frontend connects to different backend APIs depending on the version:
| Version | Package Version | API Repository | Protocol |
|---|---|---|---|
| V1 | 0.* |
Knowledge Builder API | OData |
| V2 | 1.*+ |
aclearningutil | REST |
The API URL is configured in src/environments/environment*.ts via apiUrl.
| Version | Package Version | Branch | Status |
|---|---|---|---|
| V1 | 0.* |
v1 |
Legacy — live on gh-pages branch |
| V2 | 1.*+ |
main (feature branches as needed) |
Active development |
The gh-pages branch currently serves V1.
The app adapts to different screen sizes with a three-tier layout (minimum width: 360px — supports most mobile phones in portrait):
| Breakpoint | Navbar | Sub-page Toolbars |
|---|---|---|
| >1200px | Full labels, user name visible | Normal layout with all controls |
| 821–1200px | Abbreviated labels (Voc, Sent, etc.), icon-only user button | Compact single-row, item count hidden |
| ≤820px | Hamburger menu with slide-out drawer | Two-row layout, smaller buttons |
MIT
Alva Chien