# Tech Context — Strava Frontend ## Stack - **Vue 3** (3.5) + **TypeScript** 5.8 (strict mode, `noEmit`) - **Vite** 5 (dev server, bundler) with `@vitejs/plugin-vue` 5 and `@intlify/unplugin-vue-i18n/vite` - **Pinia** 3 — state management (options-style stores; vue ≥3.3 required) - **vue-router** 4 — history-mode routing - **vue-i18n** 9 — i18n (composition mode, default/fallback `ru`) - **Vuestic UI** 1.9 — component library (+ `@vuestic/tailwind`) - **Tailwind CSS** 3.4 + **PostCSS** + **autoprefixer** — utilities/styling - **Sass** — global styles - **Axios** 1.x — HTTP client (client-side via injected instances, server-side in `server/api.ts`) - **Chart.js** 4 + `vue-chartjs` 5 (+ zoom/geo/adapter-moment plugins) — charts - **vue-yandex-maps** — Yandex Maps integration - **Express** 4 — SSR server (`server/`, port 3001) - **tsx** — TypeScript runner for the SSR server (in `dependencies`, not devDependencies) ## Tooling - **ESLint** 9 flat config (`eslint.config.mjs`) with `vue`, `typescript-eslint` 8, `prettier` plugins - **Prettier** 3 — formatting - **Husky** + **lint-staged** — pre-commit lint of `src/**/*.{ts,js,vue}` - **vue-tsc** 2 — type checking at build ## Scripts (`package.json`) - `yarn dev` — Vite dev server - `yarn build` — `vue-tsc --noEmit && vite build` - `yarn lint` — eslint --fix over src - `yarn format` — prettier --write - `yarn build:ci` / `yarn start:ci` — CI build + static serve - `yarn server:dev` — run SSR server via `tsx server/index.ts` - `yarn server:build` — compile SSR server (`tsc -p tsconfig.server.json`) - `yarn server:start` — run compiled SSR server ## Environment - API host is a hardcoded constant `HOST` in `src/main.ts` (no `.env`-driven base URL). Yandex Maps API key and GTM keys are hardcoded / env-driven (`VITE_APP_GTM_ENABLED`, `VITE_APP_GTM_KEY`). - Locales: `br, cn, es, gb, ir, ru` (default `ru`). - SSR: `SSR_PORT` (default 3001), `SSR_BASE_URL` (default `https://cycle-rider.ru`), `VITE_APP_API_URL` (backend API for server-side fetches). - Deploy: Dockerfile (**multi-stage, node:20-alpine**: build stage + runtime stage with nginx) + `nginx.conf` (SSR proxy + SPA fallback); `run.sh` local runner. - Dev environment requires **Node ≥18.19** (vite 5); Docker uses node:20-alpine. ## Constraints - No test framework configured (no vitest/jest/cypress). Verification = `yarn lint` + `yarn build`. - Backend API contract: `/api/v0/*`, JWT Bearer auth, error envelope may be `{ code, message, detail }` (see backend `app/web/errors.py`). - Keep `vue-tsc` clean — build fails on type errors.