kmtnflower/README.md

RadioStation — KMountain Flower

A static Angular boilerplate for a community radio station website. The app showcases a broadcast schedule, upcoming events, donation tiers, an about page, and a contact form — all styled with a warm mountain/nature aesthetic.

Architecture

src/
├── app/                    # Angular application root
│   ├── app.ts              # Root <app-root> component (shell layout)
│   ├── app.config.ts       # Application config: providers + router
│   ├── app.html            # Shell template: navbar + <router-outlet> + footer
│   ├── app.routes.ts       # Route definitions (lazy-loaded components)
│   ├── app.scss            # Root component styles
│   ├── hero/               # Landing page (home route)
│   ├── about/              # About the station page
│   ├── schedule/           # Program schedule (data-driven table)
│   ├── donate/             # Donation tiers (data-driven cards)
│   ├── events/             # Upcoming events (data-driven cards)
│   ├── contact/            # Contact form (two-way binding via FormsModule)
│   ├── navbar/             # Top navigation bar (responsive hamburger menu)
│   └── footer/             # Site footer
├── styles/                 # Global SCSS design tokens
│   ├── _variables.scss     # Color palette, spacing, breakpoints, z-index scale
│   ├── _mixins.scss        # Reusable SCSS mixins (cards, buttons, responsiveness)
│   ├── _themes.scss        # Maps SCSS vars → CSS custom properties on :root
│   └── index.scss          # Global entry: reset + utility classes + theme import
├── assets/
│   └── svg/                # Decorative SVGs (mountain dividers, floral accents)
├── main.ts                 # App bootstrap entry point
└── index.html              # HTML shell (<app-root> mount point)

Key architectural decisions

• Standalone components — Every component is standalone (no NgModules). This is Angular 21's default and keeps imports explicit.
• Lazy-loaded routes — Each page is code-splitted via loadComponent() in app.routes.ts. The router imports each component on first navigation.
• Data-driven pages — ScheduleComponent, DonateComponent, and EventsComponent all hold their content as readonly arrays (readonly programs: Program[], etc.). To update content, edit these arrays in the component TypeScript files.
• Design tokens in SCSS — All colors, spacing, breakpoints, and typography live in src/styles/_variables.scss. Change these once and every component inherits the new values via _themes.scss (which exposes them as CSS custom properties) and the mixins in _mixins.scss.
• SCSS preprocessor paths — angular.json adds src/styles/ to the include path, so any component can @use 'variables' without a relative path.

Pages

Route	Component	Description
/	HeroComponent	Hero landing section
/about	AboutComponent	Station mission & info
/schedule	ScheduleComponent	Program schedule, rendered from programs[]
/donate	DonateComponent	Donation tiers, rendered from tiers[]
/events	EventsComponent	Upcoming events, rendered from upcomingEvents[]
/contact	ContactComponent	Contact form with submission handler

Customization guide

Re-skinning the color palette

1. Edit the color variables in src/styles/_variables.scss. The primary palette (blue) and accent palette (orange) control the entire site.
2. That's it — _themes.scss automatically maps them to CSS custom properties used by every component.

Changing typography

Edit $font-primary, $font-heading, and $font-mono in src/styles/_variables.scss.

Adding a new page

1. Create a new folder under src/app/ with a *.component.ts, *.component.html, and *.component.scss.
2. Export a @Component decorated class.
3. Add a route in app.routes.ts using loadComponent() to lazy-load it.
4. (Optional) Add a RouterLink in navbar.component.html.

Updating schedule / events / donation content

Edit the readonly arrays directly in their respective component files:

• schedule.component.ts — programs
• events.component.ts — upcomingEvents
• donate.component.ts — tiers

Each interface (Program, Event, Tier) is defined in the component file. Modify the interfaces and data together.

Getting started

Prerequisites

• Node.js 20+ (or use the dev container)
• npm 11+

Quick start

npm install
ng serve

Open http://localhost:4200.

Development server

ng serve            # Start dev server (hot reload enabled)
ng serve --port 8080  # Custom port

Building

ng build             # Production build → dist/
ng build --configuration development  # With source maps

Code style

This project uses Prettier (configured in .prettierrc). Run:

npx prettier --write .

Testing

ng test              # Run unit tests (Vitest)

Dev container

This project ships with a .devcontainer/ for VS Code. Open the repo in VS Code → "Reopen in Container" to get a pre-configured environment with Angular CLI, Node.js, Python 3, and Git.

Project tech stack

• Framework: Angular 21 (standalone components, signals-ready)
• Language: TypeScript 5.9
• Styling: SCSS with design tokens (variables → mixins → CSS custom properties)
• Routing: Angular Router with lazy loading
• Form handling: FormsModule (two-way binding)
• Linting/formatting: Prettier
• Testing: Vitest (via Angular CLI)
• Package manager: npm 11.11