Knowledge Habit Builder

An AI-powered web-based Learning app for English, Chinese, and Knowledge Bank.

Built with Angular 22 (standalone components, Signals, Angular Material, Tailwind CSS, Transloco i18n en/zh-CN). This project was originally generated with Angular CLI version 21.1.2.

Prerequisites

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 (apiUrl in src/environments/environment*.ts); started by start-learning-all.ps1
• acidserver - OIDC identity provider, hosted in Docker (docker compose up -d in its repo - not started by start-learning-all.ps1); all exercise routes require sign-in

Development server

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.

Code scaffolding

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.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Vitest.

Linting and formatting

Run ng lint (ESLint via @angular-eslint) and npm run format (Prettier).

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

API Backend

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.

Versions

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.

Responsive Layout

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	Icon-only destinations (name in tooltip/aria-label), user name visible	Normal layout with all controls
821–1200px	Icon-only destinations, user name hidden (tooltip only)	Compact single-row, item count hidden
≤820px	Hamburger menu with slide-out drawer (icon + label)	Two-row layout, smaller buttons

License

MIT

Author

Alva Chien