monitor-im-flur

Project Structure (abridged)

src/
	api/              # External data fetchers
	components/       # UI building blocks (Cards, Timetable, Weather, Terminal, etc.)
	store/            # Zustand stores encapsulating fetch + state
	types/            # Type definitions for external data
pipeline/
	create-git-hash-html.sh  # Injects current commit hash into dist
Dockerfile          # Nginx static hosting
docker-compose.yml  # Example runtime service definition

Environment Configuration

Create a .env (or .env.local) for Vite with the following (only what you need):

VITE_FLATTASTIC_API_KEY=your_flatastic_api_key
# (Planned) VITE_HOME_ASSISTANT_TOKEN=your_long_lived_token  # NOTE: currently hardcoded – see Security section

Vite automatically exposes variables prefixed with VITE_ to the client bundle. Do NOT place secrets without that prefix – but remember: anything in the client bundle is public. For sensitive data consider a tiny proxy backend instead of calling APIs directly from the browser.

Security Notice

src/api/homeAssistant.ts currently contains a hard‑coded long‑lived Home Assistant token. This should be refactored before any public deployment:

1. Remove the literal token from the repository.
2. Load it via environment variable during build (import.meta.env.VITE_HOME_ASSISTANT_TOKEN) OR
3. Prefer a minimal server proxy so the token never ships to the browser.

Development

Install dependencies (Bun is inferred from bun.lock, but npm/pnpm/yarn also work).

bun install

Run the dev server (HTTPS support possible with vite-plugin-mkcert if certificates are trusted):

bun run dev

Open: http://localhost:5173

Lint & Format

bun run lint

Optionally run Biome (if desired):

npx biome check --apply .

Build

bun run build

Outputs production bundle to dist/.

Docker Image

Build locally:

docker build -t monitor-im-flur:local .

Run:

docker run --rm -p 9123:80 monitor-im-flur:local

Or use compose (uses published image):

docker compose up -d

Visit: http://localhost:9123

Data Sources

• KVV Departures: Public endpoint (JSON) for stop IDs 7000044 / 7000045.
• Weather: Open‑Meteo forecast API (lat 49.0094, lon 8.4044, Europe/Berlin TZ).
• Flatastic: Auth via x-api-key (user provided).
• Home Assistant: Long‑lived bearer token (refactor recommended).

Adding a New Card

1. Create a directory under src/components/<NewCard>/ with NewCard.tsx & optional style.module.css.
2. Wrap content with existing Card component (icon + name props).
3. Register inside Dashboard.tsx where layout lives (using CardColumn / CardRow).

State Management Notes

All data fetching is encapsulated inside zustand store fetch methods invoked on an interval within the respective components. Consider centralizing polling or using React Query if complexity grows.