98 lines
4.3 KiB
Markdown
98 lines
4.3 KiB
Markdown
# AdAstra App
|
|
|
|
Frontend of the AdAstra platform — a multi-domain Angular application covering e-commerce, CMS, skydive club management, and Hero Wars guild analytics.
|
|
|
|
## Tech stack
|
|
|
|
| Layer | Choice |
|
|
| --------- | ------------------------------------------------------------------ |
|
|
| Framework | Angular 21 (standalone components, no NgModules) |
|
|
| Language | TypeScript 5.9 — strict mode + strictTemplates |
|
|
| UI | Angular Material 21, Bootstrap 5 |
|
|
| Charts | Chart.js 4 (ng2-charts), Chartist |
|
|
| HTTP | Angular HttpClient with three interceptors (base URL, JWT, errors) |
|
|
| Tests | Karma + Jasmine |
|
|
| Linting | angular-eslint + Prettier (enforced via lint-staged) |
|
|
| Node | `^20.19.0 \|\| ^22.12.0` |
|
|
|
|
## Related repository
|
|
|
|
The backend API lives in [`adastra_api`](../adastra_api) — an Express + Sequelize stack, routes grouped under `/api/ecommerce`, `/api/cms`, `/api/skydive`, `/api/herowars`.
|
|
|
|
## Getting started
|
|
|
|
```bash
|
|
npm install
|
|
npm run local # dev server on :4400, uses environment.local.ts
|
|
```
|
|
|
|
Copy and configure your local environment:
|
|
|
|
```bash
|
|
cp src/environments/environment.example.ts src/environments/environment.local.ts
|
|
# fill in: apiBaseUrl, apiKey, googleMapApiKey, …
|
|
```
|
|
|
|
## Commands
|
|
|
|
| Command | Description |
|
|
| --------------- | ----------------------------------------------------- |
|
|
| `npm start` | Dev server on :4200 with production config |
|
|
| `npm run dev` | Dev server on :4300 with `environment.development.ts` |
|
|
| `npm run local` | Dev server on :4400 with `environment.local.ts` |
|
|
| `npm run build` | Production build → `dist/adastra_angular/` |
|
|
| `npm run watch` | Incremental build in development configuration |
|
|
| `npm run lint` | angular-eslint on `**/*.ts` and `**/*.html` |
|
|
| `npm test` | Karma + Jasmine unit tests |
|
|
|
|
Run a single spec:
|
|
|
|
```bash
|
|
ng test --include src/path/to/file.spec.ts
|
|
```
|
|
|
|
## Architecture
|
|
|
|
### Bootstrap
|
|
|
|
`AppComponent` renders a single `FullComponent` shell (Material sidenav + toolbar). Routes are split into two arrays in `app.routes.ts`:
|
|
|
|
- `auth.routes.ts` — protected by `authGuard`; admin sections additionally require `adminGuard`
|
|
- `noauth.routes.ts` — public pages and auth entry points, blocked by `noauthGuard` when already authenticated
|
|
|
|
Data is pre-fetched by resolvers under `src/app/core/resolvers/` — new route components should follow this pattern rather than fetching in `ngOnInit`.
|
|
|
|
### HTTP pipeline
|
|
|
|
Three interceptors applied in order:
|
|
|
|
1. **`apiInterceptor`** — prepends `environment.apiBaseUrl` to every request. Services use relative paths (`/cms/user`, `/skydive/jumps`, …), never absolute URLs.
|
|
2. **`tokenInterceptor`** — attaches `Authorization: Token <jwt>` when a token exists in `localStorage['jwtToken']`.
|
|
3. **`errorInterceptor`** — unwraps `err.error` and rethrows.
|
|
|
|
### Feature domains
|
|
|
|
| Domain | Routes | Backend prefix |
|
|
| ---------- | ------------------------------------------------------ | ---------------- |
|
|
| E-commerce | `products`, `product/:slug`, `products/:category` | `/api/ecommerce` |
|
|
| CMS | `pages`, `page/:slug`, `home`, profiles, articles | `/api/cms` |
|
|
| Skydive | `skydive/*` — aeronefs, canopies, dropzones, jumps | `/api/skydive` |
|
|
| Hero Wars | Guild analytics, weekly snapshots in `src/files-data/` | `/api/herowars` |
|
|
|
|
### Path aliases
|
|
|
|
Defined in `tsconfig.json`; always prefer them over relative imports:
|
|
|
|
```
|
|
@components @services @models @guards
|
|
@interceptors @resolvers @viewmodels @interfaces
|
|
@constants @core/* @environments/*
|
|
@data/* @assets/* @styles/*
|
|
```
|
|
|
|
When adding a new file, export it from the appropriate `index.ts` barrel so the alias resolves correctly.
|
|
|
|
### Styling
|
|
|
|
SCSS with `includePaths: ["src/styles"]` — imports like `@use 'variables'` resolve globally. Material date locale is set to `fr-FR` with `DD/MM/YYYY` format.
|