kfj001/kmtnflower
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

updated 3 tier structure

Browse Source
This commit is contained in:
kfj001
2026-06-18 04:31:37 +00:00
parent 13855bf620
commit 6fc00b8ce9
8 changed files with 307 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/CLAUDE.md
+15 -9
View File
@@ -2,29 +2,35 @@
## Project overview
This is a standalone-component Angular 21 app for a community radio station website. It renders a hero page, about page, broadcast schedule, donation tiers, upcoming events, and a contact form — all styled with a warm mountain/nature color palette (blue primary + orange accent on cream).
A three-tier web app for a community radio station: Angular 21 frontend, FastAPI backend, PostgreSQL database. Renders a hero page, about page, broadcast schedule, donation tiers, upcoming events, and a contact form — styled with a warm mountain/nature color palette (blue primary + orange accent on cream).
## Code style
- **Components:** Standalone only (no NgModules). Every component is a single file with `@Component` decorator, `imports` array, and the four standard files (`.ts`, `.html`, `.scss`, component).
- **Data patterns:** Page content lives as `readonly` arrays with interfaces defined in the same file. Never put content in services or APIs — this is a static site.
- **Components:** Standalone only (no NgModules). Every component is a single file with `@Component` decorator, `imports` array, and four standard files (`.ts`, `.html`, `.scss`, component).
- **Data patterns:** Page content (programs, events, tiers) is stored in PostgreSQL and served via the FastAPI backend. The frontend uses HTTP services ([src/app/services/](src/app/services/)) to fetch data at runtime. To add or modify content, interact with the API or run `seed.py` — never hardcode content in components.
- **SCSS:** All design tokens go in [src/styles/_variables.scss](src/styles/_variables.scss). Mixins in [_mixins.scss](src/styles/_mixins.scss). CSS custom properties exposed in [_themes.scss](src/styles/_themes.scss). Components import via `@use 'variables'` (no relative path needed).
- **Routes:** Defined in [src/app/app.routes.ts](src/app/app.routes.ts) using `loadComponent()` lazy loading. Add new pages here after creating the component.
- **TypeScript:** Strict mode enabled. Use `readonly` for data arrays. No unnecessary interfaces — keep data shapes close to their components.
- **TypeScript:** Strict mode enabled. Use `readonly` for constants (config, URLs). Keep data shapes close to their components where used only once.
## Architecture
See [README.md](../README.md) for a full architecture map. Key files:
See [README.md](README.md) for a full architecture map. Key files:
- `src/app/app.routes.ts` — all routing
- `src/app/app.routes.ts` — all frontend routing
- `src/environments/environment.ts` — dev API URL (`http://localhost:8000`)
- `src/environments/environment.prod.ts` — prod API URL (`''`, proxied through Nginx)
- `src/styles/_variables.scss` — color palette, spacing, breakpoints (change these to re-skin)
- `src/styles/_mixins.scss` — card-style, button-style, responsive, gradient-text, flowery-border, fade-in
- `src/styles/_themes.scss` — SCSS → CSS custom property mapping
- `docker-compose.yml` — 3-service stack (db, api, frontend)
- `backend/app/main.py` — FastAPI entry point (CORS, router registration)
- `backend/app/models.py` — SQLAlchemy ORM (Program, Event, DonationTier)
## Common tasks
- **Re-skin:** Edit colors in `_variables.scss` only.
- **Add a page:** Create component folder → add route in `app.routes.ts` → add nav link (if needed).
- **Update content:** Edit the `readonly` array in the relevant component file (`schedule.component.ts`, `events.component.ts`, `donate.component.ts`).
- **Run the app:** `ng serve` → [localhost:4200](http://localhost:4200).
- **Build:** `ng build` → `dist/`.
- **Update content (dev):** Run the API, then use Swagger UI at [http://localhost:8000/docs](http://localhost:8000/docs) to create/update content.
- **Update content (seed):** Edit [backend/seed.py](backend/seed.py) and run `docker compose exec api python seed.py`.
- **Run the app:** `docker compose up --build` → [localhost:4200](http://localhost:4200).
- **Build:** `ng build` → `dist/`, then `docker compose up --build -d` for full stack.